Update graph from json data

Question

I got a go program that outputs json data:

{ "cpu" : { 
      "Idle" : 9875425,
      "Iowait" : 28338,
      "Irq" : 5,
      "Nice" : 9707,
      "Softirq" : 4051,
      "System" : 153933,
      "Time" : 1329211407,
      "User" : 392229
},
"cpu0" : { 
      "Idle" : 2417441,
      "Iowait" : 3212,
      "Irq" : 5,
      "Nice" : 1419,
      "Softirq" : 3935,
      "System" : 62177,
      "Time" : 1329211407,
      "User" : 109227
    },
}

I'm looking for a good efficient way to present and update a graph using javascript (say for every 1s).

Answer 1

There is no shortage of javascript libraries to graph data. I've worked with Highcharts, which is free for personal projects. To make a graph using your data in highcharts, you could do something like this:

var data = [] //your data from above; you'll need to convert it to an array of y-values or one of the other available formats

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'line',
        },
        series: [{
            name: 'Series Title',
            data: data
        }]
    });
});

...However, as mentioned, there are lots of JS graphing libraries. To name a few:

• JQPlot
• D3
• Processing.js
• Sencha Charts

If you're looking for a more specific answer, I'm not sure folks can offer that much in response to a vague question.

Answer 2

I'm a big fan of dygraphs. Very powerful. Very flexible.

Answer 3

I like to work with the d3js library for this kind of work.

http://mbostock.github.com/d3/

It has very nice functions to update graphs with new data.

Maybe you can base your work on the "bullet charts" example.