Multiple Series from JSON - Invalid JSON?

[Jake Lear]

Hello,
I'm attempting to use Flot to graph multiple data series coming from a
single JSON source.

However, in all the examples that I have found for loading data via
JSON for Flot, it seems that Flot insists on using invalid JSON.

As I am using Jquery 1.4 and for a production environment, invalid
JSON is not an option.

I have seen examples such as:
http://pgg999.co.uk/stats/st546.bitloading.html
http://people.iola.dk/olau/flot/examples/ajax.html

each of which retrieve the data series using ajax, but both data
sources are invalid json.

I have seen the google issue log here: http://code.google.com/p/flot/issues/detail?id=357
which demonstrates how to convert for valid json, but only for a
single data series.

My data is currently laid out as follows
{
"label":"MeasurementA",
"data":[
[1274337009000,71.0],
[1274337069000,69.0],
[1274337078000,70.0],
[1274337138000,72.0],
[1274337198000,70.0],
[1274337258000,70.0],
[1274337318000,71.0]
],
"label":"MeasurementB",
"data":[
[1274337009000,71.0],
[1274337069000,71.0],
[1274337078000,71.0],
[1274337138000,71.0],
[1274337198000,72.0],
[1274337258000,71.0],
[1274337318000,71.0],
[1274337329000,71.0],
[1274337389000,71.0],
[1274337449000,71.0],
[1274337509000,71.0],
[1274337569000,71.0],
[1274337569000,71.0],
[1274337579000,71.0]
]
}

Which is valid JSON but fails to work with Flot. I'm providing it here
as a basis for guidance on how to alter the data output in order to
remain valid and get it working with Flot. I believe that the issue
here is that because the data is one big object, Flot can't
differentiate the series, but I may be wrong.

Any advice on how to provide Flot multple series with VALID JSON is
much appreciated.

[George Roberts]

I'm not sure what was invalid about the json that you claim is invalid. I'm
guessing it is because the word label wasn't in quotes? Is that it? Or
something else?

Also I don't know how to do this without doing an eval() or other
jsonParse() first so I think you will need to add one line of code that puts
the json data into a variable. Kind of like this:
var data=eval($jsonstuff).pass_this_to_flot; // please don't flame me for
using eval() - it's for clarifcation only

Anyway the data you show below looks to me like invalid json. You need to
put braces {} around objects. So you need to add a brace around each
series. Something like this because flot expects an array of series
objects. My changes have "new!" after them

{ // note that you need to pass an array to flot, not an object, so I added
something inside this object called pass_this_to_flot which you should use
as the flot argument
"pass_this_to_flot":
[ // new! - begin the array to pass to flot
{// new! - first object in array is first series
"label":"MeasurementA",
"data":[
[1274337258000,70.0],
[1274337318000,71.0]
]// removed comma!
},{// new! second series

"label":"MeasurementB",
"data":[
[1274337009000,71.0],

[1274337579000,71.0]
]
}]// new!
}

- George Roberts
http://gr5.org

--------------------------------------------------
From: "Jake Lear" <jake...@gmail.com>
Sent: Monday, September 20, 2010 4:56 PM
To: "Flot graphs" <flot-...@googlegroups.com>
Subject: Multiple Series from JSON - Invalid JSON?

[Phillip Howell]

On Mon, Sep 20, 2010 at 4:20 PM, George Roberts <gr-goog...@spamarrest.com> wrote:

I'm not sure what was invalid about the json that you claim is invalid.  I'm guessing it is because the word label wasn't in quotes?  Is that it?  Or something else?

Yes, it's that the object keys aren't quoted.

This is a good reference for the actual grammar of JSON:  http://www.json.org/

-pkh

[George Roberts]

The major javascripts don't care either way if the keys (most keys) are quoted or not.

 

In his email jake had this which I believe is also an illegal syntax:

['a':1,'b':1,'a':2,'b':2]

 

Basicaly he had the same keys used twice.  Of course his keys were not a and b but 'label' and 'data'.

 

- George Roberts
http://gr5.org

From: Phillip Howell

Sent: Monday, September 20, 2010 6:22 PM

To: flot-...@googlegroups.com

Subject: Re: Multiple Series from JSON - Invalid JSON?

On Mon, Sep 20, 2010 at 4:20 PM, George Roberts <gr-goog...@spamarrest.com> wrote:

I'm not sure what was invalid about the json that you claim is invalid.  I'm guessing it is because the word label wasn't in quotes?  Is that it?  Or something else?

[Jake Lear]

Hi guys,
Thanks for the quick responses.

Note: When I say "valid JSON" I mean that it checks out to json
standards.
I suppose it's in the interest of building a more standardized web
that jquery 1.4 requires valid json in order to use getJSON or even
regular get methods.

