actualización del gráfico de datos JSON

Question

tengo un programa de movimiento que da salida a los datos JSON:

{ "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 
    }, 
} 

Busco una buena manera eficiente para presentar y actualizar un gráfico usando Javascript (decir por cada 1s).

Answer 1

No hay escasez de bibliotecas javascript para graficar datos. He trabajado con Highcharts, que es gratis para proyectos personales. Para hacer un gráfico usando sus datos en Highcharts, se podría hacer algo como esto:

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 
     }] 
    }); 
}); 

... Sin embargo, como se mencionó, hay un montón de librerías gráficas JS. Para nombrar algunos:

• JQPlot
• D3
• Processing.js
• Sencha Charts

Si usted está buscando una respuesta más concreta, no estoy seguro de que la gente puede ofrecer mucho en respuesta a una pregunta vaga.

Answer 2

Me gusta trabajar con la biblioteca d3js para este tipo de trabajo.

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

Tiene muy buenas funciones para actualizar gráficos con datos nuevos.

Tal vez pueda basar su trabajo en el ejemplo de "gráficos de viñetas".

Answer 3

Google tiene un BUNCH de apis. Deberías verificar algunos de ellos. Uno de ellos es el cuadro api here. Te permite hacer códigos QR también. Google incluso tiene algunos ejemplos en el js playground: http://code.google.com/apis/ajax/playground/?type=visualization#annotated_time_line

Answer 4

Soy un gran fan de dygraphs. Muy poderoso. Muy flexible.