I'm trying to display a graph using Google Line Chart but I'm not sure how I can have 2 lines in one chart and preferably only using 1 php file. 1 positive and 1 negative. Do I need 2 array and 2 query?
This is the table from my database with the values for my line chart. There is no primary key in the table.
+--------------------------------+
| direction | xaxis | yaxis |
+--------------------------------+
| negative | 5 | -2.32 |
| negative | 10 | -5.69 |
| negative | 15 | -9.1 |
| negative | 20 | -10.8 |
| negative | 25 | -7.0 |
| positive | 5 | 1.22 |
| positive | 10 | 3.9 |
| positive | 15 | 7.77 |
| positive | 20 | 11.5 |
| positive | 25 | 9.31 |
+--------------------------------+
This is the code I have so far:
$query= "select * from table";
$result=mysqli_query($connect, $query);
$graph=array();
while($row = mysqli_fetch_array($result)){
$graph[]=$row;
}
$graph=json_encode($graph);
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart(graph) {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable();
data.addColumn('number','xaxis');
data.addColumn('number','Positive');
data.addColumn('number','Negative');
var dataArray=[];
$.each(graph, function(obj,obj){
dataArray.push([parseFloat(obj.xaxis),parseFloat(obj.yaxis)]);
}
data.addRows(dataArray);
var options = {
width: 800,
height: 600,
curveType:'function'
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
This is the code to get the graph I need but the values are hard-coded
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Positive');
data.addColumn('number', 'Negative');
data.addRows([
[5, 1.22, -2.32],
[10, 3.9, -5.69],
[15, 7.77, -9.1],
[20, 11.5, -10.8],
[25, 9.31, -7.0]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
My question would be how to populate addRows so I can get the proper array format similar to the second code.
Any help would be appreciated. Please let me know if there's a better and easier way to code this.
