Gráficos de Google: gráfico de dispersión de materiales

A continuación se muestra un ejemplo de un gráfico de dispersión de material. Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Google Charts . Entonces, veamos el ejemplo completo.

Configuraciones

Hemos usado Scatter clase para mostrar la tabla de materiales.

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

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

Ejemplo

googlecharts_scatter_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','scatter']});     
      </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('number', 'Age');
            data.addColumn('number', 'Weight');
            data.addRows([
               [ 8,      12],
               [ 4,      5.5],
               [ 11,     14],
               [ 4,      5],
               [ 3,      3.5],
               [ 6.5,    7]
            ]);
               
            // Set chart options
            var options = {
               'title':'Age vs Weight',
               'width':550,
               'height':400	  
            };

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

Resultado

Verifique el resultado.

↰ Previous page