Google Chart API (JS)

<< Click to Display Table of Contents >>

Navigation:  Html >

Google Chart API (JS)

Previous pageReturn to chapter overviewNext page

Página

 

graficogoogle

Fonte

 

<html>

  <head>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Mes');

        data.addColumn('number', 'Daniel');

        data.addColumn('number', 'Fábio');

        data.addColumn('number', 'Hallan');

        data.addColumn('number', 'Josué');

        data.addColumn('number', 'Junior');

        data.addColumn('number', 'Murilo');

        data.addColumn('number', 'Alex');

        data.addColumn('number', 'Oliveira');

      

        data.addRows([

          ['set-11', 1170, 460, 400, 1, 200, 150, 204, 600],

          ['out-11', 660, 1120, 200, 2, 300, 500, 210, 30],

          ['nov-11', 1, 200, 150, 204, 600, 140, 20, 0],

          ['dez-11', 1030, 540, 450, 3, 600, 140, 20, 0],

          ['jan-12', 130, 600, 140, 20, 0, 540, 450, 3],

          ['fev-12', 10, 540, 140, 20, 0, 450, 3, 600]

        ]);

 

        var options = {

          width: 1100, height: 400,

          chartArea: {left: 10, top: 40, width: 840, height: 400 },

          title: 'Gráfico de Tarefas',

          fontName:'Arial', fontSize:15,

          tooltip: {textStyle:{color: 'black', fontName: 'Arial', fontSize: '15'}},

          titleTextStyle: {color: 'gray', fontName: 'Arial', fontSize: 20}, 

          series: [{color: 'blue'},{color: 'red'}, {color:'maroon'}, {color: 'black'}, {color: 'green'}, {color: 'gray'}, {color: 'purple'}, {color: 'chocolate'}],

          hAxis: {title: 'mês-ano', titleTextStyle: {color: 'purple', fontName: 'Arial', fontSize: 15}}

        };

 

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

  <p>Paragrafo</p>

    <div id="chart_div"></div>

  </body>

</html>