Flot Chart - Graphic data as an object array with multiple attributes

Question

I would like to have an array object instead of the following json format;

[1409558400000, 7.45],[1409562000000, 5.71], [1409565600000, 7.50], 
 ... .;

My purpose is to show all data on the graph based on their hh:mm parameter (which is done in the link already), and I ended up such json array; [10, 7.45],[09, 5.71], [11, 7.50], ...

But I also would like to keep their timestamp in order to have more information about each data point so that I can provide the timestamp when user clicks on a point.

I simply need to have something like this [10, 7.45,1409562000000] ; hour value, age, and timestamp respectively.

How can I have such data array for flot chart ?

var d = [
    [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]
];

    $.each(d, function (index, datapoint) {
        datapoint[0] = (new Date(datapoint[0])).getHours();
    });

$.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: {

    },
    yaxis: {
        min: 0,
        max: 12
    }
});




$("#placeholder").bind("plotclick", function(event, pos, item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);
    

                if (item) {
                    //window.location="pagex.html"; 
                    alert("x: " + x);

                    //plot.highlight(item.series, item.datapoint);
                }
            });

<!-- basic time series flot chart -->
<h>Create a custom green range</h>
<div style="height: 400px; width: 600px;" id="placeholder"></div>

http://jsfiddle.net/shamaleyte/wzLaqzf5/1/

possible duplicate of [displaying custom tooltip when hovering over a point in flot](http://stackoverflow.com/questions/4349823/displaying-custom-tooltip-when-hovering-over-a-point-in-flot) — Raidri, Feb 19 '15 at 14:05
Yes indeed. I will again share the solution for my scenario . Thanks Raidri. — shamaleyte, Feb 19 '15 at 14:28

score 1 · Accepted Answer · edited May 23 '17 at 11:52

Basically I adapt the answer given in the following link for my scenario.

   Link for Referenced answer

Link : displaying custom tooltip when hovering over a point in flot

My Code:

var data = [
    [1409558400000, 7.45],
    [1409562000033, 5.71],
];
    $.each(data, function (index, datapoint) {
        datapoint[2] = datapoint[0]; // copy the timestamp and paste it as the 3rd object

        datapoint[0] = (new Date(datapoint[0])).getHours(); // to put hours on y axis
    });

$.plot("#placeholder", [d2], {
    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: {

    },
    yaxis: {
        min: 0,
        max: 12
    }
});




$("#placeholder").bind("plotclick", function(event, pos, item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

               var tooltip = item.series.data[item.dataIndex][2];

                if (item) {
                    //window.location="pagex.html"; 
                    alert("x: " + tooltip);

                    //plot.highlight(item.series, item.datapoint);
                }
            });

My Fiddle : http://jsfiddle.net/shamaleyte/wzLaqzf5/2/

Flot Chart - Graphic data as an object array with multiple attributes

1 Answers1