Hello world com Google Chart

O Google Charts é uma forma fácil de se criar gráficos na web, sem a necessidade de utilizar FLASH, as vantagens são inúmeras entre elas podemos destacar: criação de gráficos dinâmicos, compatibilidade com diversas plataformas, gráficos customizados e o mais importante sua utilização é totalmente FREE. A galeria de gráficos é enorme, e podemos realizar combinações de charts.

Segue código Javascript para realizar um gráfico de pizza:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Função q carrega os dados e desenha o grafico em pizza 
      
      function drawChart() {

      // Criar tipo data table
      var data = new google.visualization.DataTable();
     //no caso do grafico  pizza possui duas colunas, com duas colunas
      data.addColumn('string', 'Bebida');
      data.addColumn('number', 'Quantidade');
     //linha da tabela
     data.addRows([
        ['Vodcka', 3],
        ['Cerveja', 2],
        ['Disco Voador', 1], 
        ['Tequila', 6],
        ['Jurupinga', 3]
      ]);

      // Options do chart, podemos alterar varios campos, segue a documentação de options para pizza, http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html 
      var options = {'title':'Quantas bebidas o toshi bebeu', //titulo
                     'titleTextStyle': {fontSize: 16},//estilo do texto, é possivel alterar fonte e cor tb
                     'legend':{position: 'left', textStyle: {color: 'black', fontSize: 12}},//legenda 
                     'slices': {3: {color: 'black'}}, //personalizar a cor do slice
		      'width':500, //size
                     'height':200};

      // desenho do grafico
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
<!--Div q deve ficar o chart-->
    <div id="chart_div" style="width:500; height:200"></div>
  </body>
</html>

O Chart fica dessa forma, (para verificar como realmente o gráfico fica em HTML clique no link abaixo):

Gráfico Interativo

É possível que o dado seja lido de forma dinâmica, fazendo chamadas no servidor, pode ser usado em formato JSON conforme o exemplo:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
      
    function drawChart() {

      var jsonData = $.ajax({
          url: "tabela.json",
          dataType:"json",
          async: false
          }).responseText;
         
      //Dado é lido do servidor!
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Segue tabela em JSON:

{
  "cols": [
        {"label":"Bebidas","type":"string"},
        {"label":"Quantidade","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Vodcka"},{"v":3}]},
        {"c":[{"v":"Cerveja","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Disco Voador","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Canelinha","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pinga","f":null},{"v":2,"f":null}]}
      ]
}

Link do gráfico gerado.

Todo o código foi retirado da documentação da própria Google, para maior aprendizagem sugiro dar uma lida. Acredito que boa parte do site Google Analicts foi feito utilizando essa ferramenta. Quem quiser se especializar, tem um milhão de formas de deixar os gráficos mais personalizado.