Google Charts - Material Line Chart

A seguir está um exemplo de um gráfico de linha de material. Já vimos a configuração usada para desenhar este gráfico no capítulo Google Charts Configuration Syntax . Então, vamos ver o exemplo completo.

Configurações

Nós usamos Line classe para mostrar gráfico de material.

//classic chart
var chart = new google.visualization.LineChart(document.getElementById('container'));

//Material chart
var chart = new google.charts.Line(document.getElementById('container'));

Exemplo

googlecharts_line_material.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart','line']});  
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Month');
            data.addColumn('number', 'Tokyo');
            data.addColumn('number', 'New York');
            data.addColumn('number', 'Berlin');
            data.addColumn('number', 'London');
            data.addRows([
               ['Jan',  7.0, -0.2, -0.9, 3.9],
               ['Feb',  6.9, 0.8, 0.6, 4.2],
               ['Mar',  9.5,  5.7, 3.5, 5.7],
               ['Apr',  14.5, 11.3, 8.4, 8.5],
               ['May',  18.2, 17.0, 13.5, 11.9],
               ['Jun',  21.5, 22.0, 17.0, 15.2],
               
               ['Jul',  25.2, 24.8, 18.6, 17.0],
               ['Aug',  26.5, 24.1, 17.9, 16.6],
               ['Sep',  23.3, 20.1, 14.3, 14.2],
               ['Oct',  18.3, 14.1, 9.0, 10.3],
               ['Nov',  13.9,  8.6, 3.9, 6.6],
               ['Dec',  9.6,  2.5,  1.0, 4.8]
            ]);
            
            // Set chart options
            var options = {
               chart: {
                  title: 'Average Temperatures of Cities',
                  subtitle: 'Source: worldclimate.com'
               },   
               hAxis: {
                  title: 'Month',         
               },
               vAxis: {
                  title: 'Temperature',        
               }, 
               'width':550,
               'height':400      
            };

            // Instantiate and draw the chart.
            var chart = new google.charts.Line(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Resultado

Verifique o resultado.

↰ Previous page