FlotChart - Showing the distribution on hourly basis regardless of timestamp

Question

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
                }
            });


  });

score 1 · Accepted Answer · answered Feb 18 '15 at 10:14

1

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.

answered Feb 18 '15 at 10:14

Raidri

17,258
9
62
65

Thanks a lot Raidri for providing a very simple and useful way of doing it. But is it also possible to keep each data's timestamp ? Because I would like to enable the user to see the date info when clicking on a data-point ? That's why having the timestamp inside the graphic object is also needed I guess. Is it possible to have something like this for the graphic object array , [1409558400000 , 7.45, 1409558400000]. By this way I can use your method to convert [0] into hours, and use [3] for showing more details ? – shamaleyte Feb 18 '15 at 17:51
I will mark this answer accepted and open a new issue for my next question. @Raidri thanks again. – shamaleyte Feb 19 '15 at 13:36
Yes, that is possible, see this [answer](http://stackoverflow.com/a/12671873/2610249) for an example. – Raidri Feb 19 '15 at 14:04
Could you also tell me how I can add AM / PM to the x-axis in the aforementioned solution of yours ? When I apply .getHours() for each, I end up with a digit. How can I manipulate the x-axis to have am/pm but also provide the same content in the graph? – shamaleyte Feb 19 '15 at 22:05
Use a formatting function for the x axis ticks (and your tooltip values) like in this updated [fiddle](http://jsfiddle.net/xayoymhg/2/). – Raidri Feb 20 '15 at 08:38
That's it. I appreciate your tremendous help Raidri. – shamaleyte Feb 20 '15 at 09:01
To show that appreciation, you could upvote my answer (see the [Help Center](http://stackoverflow.com/help/why-vote)) – Raidri Feb 20 '15 at 10:12

FlotChart - Showing the distribution on hourly basis regardless of timestamp

1 Answers1