Aktualizacja wykres z danych JSON

Question

Mam program iść tak wyprowadza dane 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 
    }, 
} 

szukam dobrego efektywny sposób przedstawienia i uaktualnia wykres przy użyciu javascript (powiedzmy za co 1s).

Answer 1

Nie ma niedoboru bibliotek javascript do danych wykresów. Pracowałem z Highcharts, która jest darmowa dla osobistych projektów. Aby wykonać wykres używając swoich danych w highcharts, można zrobić coś takiego:

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

... Jednak, jak wspomniano, istnieje wiele bibliotek graficznych JS. Pośród:

• JQPlot
• D3
• Processing.js
• Sencha Charts

Jeśli szukasz bardziej konkretnej odpowiedzi, nie jestem pewien, że ludzie mogą oferować wiele w odpowiedzi na niejasne pytanie.

Answer 2

Lubię pracować z biblioteką d3js dla tego rodzaju pracy.

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

Ma bardzo ładne funkcji, aby aktualizować wykresy z nowymi danymi.

Być może możesz oprzeć swoją pracę na przykładzie "list przebojów".

Answer 3

Google ma BUNCH z apis. Powinieneś sprawdzić niektóre z nich. Jednym z nich jest wykres api here. To pozwala ci też tworzyć kody QR. Google ma nawet kilka przykładów na placu zabaw js: http://code.google.com/apis/ajax/playground/?type=visualization#annotated_time_line

Answer 4

Jestem wielkim fanem dygraphs. Bardzo potężny. Bardzo elastyczny.