How do I retrieve values from a JSON string?

Share RGraph:  

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Rick on 22nd August 2017
Hi, I would like to use your RGraph chats, in particular, your gauges on my web page to replace the current ones and to add new ones to display sensor data. This is just a personal weather station project I'm building bit by bit, the last sensor I added was a barometer.

Anyway, my question is how would I extract and use data I get from one of my channels on Thingspeak. An example of a typical JSON string I receive would be

So how would I go about using, for example, the value 1013.86 of field4 as the value for a customized gauge chart?

I not very good with javascript but if you could give me an example using the JSON string which you can get with this URL
that would be so helpful. From that, I'm sure I would be able to work out the rest.

Thank you in advance.

Posted by Richard on 22nd August 2017
Hi there,

The URL you provided that outputs a JSON object simply does just that - output an object. This makes impossible to get that object in your page and do anything with it (AFAIK). So the text that the script outputs would need to be assigning the object to a variable like this:

var __aVariableNameThatHopefullyWontClashWithOneThatIsAlreadyBeingUsed__ =

You might want to choose a more succinct variable name. Alternatively you could use JSONP, which is where you supply the variable name as a parameter to the URL like this:

So the output of the script becomes this:

var fred =

Again you might want to choose your own variable name.

Regardless of the chosen method, you can then use the variable in the process of making your Gauge like this:

data = eval('(' + '{"created_at":"2017-08-22T08:42:56Z","entry_id":13909,"field1":"24.06","field2":"52","field3":"0-3-40-49","field4":"1015.63","field5":"24.10"}' + ')');

And then create the Gauge:

var gauge = new RGraph.Gauge({
     id: 'cvs',
     min: 1000,
     max: 1200,
     value: data.field4,
     options: {

PS. I'm interested - are you switching from Highcharts to RGraph?

Posted by Rick on 22nd August 2017
I'm using JustGage from but they only have doughnuts type chats. I've used RGPraph in the pass by updating chats manually but now I was to chart live data. I'll try your suggestion.

Add a reply

« Back to message list