Gráfico de histograma de varias series

A continuación se muestra un ejemplo de un gráfico de histograma con varias series. 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.

Ejemplo

googlecharts_histogram_multiple.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']});     
      </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 = google.visualization.arrayToDataTable([
               ['Student Roll No', 'Height', 'Weight'],
               ['1', 80, 40],['2', 55, 30],['3', 68, 34],['4', 80, 40],['5', 54, 27],
               ['6', 70, 35],['7', 85, 42],['8', 78, 40],['9', 70, 35],['10', 58, 28],
               ['11', 90, 45],['12', 65, 33],['13', 88, 50],['14', 82, 41],['15', 65, 30],
               ['16', 86, 43],['17', 45, 30],['18', 62, 30],['19', 84, 42],['20', 75, 40],
               ['21', 82, 41],['22', 75, 40],['23', 58, 30],['24', 70, 35],['25', 85, 40]		  
            ]);
              
            // Set chart options
            var options = {
               title: 'Students Height and Weight',
               legend: { position: 'bottom' }      
            };					

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

Resultado

Verifique el resultado.

↰ Previous page