How to create line chart in php and my sql

Pradeep Maurya

9 years ago

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>

<html>

<head>

<title>Line Graph</title>

</head>

<body>

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>

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;
}
?>

<?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:

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co