SQL Dump to create chart_data_column table with sample data.
readme.txt
Instructions on how to run the script
index.php
The main file to display records and the Pie chart.
Download Zip file at end of this tutorial.
DEMO of BSE Sensex historic data
Using this tutorial one more example is developed showing the historic moment of stock market data. User can see the graph showing full range of movement of stock index or can select a particular year to check the movement of that year.
if($stmt = $connection->query("SELECT month,sale,profit,expanses, exp_fixed,exp_variable FROM chart_data_column")){
echo "No of records : ".$stmt->num_rows."<br>";
$php_data_array = Array(); // create PHP array
echo "<table>
<tr> <th>Month</th><th>Sale</th><th>Profit</th><th>Expanses</th><th>Exp Fxd</th><th>Exp Vrv</th></tr>";
while ($row = $stmt->fetch_row()) {
echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td><td>$row[3]</td><td>$row[4]</td><td>$row[5]</td></tr>";
$php_data_array[] = $row; // Adding to array
}
echo "</table>";
}else{
echo $connection->error;
}
2 : Data array in PHP
Before displaying records in a table we have created an array in PHP ( $php_data_array). While displaying the records in a table we store each record inside the PHP array.
$php_data_array[] = $row; // Adding to array
After displaying all the records in a table we have the $php_data_array with all the data collected from MySQL table. We can display the Json string like this.
echo json_encode($php_data_array);
3 : Transferring data from PHP to JavaScript to create the chart
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Sale');
data.addColumn('number', 'Profit');
data.addColumn('number', 'Expanses');
data.addColumn('number', 'Exp_fixed');
data.addColumn('number', 'Exp_var');
for(i = 0; i < my_2d.length; i++)
data.addRow([my_2d[i][0], parseInt(my_2d[i][1]),parseInt(my_2d[i][2]),parseInt(my_2d[i][3]),parseInt(my_2d[i][4]),parseInt(my_2d[i][5])]);
var options = {
title: 'plus2net.com Sale Profit',
curveType: 'function',
width: 600,
height: 500,
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
///////////////////////////////
</script>
5. HTML part
We can show the chart inside a <DIV> tag and place the same any where we want to display the chart.
<div id="curve_chart"></div>
The chart drawn above can be displayed with live internet connection as the library is to be loaded from gstatic.com
Data is collected from MySQL database table so data can be edited by using script and the same will be reflected by the Chart. We have not included this part in the present script and there are many tutorials available here one handling data using PHP and MySQL.
You can read tutorials on other types of charts displayed by using data from database.