Develop Reference

How to order dates in Google Table Chart using PHP?

I'm creating a table using Google Table Charts and PHP.
The table code is:
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = google.visualization.arrayToDataTable([
<?php echo $dados; ?>
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
data.sort({column: 0, desc: true});
table.draw(data, {showRowNumber: false, width: '100%', height: '100%'});
}
The PHP code (that gets the data) is:
$dados = "['Data','InfoX','InfoY'],";
for($i = 0; $i < count($vet); $i++){
$original_Date = $vet[$i][0];
$New_Date = date("d/m/Y", strtotime($original_Date));
$dados .= "['".$New_Date."',".$vet[$i][2].",".$vet[$i][3].','."]";
if ($i+1 < count($vet)){
$dados .= ",";
}
Currently, the table looks like this:
As you can see, I have a problem with the way the first column is sorted (right now, it is ordering first by the day, then the month and the year).
I need to order the first column chronologically (year-month-day), but show it in a dd/mm/yyyy format (in HTML, it is like when you use data-search and data-order). Is there any option custom propriety or option that I need to use to solve my issue?
Thanks in advance for the answers and feel free to ask for more details if you need it.

the problem is the dates are coming across as strings.
with real dates, the sort function will work correctly.
try using the following php...
$New_Date = date("m/d/Y", strtotime($original_Date));
$dados .= "[new Date('".$New_Date."'),".$vet[$i][2].",".$vet[$i][3].','."]";
then in javascript, use a date formatter to format the date column...
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = google.visualization.arrayToDataTable([
<?php echo $dados; ?>
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
data.sort({column: 0, desc: true});
var formatDate = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy'});
formatDate.format(data, 0);
table.draw(data, {showRowNumber: false, width: '100%', height: '100%'});
}

How to use The Date and Time in Google Charts

I am trying to use a MySQL TimeStamp for the X Axis on a Scatter graph using Google Charts. Currently, the only way I have managed to get the graph displaying it using the strtotime() Function. This confuses the graph or me as strtotime() Function shows a number of seconds from 1st Jan 1970.
new Date(2017-03-07 02:03:12)] YYYY-MM-DD HH:ii:SS this is the format of the date coming from my timestamp if I leave it like this then I get the error. only if I change the time to the strtotime() this works. But the Graph does not show the time properly. Is there another way to display the timestamp. As the Documentation on google does not make much sense.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Distance');
data.addColumn('datetime', 'time');
data.addRows([
<?php
$query = "SELECT * FROM iot_sensors WHERE Sensor_ID ='Ultra_Dist'";
$execute = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($execute)){
$date = strtotime($row['Time_Stamp']);
echo "[".$row['Sensor_1'].", new Date(".$date.")],";
$Trimmed = trim($row['Time_Stamp']);
//echo $Trimmed;
}
?>
]);
var options = {
width: 800,
height: 500,
chart: {
title: 'Frequency of movement by time',
subtitle: 'Frequency of movement'
},
hAxis: {title: 'Distance'},
vAxis: {title: 'time'}
};
This is my code which retrieves the Time_Stamp and other value from my table and puts it in an array for the chart to use.

<?php
$query = "SELECT * FROM iot_sensors WHERE Sensor_ID ='Ultra_Dist'";
$execute = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($execute)){
$date = ($row['Time_Stamp']);
$date2 = new DateTime($date);
$date3 = date_format($date2, 'Y,m,d,H,i,s');
echo "[new Date(".$date3."),".$row['Sensor_1']."],";
}
?>
Put the date in a new Date() object then reformat it to the accepted format and then echo the date in the array.

Updating Pickadate Input via AJAX

