Monday, 30 May 2016

How to create line chart in php and my sql

Line chart graph is very usefull to show sell and purchase graph layout of monthly, weekly, yearly as we want.
To create line graph:
first ,we create a index.php file to show garph and second, create get_line_chart.php to  get data fron my sql database.

index.php 
<html>
<head>
<title>Line Graph</title>
</head>
<body>
<div id=”chart_div” style=”width: 900px; height: 500px;”></div>
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1”, {packages:[“corechart”]});
google.setOnLoadCallback(load_chart_data);
function load_chart_data() {
$.ajax({
url: ‘get_line_chart.php’,
type: ‘POST’,
data: {get_chart: true},
dataType: ‘JSON’,
success: function(chart_values) {
console.log(chart_values); // take a peek on the values (browser console)
draw_chart(chart_values);
}
});
}
function draw_chart(chart_values) {
var data = google.visualization.arrayToDataTable(chart_values);
var options = {
title: ‘Your super chart!’,
vAxis: {title: ‘Calls’, titleTextStyle: {italic: false}},
hAxis: {title: ‘date’, titleTextStyle: {italic: false}},
};
var chart = new google.visualization.LineChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
}
</script>
</body>
</html>

Create page:- get_line_chart.php

<?php
if(isset($_POST[‘get_chart’])) {
// connect to database mysqli blah blah
// sample select count, date from your table_name (this is just a sample!)
// $query = mysqli_query($connection, ‘SELECT count, date FROM table_name’); blah blah
// while($row = $query->fetch_assoc()) {
// $result[] = $row; // blah
// }
$result = array(
array(‘count’ => 10, ‘date’ => ‘1’),
array(‘count’ => 5, ‘date’ => ‘2’),
array(‘count’ => 20, ‘date’ => ‘3’),
array(‘count’ => 15, ‘date’ => ‘4’),
array(‘count’ => 50, ‘date’ => ‘5’),
array(‘count’ => 28, ‘date’ => ‘6’),
array(‘count’ => 40, ‘date’ => ‘7’),
array(‘count’ => 10, ‘date’ => ‘8’),
array(‘count’ => 15, ‘date’ => ‘9’),
array(‘count’ => 20, ‘date’ => ’10’),
array(‘count’ => 25, ‘date’ => ’11’),
array(‘count’ => 22, ‘date’ => ’12’),
array(‘count’ => 28, ‘date’ => ’13’),
array(‘count’ => 26, ‘date’ => ’14’),
array(‘count’ => 10, ‘date’ => ’15’),
array(‘count’ => 15, ‘date’ => ’16’),
array(‘count’ => 20, ‘date’ => ’17’),
array(‘count’ => 25, ‘date’ => ’18’),
array(‘count’ => 22, ‘date’ => ’19’),
array(‘count’ => 28, ‘date’ => ’20’),
array(‘count’ => 26, ‘date’ => ’21’),
array(‘count’ => 10, ‘date’ => ’22’),
array(‘count’ => 15, ‘date’ => ’23’),
array(‘count’ => 20, ‘date’ => ’24’),
array(‘count’ => 25, ‘date’ => ’26’),
array(‘count’ => 22, ‘date’ => ’27’),
array(‘count’ => 28, ‘date’ => ’28’),
array(‘count’ => 26, ‘date’ => ’29’),
array(‘count’ => 26, ‘date’ => ’30’),
array(‘count’ => 26, ‘date’ => ’31’),
);
$final = array();
$headers = array_keys(reset($result));
foreach($result as $key => $value) {
$final[] = array(($value[‘date’]), $value[‘count’]);
}
// put the header and prepend it
array_unshift($final, $headers);
// output it
echo json_encode($final);
exit;
}
?> 



Result

No comments:

Post a Comment