Turning array of JSON objects into an array for HighCharts/GoogleCharts

Question

I've done a lot of searching and I just can't seem to wrap my head around how to convert this:

[
   {"id":749,"time":20160416162403,"value":707},
   {"id":750,"time":20160416162407,"value":708},
   {"id":751,"time":20160416162411,"value":703},
   {"id":752,"time":20160416162415,"value":710}
]

Into something HighCharts or GoogleCharts can use such as a series:

name: []
time: [time1, time2, time3]

I've seen examples that were close that used JQuery but I can't seem to get it working. If anyone could provide a quick example/solution I can run with it from there.

Thanks for the edit GG, I'll try to format it correctly next time.

What server-side technology are you using, if any? Depending on it, you can format the output to the format expected at HighCharts. — Eric Wu
– Eric Wu, Commented Apr 16, 2016 at 23:46
I'm doing this on a beaglebone using temperature and light sensors. I've written the webserver in Node.JS and I'm using SQLite3 as my database. Everything has been written in JavaScript and no framework has been used. Please let me know if you need any code examples. id is simply a placeholder for the autoincrement feature of the database. I don't use id in any of my queries. — mRhouse
– mRhouse, Commented Apr 16, 2016 at 23:50
What I don't understand is, if you made the server output (the server being node.js and javascript, I know), why didn't you output it the way highcharts expected? Or is that output coming directly from one of the sensors? — Eric Wu
– Eric Wu, Commented Apr 16, 2016 at 23:52
That said, I believe you can treat the object using pure javascript (albeit a not-so-short code, if my proeficiency isn't betraying me). I'll see if I can cough up a code and post it as an answer :) — Eric Wu
– Eric Wu, Commented Apr 16, 2016 at 23:54

Jeffrey Coleman · Accepted Answer · 2016-04-17 00:02:19Z

3

I think you could just build a simple constructor for it:

var jsonObj = [
   {"id":749,"time":20160416162403,"value":707},
   {"id":750,"time":20160416162407,"value":708},
   {"id":751,"time":20160416162411,"value":703},
   {"id":752,"time":20160416162415,"value":710}
]
var highChartsObj = {
    time: [],
    value: []
}
$.each( jsonObj , function( key, val ) {
    highChartsObj.time.push(val.time)
    highChartsObj.value.push(val.value)
});

Here's a Fiddle for it

answered Apr 17, 2016 at 0:02

Jeffrey Coleman

1888 bronze badges

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

4 Comments

Eric Wu Over a year ago

And THAT's why I need to return to javascript. Took me 10 minutes what you did in 5. :<

Jeffrey Coleman Over a year ago

Can you +1 it for me. Glad it helped :)

mRhouse Over a year ago

Jeffrey thank you, I'm working it into my code right now to test it out. I'll be sure to +1 and best answer it here shortly.

mRhouse Over a year ago

Jeffrey I'm having a bit of trouble getting the code to work. It appears that I had a JSON.stringify(databasereturn) in my code and that's the reason it is formed that way. The raw return from the database is this: [ { time: 20160416174725 }, { time: 20160416174729 }, { time: 20160416174733 } ] Is this a problem for the above solution?

Eric Wu · Accepted Answer · 2016-04-17 00:12:33Z

2

Same as Jeffrey's approach, only using pure javascript (in a marginally less appropriate manner).

var sensorOutput = [
      {"id":749,"time":20160416162403,"value":707},
      {"id":750,"time":20160416162407,"value":708},
      {"id":751,"time":20160416162411,"value":703},
      {"id":752,"time":20160416162415,"value":710}
   ];

//Here I declare an output class; 
var outputClass = function()
{
    this.name='';
    this.time = [];
};

function convertOutput(inputArray)
{
    //Here I instantiate the class
    var output = new outputClass();

    //And here I populate its array with the input received from the sensors.
    for(var x=0; x< inputArray.length; x++)
    {
        var sensorOutputLine = inputArray[x];
        var currentTime = sensorOutputLine.time;
        output.time.push(currentTime); //Push the item into the time[] array
    }
}

//Function call 
convertOutput(sensorOutput);

This is the code I'd come up with at the first time. If you're considering using it, consider improving it :)

The JsBin is here: https://jsbin.com/mixasihibe/edit?html,js,output

EDIT: Improved the readability of the code... As bored as boredom means xD

answered Apr 17, 2016 at 0:12

Eric Wu

93513 silver badges36 bronze badges

2 Comments

mRhouse Over a year ago

Thanks Eric I'm going to try both approaches and see how it goes.

mRhouse Over a year ago

I was able to get your code to work without modifications. Thanks again.

Collectives™ on Stack Overflow

Turning array of JSON objects into an array for HighCharts/GoogleCharts

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related