Display current datetime on X axis in Google Chart with data from mysql database |
Display current datetime on X axis in Google Chart with data from mysql database |
jack83 |
Mar 7 2018, 06:05 AM
Post
#1
|
Group: Members Posts: 5 Joined: 1-March 18 Member No.: 26,601 |
Hi, I am trying to display a real time google chart which gets data from mysql database. I managed to get the Y axis right but for the X axis, I want to display the current date and time only, with no scale being shown. May I know how should I change my code to achieve this? Below is my code, Thanks.
<?php $connect = mysqli_connect("localhost", "root", "root", "test"); $query = 'SELECT sum(Power) as Energy, now() AS datetime FROM test'; $result = mysqli_query($connect, $query); $rows = array(); $table = array(); $table['cols'] = array( array( 'label' => 'datetime', 'type' => 'datetime' ), array( 'label' => 'Energy', 'type' => 'number' ) ); while($row = mysqli_fetch_array($result)) { $sub_array = array(); $datetime = $row["datetime"]; $sub_array[] = array( "v" => 'Date(' . $datetime[0] . ')' ); $sub_array[] = array( "v" => $row["Energy"]/1000 ); $rows[] = array( "c" => $sub_array ); } $table['rows'] = $rows; $jsonTable = json_encode($table); ?> <html> <head> <meta http-equiv="refresh" content="30"> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.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(<?php echo $jsonTable; ?>); var options = { width: 1000, height: 500, hAxis: {title: 'Current Time'}, vAxis: {title: 'Energy(kWh)', maxValue: 1000, minValue: 0} }; var chart = new google.visualization.ColumnChart(document.getElementById('column_chart')); chart.draw(data, options); } </script> <style> .page-wrapper { width:1000px; margin:0 auto; } </style> </head> <body> <div class="page-wrapper"> <br /> <h2 align="center">Real-Time Energy Consumption Chart</h2> <div id="column_chart" style="width: 100%; height: 500px"></div> </div> </body> </html> |
Lo-Fi Version | Time is now: 25th April 2024 - 12:32 PM |