У меня были проблемы с форматированием времени, но теперь у меня возникла проблема с отображением визуализации диаграммы google из этой ошибки: все серии на данной оси должны иметь один и тот же тип данных.
Это цель, с датой и временем: http://jsbin.com/yaqew/1/edit
Поскольку я получил уведомление, конструктор диаграммы google не примет строку времени / даты: https://developers.google.com/chart/interactive/docs/reference#dataparam
База данных:
PHP:
<?php $con=mysql_connect("localhost","root","") or die("Failed to connect with database!!!!"); mysql_select_db("chart", $con); $sth = mysql_query("SELECT * FROM googlechart"); $rows = array(); //flag is not needed $flag = true; $table = array(); $table['cols'] = array( array('label' => 'Time', 'type' => 'datetime'), array('label' => 'Date', 'type' => 'datetime'), array('label' => 'PH', 'type' => 'number'), array('label' => 'temperature','type' => 'number'), array('label' => 'Chlorine','type' => 'number'), ); $rows = array(); while($r = mysql_fetch_assoc($sth)) { // assumes dates are in the format "yyyy-MM-dd" $dateString = $r['Date']; $dateArray = explode('-', $dateString); $year = $dateArray[0]; $month = $dateArray[1] - 1; // subtract 1 to convert to javascript's 0-indexed months $day = $dateArray[2]; echo $dateString."<br>"; // assumes time is in the format "hh:mm:ss" $timeString = $r['Time']; $timeArray = explode(':', $timeString); $hours = $timeArray[0]; $minutes = $timeArray[1]; $seconds = $timeArray[2]; echo $timeString; $temp = array(); $temp[] = array('v' => "Date($year, $month, $day, $hours, $minutes, $seconds)"); $temp[] = array('v' => (string) $r['PH']); $temp[] = array('v' => (string) $r['temperature']); $temp[] = array('v' => (string) $r['Chlorine']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); /* echo $jsonTable; */ ?>
HTML / JavaScript:
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(<?=$jsonTable?>); var options = { /*width: 900, height: 900, */ title: 'Visualization', curveType: 'function', legend: { position: 'bottom' }, pointSize: 12, vAxis: {title: "Values", titleTextStyle: {italic: false}}, hAxis: {title: "Time", titleTextStyle: {italic: false}}, explorer: { actions: ['dragToZoom', 'rightClickToReset'], axis: 'vertical' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); }
Определения столбцов неверны: для даты и времени требуется всего 1 столбец, а не два:
$table['cols'] = array( array('label' => 'Date & Time', 'type' => 'datetime'), array('label' => 'PH', 'type' => 'number'), array('label' => 'temperature','type' => 'number'), array('label' => 'Chlorine','type' => 'number') );