Gráficos de Google: líneas de tendencia polinomiales

A continuación se muestra un ejemplo de un gráfico de líneas de tendencia polinomiales. 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 trendlines configuración para mostrar el diagrama de líneas de tendencia.

var options = {
   trendlines: { 0: {
      type: 'polynomial',
      degree: 3,
      visibleInLegend: true,}
   }	  // Draw a trendline for data series 0.
};

Ejemplo

googlecharts_trendlines_polynomial.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" src = "https://www.google.com/jsapi">
      </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 = 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,
               'legend': 'none',
               trendlines: { 0: 
                  {
                     type: 'polynomial',
                     degree: 3,
                     visibleInLegend: true,
                  }
               }	// Draw a trendline for data series 0.
            };

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

Resultado

Verifica el resultado.

↰ Previous page