I use Pickadate.js and JQuery Form Plugin. I have date and time pickers seperately. What I want to do is to disable times in timepicker according to value of datepicker. So, I am trying to get the JSON data into picker.set("disable", [ ]);. I can console.log the plain text but it remains aimless.
I tried a lot and have come across these solutions in that question. But I couldn't launch them. (I adapted pickadate functions and classes to pickatime's.)
// Javascript
$(document).ready(function() {
$("input").click(function() {
$(".datepicker").pickadate({
format: 'yyyy-mm-dd',
formatSubmit: 'yyyy-mm-dd',
min: true,
max: false
});
var $input = $(".timepicker").pickatime({
format: 'HH:i',
formatSubmit: 'HH:i',
formatLabel: 'HH:i'
});
$('.datepicker').change(function() {
$('#form').ajaxSubmit({
target: '#check_result',
url: 'check.php',
success: function showResponse(responseText, $form) {
var picker = $input.pickatime('picker');
picker.set("disable", [
console.log(responseText)
]);
}
});
return false;
});
});
});
// PHP (check.php)
<?php
// Database connection done.
$date = mysqli_real_escape_string($con, $_POST['date']);
$match_query = mysqli_query($con, "SELECT * FROM booking WHERE DATE(time) = '$date'");
$disabled_times = array();
if ($result = $match_query) {
while ($row = mysqli_fetch_assoc($result)) {
$disabled_times[] = $row['time'];
}
mysqli_free_result($result);
}
echo implode($disabled_times);
?>

Can you post an example of the json being returned from your php?
According to the docs (http://amsul.ca/pickadate.js/api/#method-get-disable)
your json should be something like this: [2,30], [4,30], [9,0]
If your json is correct, be sure it is not being passed to the timepicker as a string. Try something like:
var json = JSON.parse(responseText);
picker.set("disable", [ json ]);
UPDATE:
I guess with the following code, your json will return properly:
...
$time = explode(',', $row['time']);
$time[0] = (int)$time[0];
$time[1] = (int)$time[1];
$disabled_times[] = $time;
...
echo json_encode($disabled_times);

How to change x-axis date format dynamically in c3js chart?

I have a line chart with dynamic data make by c3js chart library.
In that chart, I already show data depend on date with timeseries. Here is the sample of chart.
Now I add three button to show data in chart by day,month and year. When I click day button, I want to show data only day by day. And the year and month button are also too.
The main point is, I want to change x-axis date format dynamically when I click day, month and year button.
So I query data from database for each day, month and year. But the problem is, when I show data in chart, I need to change date format dynamically in x-axis. So, I try like this,
<?php
if(isset($_POST['btn_day'])) {
$sql = "......."
$query = ........;
//query data day by day just like DATE_FORMAT(date, '%d') as date
.
$format = '%d';
}elseif(isset($_POST['btn_month'])) {
$sql = "......."
$query = ........;
//query data for each month just like DATE_FORMAT(date, '%M') as date
.
$format = '%m';
}elseif(isset($_POST['btn_year'])) {
$sql = "......."
$query = ........;
//query data for each year just like DATE_FORMAT(date, '%Y') as date
.
$format = '%Y';
}else {
$sql = "......."
$query = ........;
.
.
$format = '%Y-%m-%d';
}
?>
<script>
var f = <?php echo "'".$format."'"?>; //'%Y-%m-%d'
console.log(f);
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'date',
json:<?php echo json_encode($data);?>,
mimeType: 'json',
keys: {
x: 'date',
value: <?php echo json_encode($names)?>
},
type: 'line',
},
axis: {
x: {
type: 'timeseries',
tick:{
format: function(f){
if(f == "%d"){
return d3.getDay();
}else if(f == "%m"){
return d3.getMonth();
}else if(f == "%Y"){
return d3.getFullYear();
}else{
return '%Y-%m-%d';
}
},
rotate: 75,
}
}
},
});
</script>
But I don't get correct result in chart. I know I was wrong in this part,
tick:{
format: function(f){
if(f == "%d"){
return d3.getDay();
}else if(f == "%m"){
return d3.getMonth();
}else if(f == "%Y"){
return d3.getFullYear();
}else{
return '%Y-%m-%d';
}
},
rotate: 75,
}
But I don't know how can I change x-axis date format dynamically. I already try a lot of way but I can't get correct result.
I very appreciate for any suggestion.

