Ya que hace tiempo que no escribo nada, voy a mostra una extensión de jQuery que hace maravillas  con gráficas para representar los datos indicados. La biblioteca es bastante útil para los que necesiten mostrar estadísticas en una web.

Aunque hace tiempo que existe, Highchars me ha sorprendido por la gran versatilidad que tiene. Gráficas de barras, de rectas, acumulados etc y varias posibilidades de diseño para cada tipo.

Usarla es igual de fácil que cualquier extensión de jQuery con la única diferencia que hay que indicar los datos a representar:

var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart-container-1',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

En la variable series es donde se encuentran los datos indicados, ahí cada campo data es un vector con toda la información a representar. Pero de todas formas ellos explican bien como se debe de usar la biblioteca. Si tienes ya experiencia con jQuery no te resultará dificil para nada. La biblioteca completa la podeis descargar aquí de la página oficial.

Algunos gráficos vinenen preparados para introducir movimiento en la representación, los llaman dinamic chars. Vienen al pelo para trabajar con ajax y descargar datos de la web periodicamente sin necesidad de recargar la página.

Así que parece que se lo han montado bastante bien los chicos de HighChars.