I'm using JSONLint.com to validate the JSON.
George, your edits didn't check out as valid as is, but adding
exterior braces {} around the entire thing allows it to check out. I'm
at home now so I'll have to check tomorrow that everything works
correctly.
Here's the sample I was able to validate:
{
"measurements": [
{

"label": "MeasurementA",
"data": [
[1274337258000,70.0 ],
[1274337318000,71.0 ]
]

},
{
"label": "MeasurementB",
"data": [
[1274337009000,71.0],

[1274337579000,71.0]
]
}
]
}

[Jake Lear]

Oops it would appear I forgot to add the final closing bracket. There
should be } at the very end.

[Phillip Howell]

Well, he had something that looked like:

{

    "label": "A",

    "data": [...],

    "label": "B",

    "data": [...]

}

which is *syntactically* valid JSON (but is likely to produce undefined behavior on parsing because the semantics of multiple identical KV pairs isn't well-defined).  As you pointed out in your previous post, it's absolutely not in the correct format for Flot.

The sample that you gave (['a':1,'b':1,'a':2,'b':2]) is not JSON, since a) it uses single quotes and b) it puts KV pairs in an array. (I suspect b) was just a typo, really.)

The Python JSON parser, at least, will throw an exception for unquoted and single-quoted keys. From Jake's posts, it seems like the JQuery 1.4 parser will also complain.

-pkh

[Jake Lear]

Well, thanks to the contributions here I've managed to get a working
solution. So without further ado, here is the format that I was able
to use for multiple data series from one source using valid JSON and
jquery 1.4+.

What I've used is an object called measurements that contains an array
of objects, each of which is a series. The strings are in double
quotes, as the JSON standards require, but this doesn't effect Flot's
ability to understand them at all. It accurately accepts the labels.
Here's the example data from the JSON source:

{
"measurements": [
{
"label": "MeasurementA",
"data": [

[1274337009000,71],
[1274337069000,69],
[1274337078000,70],
[1274337138000,72]
]

},
{
"label": "MeasurementB",
"data": [

[1274337009000,71],
[1274337069000,71],
[1274337078000,71],
[1274337138000,71]
]
}
]
}

And here's the code I used to call the data and produce the Flot
chart:

function rerenderGraph(reportid) {
var output = [];
$.getJSON("../getMeasurements", {
res: reportid,
fromdate: $("#startdatefield").val(),
todate: $("#enddatefield").val(),
measurementtype: $("#reportselect").val()
},
function(data){
output=[data.measurements[0], data.measurements[1]];
$.plot($("#chart-container"), output, { xaxis: { mode:
"time" } });
}

So I have a function that renders the graph. $.getJSON has a nice
concise way of handling URL parameters so those first 4 lines with
res,fromdate,todate,measurementtype are just building the URL from
some form elements earlier on the page. Then a comma, and then the
success function. The success function occurs when the data is
successfully retrieved and it is passed data which is the retrieved
JSON. Then I manually build output out of data.measurements[0] and [1]
but for larger numbers of series you could certainly incrememnt this.
and then finally the plot.

There may be some better ways to do this, but I couldn't find any
great up-to-date documentation on how to have multiple series with
valid JSON (which jQuery 1.4 now requires).

[George Roberts]

Sweet. You can change this from

> output=[data.measurements[0], data.measurements[1]];

to:
> output=data.measurements;

Basically what you did was unpack and repack the array back together. It is
fine unless you don't know how many elements are in the array.

You can simplify the code further by getting rid of 'output' altogether:

> $.plot($("#chart-container"), data.measurements, { xaxis: { mode:

Also a side note - flot has no knowledge of double quotes versus single
quotes versus no quotes for the labels as by the time flot sees these
objects they are already, well, objects. jquery probably cares because I
suspect it doesn't use eval(). If it *does* use eval then it would be based
on the browser. For a browser to get picky about that syntax would break so
much existing javascript code that it would be a disaster so I'm not too
worried about it.

[Jake Lear]

I left out any explanation there, but the reason I used the output
array was because I'm using a switch to determine whether I want to
graph measurement A and measurement B or just measurement A based on
the report type. The way I'm getting my data, if there are no
measurement values I get [1274337138000, 0.0] so it throws off Flot's
automatic scaling because it graphs a 0 line, so I set it up that way
so that I can trim measurements off if need be, but you make a good
point for others who may not have that need.

On Sep 21, 2:15 pm, "George Roberts" <gr-googlegrp...@spamarrest.com>
wrote:

[Mike]

This post solved my problem.

The Flot Ajax Demo works as is with JQuery 1.3.2 but does not work
with JQuery 1.4+. It would have been helpful if firebug would have
given an error.