d3 doesn't have getDay() / getMonth() / getFullYear() functions, what you need (if f exists) is
d3.time.format(f)
See https://github.com/mbostock/d3/wiki/Time-Formatting
(Moreover, you're not really changing the formatting dynamically as far as the chart is concerned, you're generating a new c3 chart each time, though that's probably just semantics.)

Highcharts does not display when a line of PHP header('location...') is added

I am using Highcharts to display a chart containing dates/time and temperature of a room.
The javascript used to generate the chart is in the temperature.php file which user will be able to view, and the javascript will get data from a dataSorter.php file which contains SQL query to retrieve the results from MySQL for the chart to display.
Javascript to generate the chart in temperature.php:
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 50
},
title: {
text: 'Temperature vs. Time',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Degrees Celcius'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("dataSorter.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
</script>
At this point, I have generated 4 drop down lists in temperature.php containing From Date, To Date, From Time and To Time. This will allow users to select a range which they wish to see the chart generate. (E.g 2014-01-20 00:00:00 to 2014-01-21 22:00:00). A button onclick will activate the function:
if(isset($_POST['sort'])){
$from=$_POST['SDate'];
$to=$_POST['EDate'];
$sTime=$_POST['STime'];
$eTime=$_POST['ETime'];
$start=$from." ".$sTime;
$end=$to." ".$eTime;
header('Location: dataSorter.php?start='.$start.'&end='.$end.'');
}
?>
$from = start date
$to = end date
$sTime = start time
$eTime = end time
$start = combine $from and $sTime to get a start date/time
$end = combine $to and $eTime to get a end date/time
dataSorter.php has the following codes:
<?php
$con = mysql_connect("localhost","root","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("scsense", $con);
if(isset($_GET['start'])){
$start = $_GET['start'];
$end = $_GET['end'];
$sth = mysql_query("SELECT * FROM scsenseinfo WHERE roomID='501' AND (dateTime BETWEEN '$start' AND '$end') ORDER BY recordID");
$rows = array();
$rows['name'] = 'DateTime';
while($rr = mysql_fetch_assoc($sth)) {
$rows['data'][] = $rr['dateTime'];
}
$sth = mysql_query("SELECT * FROM scsenseinfo WHERE roomID='501' AND (dateTime BETWEEN '$start' AND '$end') ORDER BY recordID");
$rows1 = array();
$rows1['name'] = 'RoomTemperature';
while($r = mysql_fetch_array($sth)) {
$rows1['data'][] = $r['roomTemp'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
$help = print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
}
else{
$sth = mysql_query("SELECT * FROM (SELECT * FROM scsenseinfo WHERE roomID='501' ORDER BY recordID DESC LIMIT 5) AS tbl ORDER BY tbl.recordID ASC");
$rows = array();
$rows['name'] = 'DateTime';
while($rr = mysql_fetch_assoc($sth)) {
$rows['data'][] = $rr['dateTime'];
}
$sth = mysql_query("SELECT * FROM (SELECT * FROM scsenseinfo WHERE roomID='501' ORDER BY recordID DESC LIMIT 5) AS tbl ORDER BY tbl.recordID ASC");
$rows1 = array();
$rows1['name'] = 'RoomTemperature';
while($r = mysql_fetch_array($sth)) {
$rows1['data'][] = $r['roomTemp'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
$help = print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
}
//header('Location: L501TempSorter.php');
?>
If I have header('Location: L501TempSorter.php'); un-commented, the chart does not display a thing, even when onload of the page, without clicking the button to sort the dates. If it is commented, the chart is displayed onload, but clicking the button to sort the dates lead to dataSorter.php and stays on the page, which just displays the arrays containing the sorted dates. I really need help with this, thank you in advance!

You cannot use header when you have already printed something, like you sdo with //header('Location: L501TempSorter.php');.
If you are trying to save the output from print to the variable $help than you need to use sprint instead. Print will always output to the output buffer and always returns 1. This is true for any print function not starting with a s or vs the s before the print in the function name always indicates that it will return the resulting string instead of outputting it.
To solve your problem with the data not being displayed please post the onlcick code of the button. It should be an ajax call like
<script>
$.getJSON('dataSorter.php', {
sort: 'sortValue',
STime: /* get start value */,
ETime: /* get end value */,
SDate: /* get start value */,
EDate: /* get end value */
}, function(data) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
/* or anything that updates your chart */
});
</script>
In the php script run when the onClick function is executed. You should probably url encode your Location: in part
<?php
header('Location: dataSorter.php?start='.urlencode($start).'&end='.urlencode($end));
Though I don't understand why you are using header('Location: ...'); here anyways? You are already on the Server why tell the client browser to load a different location just include your script that is supposed to run now.

What is your purpose of using location, in case when you use this script only for return json? When you load json in javascirpt, you run your entire php script, so instead od returning json you are redirect to other location, as a result json is not loaded in javascript.