javascript — многострочный, используя линейный график Google
Я пытаюсь отобразить график, используя Google Line Chart, но я не уверен, как у меня может быть 2 линии на одном графике и желательно только с использованием 1 php-файла. 1 положительный и 1 отрицательный. Мне нужно 2 массива и 2 запроса?
Это таблица из моей базы данных со значениями для моей линейной диаграммы.
В таблице нет первичного ключа.
+--------------------------------+
| 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 |
+--------------------------------+
Это код, который я до сих пор:
$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>
Это код для получения нужного мне графика, но значения жестко закодированы
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);
}
Мой вопрос заключается в том, как заполнить addRows, чтобы я мог получить правильный формат массива, похожий на второй код.
Любая помощь будет оценена. Пожалуйста, дайте мне знать, если есть лучший и более простой способ кодировать это.
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …