I was originally passing my unix based integer timestamp to json_encode for use with dygraphs, this actually works except for one problem, you then have to use the xaxis valueFormatter and axisLabelFormatter and the date/time on the axis will not align with the date/time shown in the value legend (top right corner of chart).
here is my original method that works except the legend is wrong, test.php:
<?php
$table[] = [1482407341000,92,86];
$table[] = [1482407342000,92,86];
$table[] = [1482407343000,91,85];
$table[] = [1482407344000,92,85];
$table[] = [1482407345000,91,84];
$table[] = [1482407346000,90,83];
$table[] = [1482407347000,91,82];
$table[] = [1482407348000,92,82];
$jsontable = json_encode($table);
echo $jsontable;
?>
<html><head><script type="text/javascript" src="dygraph-combined-dev.js"></script></head>
<body><div id="graph" style="width:100%; height:96%;"></div>
<script type="text/javascript">
g = new Dygraph(document.getElementById("graph"),
<?=$jsontable?>,
{
legend: 'always',
labelsDivStyles: { 'textAlign': 'right' },
labels: ['Date', 'spO2', 'pr'],
axes: {
x: {
valueFormatter: Dygraph.dateString_,
axisLabelFormatter: Dygraph.dateAxisFormatter,
ticker: Dygraph.dateTicker
}
}
});
</script></body></html>
Now, here is my attempt at a solution, if you actually use a date object then the xaxis will align with the legend (http://jsfiddle.net/b0g9pd1h/), this should work, but dygraphs fails to load, so there must still be a problem with the format of my variable, no error message is displayed so i am unsure why dygraphs does not load.
with dygraphs your value is either going to be an integer/float or it is going to be a string/date, so with my JSON.parse function json_deserialize_helper I am treating all string as a date and attempting to return the date object, the code looks good to me, so I am unsure what I am doing wrong.
test2.php:
<?php
$table[] = ["1482407341000",92,86];
$table[] = ["1482407342000",92,86];
$table[] = ["1482407343000",91,85];
$table[] = ["1482407344000",92,85];
$table[] = ["1482407345000",91,84];
$table[] = ["1482407346000",90,83];
$table[] = ["1482407347000",91,82];
$table[] = ["1482407348000",92,82];
$jsontable = json_encode($table);
echo $jsontable;
?>
<html><head><script type="text/javascript" src="dygraph-combined-dev.js"></script>
<script type="text/javascript">
function json_deserialize_helper(key,value) {
if ( typeof value === 'string' ) {
return new Date(parseInt(value));
}
return value;
}
</script></head>
<body><div id="graph" style="width:100%; height:100%;"></div>
<script type="text/javascript">
var data = <?=$jsontable?>;
var json = JSON.parse(data,json_deserialize_helper);
g = new Dygraph(document.getElementById("graph"),
json,
{
legend: 'always',
labelsDivStyles: { 'textAlign': 'right' },
labels: ['Date', 'spO2', 'pr']
});
</script></body></html>
also, maybe this is not the most efficient way of doing this, although parsing the strings to a date object seems pretty efficient to me, if anyone has an alternative solution please let me know.
If this answer helps you solve a problem your working on, please upvote this post, i'm new to this site.
I got this working, you have to loop through and modify the elements one by one, the below solution works, and the values of both the X axis and and legend are displayed correctly, I can set labelsUTC to true or false, and they both display correctly. The key was using a Date object instead of a date string as I was previously doing.
<?php
$table[] = [1482407341000,92,86];
$table[] = [1482407342000,92,86];
$table[] = [1482407343000,91,85];
$table[] = [1482407344000,92,85];
$table[] = [1482407345000,91,84];
$table[] = [1482407346000,90,83];
$table[] = [1482407347000,91,82];
$table[] = [1482407348000,92,82];
$jsontable = json_encode($table);
//echo $jsontable;
?>
<html><head><script type="text/javascript" src="dygraph-combined-dev.js"></script>
</head><body><div id="graph" style="width:100%; height:100%;"></div>
<script type="text/javascript">
var data = <?=$jsontable?>;
//loop through json table and convert unix timestamp to date object:
for ( var i in data) {
data[i][0] = new Date(data[i][0]);
}
g = new Dygraph(document.getElementById("graph"),
data,
{
legend: 'always',
labelsDivStyles: { 'textAlign': 'right' },
labels: ['Date', 'spO2', 'pr']
});
</script></body></html>