Linee di tendenza

  1. Panoramica
  2. Linee di tendenza lineari
  3. Linee di tendenza esponenziali
  4. Linee di tendenza polinomiali
  5. Modificare il colore
  6. Modificare l'opacità e lo spessore delle linee
  7. Rendere visibili i punti
  8. Modificare l'etichetta
  9. Correlazioni

Panoramica

Una linea di tendenza è una linea sovrapposta a un grafico che mostra la direzione complessiva dei dati. I grafici Google possono generare automaticamente linee di tendenza per grafici a dispersione, grafici a barre, grafici a colonne e grafici a linee.

I grafici di Google supportano tre tipi di linee di tendenza: lineare, polinomiale ed esponenziale.

Linee di tendenza lineari

Una linea di tendenza lineare è la linea retta che si avvicina maggiormente ai dati del grafico. Per essere precisi, è la linea che minimizza la somma delle distanze quadrate da ogni punto.

Nel grafico sottostante, puoi vedere una linea di tendenza lineare su un grafico a dispersione che confronta l'età degli aceri da zucchero con il diametro dei loro tronchi. Puoi passare il mouse sopra la linea di tendenza per visualizzare l'equazione calcolata da Google Graph: 4,885 volte il diametro + 0,730.

Per tracciare una linea di tendenza su un grafico, utilizza l'opzione trendlines e specifica quale serie di dati utilizzare: 

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Diameter', 'Age'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: 'none',
    trendlines: { 0: {} }    // Draw a trendline for data series 0.
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Le linee di tendenza lineari sono il tipo più comune di linea di tendenza. A volte, però, una curva è la migliore per descrivere i dati e, per questo, ci serve un altro tipo di linea di tendenza.

Linee di tendenza esponenziali

Se i dati sono espressi meglio da un valore esponenziale del formato eax+b, puoi utilizzare l'attributo type per specificare una linea di tendenza esponenziale, come mostrato di seguito:

Nota: a differenza delle linee di tendenza lineari, esistono molti modi diversi per calcolare le linee di tendenza esponenziali. Al momento forniamo un solo metodo, ma ne supporteremo altri in futuro, pertanto è possibile che il nome o il comportamento della linea di tendenza esponenziale attuale cambi.

Per questo grafico utilizziamo anche visibleInLegend: true per visualizzare la curva esponenziale nella legenda.

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Generation', 'Descendants'],
    [0, 1], [1, 33], [2, 269], [3, 2013]
 ]);

  var options = {
    title: 'Descendants by Generation',
    hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
    vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
    trendlines: {
      0: {
        type: 'exponential',
        visibleInLegend: true,
      }
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
  chart.draw(data, options);
}

Modificare il colore

Per impostazione predefinita, le linee di tendenza hanno lo stesso colore delle serie di dati, ma più leggere. Puoi sostituirlo con l'attributo color. Qui, possiamo vedere quante cifre di p sono state calcolate per anno durante un periodo computazionale fruttuoso dal punto di vista computazionale, colorando di verde la linea di tendenza esponenziale.

Ecco la specifica delle linee di tendenza:

    trendlines: {
      0: {
        type: 'exponential',
        color: 'green',
      }
    }

Linee di tendenza polinomiali

Per generare una linea di tendenza polinomiale, specifica il tipo polynomial e un degree. Da utilizzare con cautela, perché a volte possono generare risultati fuorvianti. Nell'esempio riportato di seguito, in cui un set di dati più o meno lineare è tracciato con una linea di tendenza cubica (grado 3):

Tieni presente che il piombo dopo l'ultimo punto dati è visibile solo perché abbiamo esteso artificialmente l'asse orizzontale a 15. Se non imposti hAxis.maxValue su 15, il valore sarebbe stato simile a questo:

Stessi dati, stesso polinomio, finestra diversa sui dati.

Opzioni
  var options = {
    title: 'Age vs. Weight comparison',
    legend: 'none',
    crosshair: { trigger: "both", orientation: "both" },
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
      }
    }
  };
HTML completo
<html>
 <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load("current", {packages:["corechart"]});
     google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
       var data = google.visualization.arrayToDataTable([
         ['Age', 'Weight'],
         [ 8,      12],
         [ 4,      5.5],
         [ 11,     14],
         [ 4,      5],
         [ 3,      3.5],
         [ 6.5,    7]
       ]);

       var options = {
         title: 'Age vs. Weight comparison',
         legend: 'none',
         crosshair: { trigger: 'both', orientation: 'both' },
         trendlines: {
           0: {
             type: 'polynomial',
             degree: 3,
             visibleInLegend: true,
           }
         }
       };

       var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));
       chart.draw(data, options);
     }
   </script>
 </head>
 <body>
  <div id='polynomial2_div' style='width: 900px; height: 500px;'></div>
 </body>
</html>

Modificare l'opacità e lo spessore delle linee

