The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Display current datetime on X axis in Google Chart with data from mysql database
jack83
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd June 2018 - 09:57 PM