Courbes de tendance

  1. Overview
  2. Courbes de tendance linéaires
  3. Courbes de tendance exponentielles
  4. Courbes de tendance polynomiales
  5. Modifier la couleur
  6. Modifier l'opacité et l'épaisseur du trait
  7. Faire en sorte que les points soient visibles
  8. Modifier le libellé
  9. Corrélations

Présentation

Une ligne de tendance est une ligne superposée sur un graphique qui révèle l'orientation générale des données. Les graphiques Google peuvent générer automatiquement des courbes de tendance pour les graphiques à nuage de points, à barres, à colonnes et en courbes.

Les graphiques Google acceptent trois types de courbes de tendance: linéaire, polynomiale et exponentielle.

Courbes de tendance linéaires

Une ligne de tendance linéaire est une ligne droite qui se rapproche le plus des données du graphique. (Plus précisément, il s'agit de la ligne qui minimise la somme des carrés des distances entre chaque point auquel elle est reliée.)

Le graphique ci-dessous illustre une courbe de tendance linéaire sur un graphique à nuage de points comparant l'âge des érables à sucre au diamètre de leurs troncs. Vous pouvez pointer sur la ligne de tendance pour voir l'équation calculée par Google Charts: 4,885 fois le diamètre + 0,730.

Pour tracer une ligne de tendance sur un graphique, utilisez l'option trendlines et spécifiez la série de données à utiliser: 

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);
}

Les courbes de tendance linéaires sont le type de courbe de tendance le plus courant. Toutefois, il est parfois préférable d'utiliser une courbe pour décrire des données. Pour cela, nous avons besoin d'un autre type de courbe de tendance.

Courbes de tendance exponentielles

Si vos données s'expliquent mieux par une ligne exponentielle de la forme eax+b, vous pouvez utiliser l'attribut type pour spécifier une ligne de tendance exponentielle, comme indiqué ci-dessous:

Remarque:Contrairement aux courbes de tendance linéaires, il existe plusieurs façons de calculer une courbe de tendance exponentielle. Nous ne proposons qu'une seule méthode pour le moment, mais nous en acceptons d'autres à l'avenir. Il est donc possible que le nom ou le comportement de la ligne de tendance exponentielle actuelle change.

Pour ce graphique, nous utilisons également visibleInLegend: true pour afficher la courbe exponentielle dans la légende.

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);
}

Modifier la couleur

Par défaut, les lignes de tendance sont de la même couleur que les séries de données, mais elles sont plus claires. Vous pouvez remplacer cela avec l'attribut color. Ici, nous représentons le nombre de chiffres de π qui ont été calculés par année au cours d'une période informatiquement fructueuse, et la ligne de tendance exponentielle est colorée en vert.

Voici la spécification des courbes de tendance:

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

Courbes de tendance polynomiales

Pour générer une ligne de tendance polynomiale, spécifiez le type polynomial et un degree. À utiliser avec prudence, car ils peuvent parfois donner des résultats trompeurs. Dans l'exemple ci-dessous, où un ensemble de données à peu près linéaire est tracé avec une ligne de tendance cubique (degré 3) :

Notez que la baisse après le dernier point de données n'est visible que parce que nous avons artificiellement étendu l'axe horizontal à 15. Si la valeur de hAxis.maxValue n'était pas définie sur 15, elle aurait été semblable à ceci:

Mêmes données, même polynôme, fenêtre différente sur les données.

Options
  var options = {
    title: 'Age vs. Weight comparison',
    legend: 'none',
    crosshair: { trigger: "both", orientation: "both" },
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
      }
    }
  };
Full HTML
<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>

Modifier l'opacité et l'épaisseur du trait

Vous pouvez modifier la transparence de la courbe de tendance en définissant opacity sur une valeur comprise entre 0,0 et 1,0, et la largeur de la ligne en définissant l'option lineWidth.

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

L'option lineWidth suffit pour la plupart des utilisations, mais si vous aimez l'apparence, vous pouvez utiliser l'option pointSize pour personnaliser la taille des points sélectionnables dans la ligne de tendance:

Tout comme la lumière est à la fois une onde et une particule, une ligne de tendance est à la fois une ligne et un ensemble de points. Ce que les utilisateurs voient dépend de la manière dont ils interagissent avec elle: il s'agit généralement d'une ligne, mais lorsqu'ils pointent sur la ligne de tendance, un point particulier est mis en surbrillance. Ce point aura un diamètre égal à:

  • la courbe de tendance pointSize si elle est définie, sinon...
  • pointSize global s'il est défini, sinon...
  • 7

Toutefois, si vous définissez l'option globale ou la ligne de tendance pointSize, tous les points sélectionnables seront affichés, indépendamment de la lineWidth de la ligne de tendance.

Options
  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
      }
    }
  };
Full HTML
<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>

Rendre les points visibles

Les courbes de tendance sont composées de plusieurs points sur le graphique. L'option pointsVisible de la courbe de tendance détermine si ses points sont visibles ou non. L'option par défaut pour toutes les lignes de tendance est true, mais si vous souhaitez désactiver la visibilité du point pour la première ligne de tendance, définissez trendlines.0.pointsVisible: false.

Le graphique ci-dessous illustre le contrôle de la visibilité des points par ligne de tendance.

Options
        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
            }
          }
        };
Full HTML
<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>

Modifier le libellé

Par défaut, si vous sélectionnez visibleInLegend, le libellé révèle l'équation de la courbe de tendance. Vous pouvez utiliser labelInLegend pour spécifier un autre libellé. Ici, nous affichons une courbe de tendance pour chacune des deux séries, en définissant les étiquettes de la légende sur "Ligne de bug" (pour la série 0) et "Ligne de test" (série 1).

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

Corrélations

Le coefficient de détermination, appelé R2 en statistiques, identifie le degré de correspondance entre une courbe de tendance et les données. Une corrélation parfaite est égale à 1,0 et une anticorrélation parfaite est de 0,0.

Vous pouvez représenter R2 dans la légende de votre graphique en définissant l'option showR2 sur 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>