Многострочная диаграмма линейки Google, используя данные mySQL db

Я немного переживаю процесс обучения, чтобы создать небольшую базу данных, поддерживающую систему отчетности для моей компании.

Цель состоит в том, чтобы нарисовать многострочную диаграмму с помощью Google Chart, основанную на базе данных mysql.

Мне удалось получить данные для эха из базы данных mysql, но это не создает диаграмму. Все, что я получаю, это эхо и пустое место, где должна быть диаграмма. Эхо отображается для целей отладки.

Вот код:

<?php include 'confile.php'; $qry = "SELECT time,p1,p2,p3,p4 from $db WHERE date = '2016-03-02' ORDER BY time ASC"; $result = $conn->query($qry); if($result === FALSE) { echo mysql_errno($result) .": ". mysql_error($result) ."/n"; die(mysql_error()); } $rows = array(); $table = array(); $table['cols'] = array( array('label' => 'Time', 'type' => 'datetime'), array('label' => 'Probe 1', 'type' => 'number'), array('label' => 'Probe 2', 'type' => 'number'), array('label' => 'Probe 3', 'type' => 'number'), array('label' => 'Probe 4', 'type' => 'number') ); while($r = mysqli_fetch_assoc($result)) { $temp = array(); $temp[] = array($r['time']); $temp[] = array($r['p1']); $temp[] = array($r['p2']); $temp[] = array($r['p3']); $temp[] = array($r['p4']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); echo $jsonTable; ?> <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(<?$jsonTable?>); var options = { title: 'Recorded Temperatures', legend: {position: 'bottom' }, width: 800, height: 600 }; var chart = new google.visualization.Table(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> </body> </html>

И это результат «эха»

 {"cols":[{"label":"Time","type":"datetime"},{"label":"Probe 1","type":"number"},{"label":"Probe 2","type":"number"},{"label":"Probe 3","type":"number"},{"label":"Probe 4","type":"number"}],"rows":[{"c":[["03:02:07"],["270.26"],["298.40"],["111.54"],["228.06"]]},{"c":[["03:28:42"],["273.23"],["190.43"],["245.69"],["283.21"]]},{"c":[["07:26:04"],["144.33"],["217.26"],["206.53"],["167.68"]]},{"c":[["12:13:20"],["153.15"],["277.23"],["167.20"],["240.88"]]}]}

Это тестовые данные, используя тестовый запрос на db. Как только я понимаю форматирование для рендеринга диаграммы, это будет настройка, позволяющая пользователю выбрать, какую дату просмотреть и т. Д.

Это был самый близкий существующий вопрос, который я могу найти, но, похоже, не отвечает на этот вопрос.

Не удалось создать диаграмму Google с использованием данных таблицы MySQL в качестве источника данных

После ответа @MickMackusa мне удалось взломать это вместе, чтобы заставить его работать, гарантируя, что массив mysql / php выводится в соответствии с графикой Google.

Спасибо @MickMacUSA за помощь.

Окончательный рабочий код приведен ниже.

 <?php include 'confile.php'; $qry = "SELECT time,p1,p2,p3,p4 from $db WHERE date = '2016-04-16' ORDER BY time ASC"; $result = $conn->query($qry); if($result === FALSE) { echo mysqli_errno($result) .": ". mysqli_error($result) ."/n"; die(mysqli_error()); } $i = 0; //iteration counter - start at 0 $totalRows = mysqli_num_rows($result); // we need this to know when to change the output $targetRows = $totalRows - 1; //row indies start from 0, not 1. foreach ($result as $row){ $comTime = str_replace(":",",",$row['time']); // for each row, remove the : and put , in its place if ($targetRows == $i) { // if the index is the same value as the target (ie, it's the last row)... $temp = "[[".$comTime."],".($row['p1']).",".($row['p2']).",".($row['p3']).",".($row['p4'])."]". PHP_EOL; } else { $temp = "[[".$comTime."],".($row['p1']).",".($row['p2']).",".($row['p3']).",".($row['p4'])."],". PHP_EOL; } $i = $i + 1; $rows[] = $temp; } $table = $rows; $data = implode($table); //format the table as a single string, with line returns //echo $i; //echo $data; ?> <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head> <body> <div id="chart" style="width: 900px; height: 500px"></div> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart(){ var data = new google.visualization.DataTable(); data.addColumn('timeofday','Time'); data.addColumn('number','Probe 1'); data.addColumn('number','Probe 2'); data.addColumn('number','Probe 3'); data.addColumn('number','Probe 4'); data.addRows([ <?php echo $data; ?> //dump the result into here, as it's correctly formatted ]); var options = { title: 'Recorded Temperatures', legend: { position: 'bottom' }, width: 900, height: 500, hAxis: { format: 'hh:mm:ss' } }; var chart = new google.visualization.LineChart(document.getElementById('chart')); chart.draw(data, options); } </script> </body> </html>

Solutions Collecting From Web of "Многострочная диаграмма линейки Google, используя данные mySQL db"

Ваши значения чисел должны быть отформатированы по-разному, и вы хотите, чтобы время timeofday не было.

Согласно: https://developers.google.com/chart/interactive/docs/reference#dataparam

Отформатируйте свои данные так:

 {cols: [ {"label":"Time","type":"timeofday"}, {"label":"Probe 1","type":"number"}, {"label":"Probe 2","type":"number"}, {"label":"Probe 3","type":"number"}, {"label":"Probe 4","type":"number"} ], rows: [ {c:[{v:[03,02,07],f:'03:02:07'},{v:270.26},{v:298.40},{v:111.54},{v:228.06}]}, {c:[{v:[03,28,42],f:'03:28:42'},{v:273.23},{v:190.43},{v:245.69},{v:283.21}]}, {c:[{v:[07,26,04],f:'07:26:04'},{v:144.33},{v:217.26},{v:206.53},{v:167.68}]}, {c:[{v:[12,13,20],f:'12:13:20'},{v:153.15},{v:277.23},{v:167.20},{v:240.88}]} ] } Количество {cols: [ {"label":"Time","type":"timeofday"}, {"label":"Probe 1","type":"number"}, {"label":"Probe 2","type":"number"}, {"label":"Probe 3","type":"number"}, {"label":"Probe 4","type":"number"} ], rows: [ {c:[{v:[03,02,07],f:'03:02:07'},{v:270.26},{v:298.40},{v:111.54},{v:228.06}]}, {c:[{v:[03,28,42],f:'03:28:42'},{v:273.23},{v:190.43},{v:245.69},{v:283.21}]}, {c:[{v:[07,26,04],f:'07:26:04'},{v:144.33},{v:217.26},{v:206.53},{v:167.68}]}, {c:[{v:[12,13,20],f:'12:13:20'},{v:153.15},{v:277.23},{v:167.20},{v:240.88}]} ] }

И вы должны повторить его в javascript:

изменение:

 <?$jsonTable?>

чтобы:

 <?php echo $jsonTable; ?>

И поставьте свой блок кода javascript непосредственно перед </body> .

Это полный рабочий код с использованием вышеуказанного формата данных, который я тестировал на своем сервере:

 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart(){ var data = new google.visualization.DataTable( {cols:[ {"label":"Time","type":"timeofday"}, {"label":"Probe 1","type":"number"}, {"label":"Probe 2","type":"number"}, {"label":"Probe 3","type":"number"}, {"label":"Probe 4","type":"number"} ], rows:[ {c:[{v:[03,02,07],f:'03:02:07'},{v:270.26},{v:298.40},{v:111.54},{v:228.06}]}, {c:[{v:[03,28,42],f:'03:28:42'},{v:273.23},{v:190.43},{v:245.69},{v:283.21}]}, {c:[{v:[07,26,04],f:'07:26:04'},{v:144.33},{v:217.26},{v:206.53},{v:167.68}]}, {c:[{v:[12,13,20],f:'12:13:20'},{v:153.15},{v:277.23},{v:167.20},{v:240.88}]} ] }); var options = { title: 'Recorded Temperatures', legend: { position: 'bottom' }, width: 900, height: 500, hAxis: { format: 'hh:mm:ss' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </body> </html>

Это альтернативный формат, который будет проще / понятнее / проще для создания / понимания с использованием ваших результатов mysqli:

 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart(){ var data = new google.visualization.DataTable(); data.addColumn('timeofday','Time'); data.addColumn('number','Probe 1'); data.addColumn('number','Probe 2'); data.addColumn('number','Probe 3'); data.addColumn('number','Probe 4'); data.addRows([ [[03,02,07],270.26,298.40,111.54,228.06], [[03,28,42],273.23,190.43,245.69,283.21], [[07,26,04],144.33,217.26,206.53,167.68], [[12,13,20],153.15,277.23,167.20,240.88] ]); var options = { title: 'Recorded Temperatures', legend: { position: 'bottom' }, width: 900, height: 500, hAxis: { format: 'hh:mm:ss' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </body> </html>

См. Демонстрацию SO, предоставленную WhiteHat :

 google.charts.load('current', { callback: drawChart, packages: ['corechart', 'table'] }); function drawChart() { var data = new google.visualization.DataTable({cols: [ {"label":"Time","type":"timeofday"}, {"label":"Probe 1","type":"number"}, {"label":"Probe 2","type":"number"}, {"label":"Probe 3","type":"number"}, {"label":"Probe 4","type":"number"} ], rows: [ {c:[{v:[03,02,07],f:'03:02:07'},{v:270.26},{v:298.40},{v:111.54},{v:228.06}]}, {c:[{v:[03,28,42],f:'03:28:42'},{v:273.23},{v:190.43},{v:245.69},{v:283.21}]}, {c:[{v:[07,26,04],f:'07:26:04'},{v:144.33},{v:217.26},{v:206.53},{v:167.68}]}, {c:[{v:[12,13,20],f:'12:13:20'},{v:153.15},{v:277.23},{v:167.20},{v:240.88}]} ] }); var table = new google.visualization.Table(document.getElementById('chart_0')); table.draw(data); var options = { title: 'Recorded Temperatures', legend: {position: 'bottom' }, width: 800, height: 600, hAxis: { format: 'hh:mm:ss' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_1')); chart.draw(data, options); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_0"></div> <div id="chart_1"></div>