Geek Answers Handbook

Google chart graph with x-axis date

Work with the Google graphic line. The problem I ran into is that the chart showing the values โ€‹โ€‹of one day did not implement the timeline with dates. I understand that the schedule will be wide if you get the values, for example, in one week, is there any way to solve this? Did I think of something like that?

enter image description here

What it looks like right now:

enter image description here

Database: (date is saved as date in phpadmin)

enter image description here

the code:

<?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( // Labels for your chart, these represent the column titles // Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title array('label' => 'Time', 'type' => 'number'), array('label' => 'PH', 'type' => 'number'), array('label' => 'temperature','type' => 'number'), array('label' => 'Chlorine','type' => 'number'), ); $rows = array(); while($r = mysql_fetch_assoc($sth)) { $temp = array(); $temp[] = array('v' => (string) $r['Time']); $temp[] = array('v' => (string) $r['PH']); $temp[] = array('v' => (string) $r['temperature']); $temp[] = array('v' => (string) $r['Chlorine']); $temp[] = array('v' => (int) $r['Time']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); echo $jsonTable; ?> <html> <head> <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: 10, vAxis: {title: "Values", titleTextStyle: {italic: false}}, hAxis: {title: "Time", titleTextStyle: {italic: false}}, }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
+7
javascript date php mysql google-visualization
source share
1 answer

You can get some of what you want using the format property of hAxis , for example:

 hAxis: { format: "HH:mm", ... }

See the line diagram configuration options for hAxis.format .

Update: Example in jsbin

+11
source share

More articles:


All Articles