Plot the json array using jquery flot

Question

var data =[ { label: "Foo", data: [ ["2012-09-01", 1], ["2012-10-01", -14], ["2012-11-01", 5] ] },
                { label: "Bar", data: [ ["2012-09-01", 13], ["2012-10-01", 11], ["2012-11-01", -7] ] }
    ];
    var options = {
        series: {
            lines: { show: true },
            points: { show: true }
        }
    };


<div id="placeholder"></div>
<script>
$.plot($('#placeholder'), data, options);
</script>

I am confused why the graph is not getting plotted with the data. Ignore my novice knowledge on flot. Can anyone give me an idea how i should be able to do it.

Nikos Paraskevopoulos · Accepted Answer · 2013-09-20 19:58:23Z

2

Are you sure flot can handle values formatted as strings? You should probably convert the strings to real dates or milliseconds...

You can use the moment.js library:

var data =[ { label: "Foo", data: [ [moment("2012-09-01","YYYY-MM-DD").toDate(), 1], ...

answered Sep 20, 2013 at 19:58

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user525146 Over a year ago

Instead of moment.js, I am converting it the date to time in milliseconds and used xaxis: {mode: "time", timeformat: "%b-%Y"}. It worked perfectly fine

DNS · Accepted Answer · 2013-09-21 17:52:25Z

1

Flot does not automatically parse dates. If you want those to be used as-is then you should include the categories plugin. If you actually want to treat them as dates then you should convert them to dates as Nikos suggested and then take a look at the time plugin.

answered Sep 21, 2013 at 17:52

DNS

38.4k20 gold badges97 silver badges134 bronze badges

Collectives™ on Stack Overflow

Plot the json array using jquery flot

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related