Here is my code:
<?php
/* Your Database Name */
$DB_NAME = 'temp_database';
/* Database Host */
$DB_HOST = 'localhost';
/* Your Database User Name and Password */
$DB_USER = 'root';
$DB_PASS = '';
/* Establish the database connection */
$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
if (mysqli_connect_errno()) {
printf("Connect failed: %s
", mysqli_connect_error());
exit();
}
$dateFrom=isset($_GET['datepickerFrom']) ? $_GET['datepickerFrom'] : '';
$dateTo=isset($_GET['datepickerTo']) ? $_GET['datepickerTo'] : '';
if($dateFrom && $dateTo !=NULL)
{
$dateFrom = new DateTime($dateFrom);
$dateTo = new DateTime($dateTo);
$dateFrom = mysqli_real_escape_string($mysqli, $dateFrom->format('Y-m-d'));
$dateTo = mysqli_real_escape_string($mysqli, $dateTo->format('Y-m-d'));
}
if($dateFrom && $dateTo !=NULL)
{
$result = $mysqli->query("SELECT datetime,temperature FROM tempLog where datetime between '$dateFrom%' and '$dateTo%' order by datetime ASC"); //"2018-03-15" AND "2018-03-26"
//print_r($result);
}
else
{
$result = $mysqli->query("SELECT datetime,temperature FROM tempLog order by DateTime");
}
echo "$dateFrom<br/>";
echo "$dateTo<br/>";
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Date-Time', 'type' => 'string'),
array('label' => 'Temperature', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['datetime']);
// Values of the each slice
$temp[] = array('v' => (float) $r['temperature']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
//header("Refresh: 50"); //Put the seconds after which the page needs to be refreshed
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
/*$(window).on("throttledresize", function (event) {
drawChart();
});*/
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'Temperature Record updated every 5 seconds',
//is3D: 'true',
curveType: 'function',
width: "100%",
height: 500,
//legend: 'top',
axisTitlesPosition: 'out',
'isStacked': true,
colors: ['#0598d8', '#f97263'],
chartArea: {
left: "15%",
top: "5%",
bottom:"40%",
height: "100%",
width: "100%"
},
vAxis:{
title:'Temperature'
},
hAxis: {
title:'Date',
minValue: 0,
maxValue: 50 },
//curveType: 'function',
pointSize: 3,
dataOpacity: 0.6,
animation: {
duration: 500,
startup: true, //This is the new option
easing:'out'
}
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
//var chart = new google.visualization.LineChart(document.getElementById('visualization'));
//chart.draw(data, options);
var i=data.getNumberOfRows();
//alert(i);
function resize() {
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
window.onload = resize();
window.onresize = resize;
}
</script>
<style type="text/css">
body {
width:100%;
height: 100%;
margin:5% auto auto auto;
//background:#e6e6e6;
}
</style>
</head>
<body>
<!--<center><h1>Temperature Graph</h1></center>-->
<div style="display:block;
zoom: 1;
text-align: center;">
<form id="dateselect" action="date.php" method="GET">
<div style="display: inline-block; margin:5px;">From: <input type="text" name ="datepickerFrom" id="datepickerFrom" style=""></div>
<div style="display: inline-block; margin: 5px;">To: <input type="text" name="datepickerTo" id="datepickerTo"></div><br>
<div style="display: inline-block;"><input type="submit" value="Submit" /></div>
<div style="display: inline-block;"><button type="button" onClick="window.location.reload();">Refresh</button></div>
</form>
</div>
<div class = "container" id="chart_div"></div> <!--Load bootstrap container for responsiveness-->
<script>
$( function() {
$( "#datepickerFrom,#datepickerTo" ).datepicker( {
//showButtonPanel: true,
changeMonth:true,
changeYear:true
});
} );
</script>
</body>
</html>
Problem:
I am able to fetch the data and populate my chart. But what i need is the line chart should be populated incrementally so as to give it a loading type effect.
Using "animate" on startup in options just pulls a "Line" from below the page every time the page is loaded. I don't want that. I want it to animate it such that it progressively fills my chart.
I saw several posts on stackoverflow where people needed loading like effect and they eventually got it working by just putting NULL values in the chart initially and then loading the data. But in my case those values are not hardcoded and i am fetching them as JSON from my DB. I am not able to figure out how to load null data initially on every page refresh/load and then load the original DB fetched values.
if anyone could solve this it'd be of great help. Thanks :)
EDIT:
I want it something like this http://jsfiddle.net/HDu8H/ from this post or this But those can be easily done for hardcoded data values.. i need them to be drawn using dynamic values fetched from my database.
