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.