I would like to have a flotchart that depicts the distribution of all data (x axis represents the values from 0 to 10, y axis for hour only starting from 7am to 7pm).
I could not figure out how I should set the configuration of flotchart in this regard.
Here is the json sample of my Dataset :
[1409558400000, 7.45],[1409562000000, 5.71], [1409565600000, 7.50], [1409569200000, 7.63], [1409576400000, 3.14],
[1409644800000, 7.45],[1409648400000, 5.71], [1409652000000, 7.50], [1409655600000, 7.63], [1409662800000, 3.14],
[1409731200000, 7.45],[1409734800000, 5.71], [1409738400000, 7.50], [1409742000000, 7.63], [1409749200000, 3.14]]
;
And here is the code for flotchart; The problem with this is that it sorts all the series based on their timestamps. I do not want that.
I would like them to fit in based on their "hour" parameter only.
Anyone knows if only hour on the x-axis without sorting the data series is possible with flotchart ?
$("#a-dag").click(function() {
console.log("a dag filtering will be applied...");
$.plot("#placeholder", [d], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true,
markings: [{
yaxis: {
from: 0,
to: 4
},
color: "#F2CDEA"
}, {
yaxis: {
from: 4,
to: 7
},
color: "#D7EEE1"
}, {
yaxis: {
from: 7,
to: 12
},
color: "#F2CDEA"
}]
},
xaxis: {
mode: "time",
twelveHourClock: true,
},
yaxis: {
min: 0,
max: 12
}
});
});
Just convert your timestamps to hours, for example like this:
$.each(d, function (index, datapoint) {
datapoint[0] = (new Date(datapoint[0])).getHours();
});
(If you want values with AM / PM change accordingly.)
And of course remove the mode: "time" from your options.
See this fiddle for the changed code.