Puoi modificare la trasparenza della linea di tendenza impostando opacity su un valore compreso tra 0,0 e 1,0 e la larghezza della linea impostando l'opzione lineWidth.

    trendlines: {
      0: {
        color: 'purple',
        lineWidth: 10,
        opacity: 0.2,
        type: 'exponential'
      }
    }

L'opzione lineWidth sarà sufficiente per la maggior parte degli utilizzi, ma se ti piace il look, c'è un'opzione pointSize che può essere utilizzata per personalizzare la dimensione dei punti selezionabili all'interno della linea di tendenza:

Proprio come la luce è al tempo stesso un'onda e una particella, una linea di tendenza è sia una linea che un insieme di punti. Ciò che gli utenti vedono dipendono da come interagiscono con quest'ultima: di solito è una linea, ma quando passano il mouse sopra la linea di tendenza viene evidenziato un punto specifico. Il diametro di questo punto sarà pari a:

  • la linea di tendenza pointSize se definita, altrimenti...
  • pointSize globale, se definito, altrimenti...
  • 7

Tuttavia, se imposti l'opzione pointSize globale o della linea di tendenza, verranno mostrati tutti i punti selezionabili indipendentemente dal valore lineWidth della linea di tendenza.

Opzioni
  var options = {
    legend: 'none',
    hAxis: { ticks: [] },
    vAxis: { ticks: [] },
    pointShape: 'diamond',
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
        pointSize: 20, // Set the size of the trendline dots.
	opacity: 0.1
      }
    }
  };
HTML completo
<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['X', 'Y'],
          [0, 4],
          [1, 2],
          [2, 4],
          [3, 6],
          [4, 4]
        ]);

        var options = {
          legend: 'none',
          hAxis: { ticks: [] },
          vAxis: { ticks: [] },
          colors: ['#703583'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'polynomial',
              degree: 3,
              visibleInLegend: true,
              pointSize: 20, // Set the size of the trendline dots.
              opacity: 0.1
            }
          }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('chart_pointSize'));

      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_pointSize" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Rendere visibili i punti

Le linee di tendenza vengono realizzate tracciando una serie di punti sul grafico. L'opzione pointsVisible della linea di tendenza determina se i punti di una determinata linea di tendenza sono visibili. L'opzione predefinita per tutte le linee di tendenza è true, ma se vuoi disattivare la visibilità dei punti per la tua prima linea di tendenza, imposta trendlines.0.pointsVisible: false.

Il grafico seguente mostra il controllo della visibilità dei punti in base alla linea di tendenza.

Opzioni
        var options = {
          height: 500,
          legend: 'none',
          colors: ['#9575cd', '#33ac71'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'exponential',
              pointSize: 20,
              opacity: 0.6,
              pointsVisible: false
            },
            1: {
              type: 'linear',
              pointSize: 10,
              pointsVisible: true
            }
          }
        };
HTML completo
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['X', 'Y', 'Z'],
          [0, 4, 5],
          [1, 2, 6],
          [2, 4, 8],
          [3, 6, 10],
          [4, 4, 11],
          [5, 8, 13],
          [6, 12, 15],
          [7, 15, 19],
          [8, 25, 21],
          [9, 34, 23],
          [10, 50, 27]
        ]);

        var options = {
          height: 500,
          legend: 'none',
          colors: ['#9575cd', '#33ac71'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'exponential',
              pointSize: 20,
              opacity: 0.6,
              pointsVisible: false
            },
            1: {
              type: 'linear',
              pointSize: 10,
              pointsVisible: true
            }
          }
        };

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

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Modificare l'etichetta

Se selezioni visibleInLegend per impostazione predefinita, l'etichetta mostra l'equazione della linea di tendenza. Puoi utilizzare labelInLegend per specificare un'etichetta diversa. Qui viene visualizzata una linea di tendenza per ciascuna delle due serie, impostando le etichette nella legenda su "Linea di bug" (per la serie 0) e "Linea di test" (serie 1).

    trendlines: {
      0: {
        labelInLegend: 'Bug line',
        visibleInLegend: true,
      },
      1: {
        labelInLegend: 'Test line',
        visibleInLegend: true,
      }
    }

Correlazioni

Il coefficiente di determinazione, chiamato R2 nelle statistiche, identifica il grado di corrispondenza tra una linea di tendenza e i dati. Una correlazione perfetta è 1,0, mentre un'anticarrelazione perfetta è 0,0.

Puoi rappresentare R2 nella legenda del grafico impostando l'opzione showR2 su true.

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          hAxis: {minValue: 0, maxValue: 15},
          vAxis: {minValue: 0, maxValue: 15},
          chartArea: {width:'50%'},
          trendlines: {
            0: {
              type: 'linear',
              showR2: true,
              visibleInLegend: true
            }
          }
        };

        var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear'));
        chartLinear.draw(data, options);

        options.trendlines[0].type = 'exponential';
        options.colors = ['#6F9654'];

        var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential'));
        chartExponential.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chartLinear" style="height: 350px; width: 800px"></div>
    <div id="chartExponential" style="height: 350px; width: 800px"></div>
  </body>
</html>