I am fairly new to Flotr2 and I have just been building some simple line graphs. That is simple enough and very cool. However, I need to put a timestamp (month day year plus time of day) as my x axis. I am getting the time from my database so its in php code and I am just echoing out the data like so:
while($stmt11->fetch()){
echo " [" . $date_of_completion . ", " . $score . "]";
echo ",";
$i++;
$total_score += $score;
}
echo "];";
And I have made the mode of the xaxis be "time" and I've tried "date", and it just never works. It keeps putting everything between 2001-2002 which is completely wrong, so I assume it just doesn't know what to do with the data I've given it. Has anyone else encountered this problem? I've looked through the example they give on time, but it makes no sense to me.
Any help at all would be really appreciated. Thanks
EDIT Ok here is some more code. This is exactly what I'm doing to get the data out of the php and convert it to the format that flotr2 wants.
if(!($stmt11 = $mysqliprivate->prepare("SELECT date_of_completion, score FROM ". $shs . " WHERE id = ? ORDER BY date_of_completion ASC"))){
echo "Prepare Failed: (" . $mysqliprivate->errno . ") " . $mysqliprivate->error;
}
else{
$total_score = 0;
$stmt11->bind_param("s", $id);
$stmt11->execute();
$stmt11->bind_result($date_of_completion, $score);
$time = time();
echo "var dataset = [";
$i = 0;
while($stmt11->fetch()){
$date = date("U", strtotime($date_of_completion));
echo " [" . $date . ", " . $score . "]";
echo ",";
$i++;
}
echo "];";
$stmt11->close();
}
And here is the javascript that I am running:
graph = Flotr.draw(container, [
{ data : dataset, label : 'Historical Patient Scores', lines:{show:true}, points: {show:true}}
], {
xaxis: {
minorTickFreq: 4,
title : 'Date of Completion',
tickDecimals: 0,
noTicks: 10,
mode : 'time',
timeformat : '%y/%m/%d'
},
yaxis : {
max : 30,
title : 'Score',
tickDecimals:0,
min: 0
},
grid: {
minorVerticalLines: true
},
legend : {
position : 'nw'
},
mouse: {
track: true,
relative:true,
trackDecimals:0,
sensibility: 5
}
});
})(document.getElementById("editor-render-0"));
Ok so after @Chase and I have been trying to get this to work for a while, I think I got it. I hacked together my own tickFormatter function. There really wasn't much documentation for it, but some simple javascript knowledge was enough for it. So to get the epoch time I just did this:
echo "var dataset = [";
$i = 0;
while($stmt11->fetch()){
$temp = strtotime($date_of_completion);
echo " [" . $temp . ", " . $score . "]";
echo ",";
}
echo "];";
$stmt11->close();
Then to get the time to show up properly instead of it just being crazy numbers this is what I hacked together:
xaxis: {
minorTickFreq: 4,
title : 'Date of Completion',
tickDecimals: 0,
noTicks: 20,
mode : 'time',
labelsAngle : 45,
tickFormatter: function(x){
var x = parseInt(x);
var myDate = new Date(x*1000);
var string = myDate.getFullYear();
string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
result = string;
return string;
}
},
and then if you want the mouse-over to produce the same results put this code inside the mouse thing:
mouse: {
track: true,
relative:true,
trackDecimals:0,
sensibility: 5,
trackFormatter: function(o){
var t = parseInt(o.x);
var myDate = new Date(t*1000);
var string = myDate.getFullYear();
string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
return string + ", " + o.y;
}
}
All of the rest of the javascript and php remain the same as in my original question at the top.
The time mode takes a time value, so convert your date to Epoch time in milliseconds. See http://php.net/manual/en/function.date.php for how to convert a date to Epoch time, and remember php uses seconds (not ms like JavaScript and Flotr2). You'll also need to set the timeformat on the x-axis to a given format, like: %m/%d/%y
After passing in the epoch time:
xaxis: {
mode: "time",
timeformat: "%m/%d/%y"
},
This will convert the time back to a date format label.
You can use the following:
%h: hours
%H: hours (left-padded with a zero)
%M: minutes (left-padded with a zero)
%S: seconds (left-padded with a zero)
%d: day of month (1-31), use %0d for zero-padding
%m: month (1-12), use %0m for zero-padding
%y: year (four digits)
%b: month name (customizable)
%p: am/pm, additionally switches %h/%H to 12 hour instead of 24
%P: AM/PM (uppercase version of %p)
Your problem here is very simple... in order to use the built in formatter, you have to pass in Date objects in Javascript. Like this...
var dataArray = [[new Date('08/16/2012 03:40:15.000'),21.8917228040536],
[new Date('08/16/2012 03:40:15.000'),21.8917228040536]]
Look at your final rendered Javascript for clues - the PHP code doesn't make this issue clear.