jquery flot chart ajax source / json data transformation

Question

I am using the jquery plugin named flot to create some graphs for me in my spring mvc web application.

The example I am following to load the flot graph from an ajax call using json data can be found here http://www.flotcharts.org/flot/examples/ajax/.

This example shows that the json data loaded in the chart is in this format...

    {
        "label": "Japan",
        "data": [[1999, -0.1], [2000, 2.9], [2001, 0.2], [2002, 0.3], [2003, 1.4], [2004, 2.7], [2005, 1.9], [2006, 2.0], [2007, 2.3], [2008, -0.7]]
    }

Moving onto my data now, I already have a json controller that provides the data I want in the chart but it's in a different format...

[
    {
        "businessDate": "2015-02-10",
        "thisYear": 20067,
        "lastYear": 19252
    },
    {
        "businessDate": "2015-02-11",
        "thisYear": 21733,
        "lastYear": 19365
    },
    {
        "businessDate": "2015-02-12",
        "thisYear": 28192,
        "lastYear": 21982
    }
]

My question is how do I get flot to read this type of json data strucutre? See below for what I am aiming for to appear in the graph.

Alternatively if that is not possible how can I transform my json returned into what appears below after getting the json back from the ajax call (using jquery)....

{
    "label": "ThisYear",
    "data": [[2015-02-10, 20067], [2015-02-11, 21733], [2015-02-12, 28192]]
}

{
    "label": "LastYear",
    "data": [[2014-02-10, 19252], [2014-02-11, 19365], [2014-02-12, 21982]]
}

thanks

Two options; one, you modify your controller to produce the JSON in the format flot needs or two, after you receive the json, you write javascript to put it in the format flot needs. In addition, this [2015-02-10, 20067] is not valid javascript. You need to decide if you'll handle those dates as real times or as string categories. — Mark
– Mark, Commented Feb 17, 2015 at 18:27
thanks. This helped me. I was a bit muddled up though. I've thought about it a lot more thannks to you telling me it was invalid javascript — Richie
– Richie, Commented Feb 19, 2015 at 5:52

elier · Accepted Answer · 2017-05-03 02:14:01Z

2

If you return the following json from your backend, the date format will cause you some headache. You have to send the date in timestamp which is straightforward for jquery flot. Notice that UNIX TIMESTAMP is in seconds and must be multiplied by 1000 to match JavaScript timestamp that are in milliseconds:

{
    "label": "LastYear",
    "data": [[2014-02-10, 19252], [2014-02-11, 19365], [2014-02-12, 21982]]
}

Return this instead and jquery flot will render smooth:

{
    "label": "LastYear",
    "data": [[1392008400000, 19252], [1392094800000, 19365], [1392181200000, 21982]]
}

answered May 3, 2017 at 2:14

elier

4594 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

jquery flot chart ajax source / json data transformation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related