Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Server-side Scripting _ Display current datetime on X axis in Google Chart with data from mysql database

Posted by: jack83 Mar 7 2018, 06:05 AM

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.


$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(
'label' => 'datetime',
'type' => 'datetime'
'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);


<meta http-equiv="refresh" content="30">
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="//"></script>
<script type="text/javascript">
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);
margin:0 auto;
<div class="page-wrapper">
<br />
<h2 align="center">Real-Time Energy Consumption Chart</h2>
<div id="column_chart" style="width: 100%; height: 500px"></div>

Powered by Invision Power Board (
© Invision Power Services (