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
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
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
Post a Comment