Courbes de tendance

  1. Présentation
  2. Courbes de tendance linéaires
  3. Lignes de tendance exponentielles
  4. Lignes de tendance polynomiales
  5. Modifier la couleur
  6. Modifier l'opacité et l'épaisseur de ligne
  7. Rendre les points visibles
  8. Modifier le libellé
  9. Corrélations

Présentation

Une ligne de tendance est une ligne superposée à un graphique qui révèle la direction 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.

Google Charts accepte trois types de lignes de tendance: linéaire, polynomiale et exponentielle.

Lignes de tendance linéaires

Une ligne de tendance linéaire est la ligne droite qui se rapproche le plus des données du graphique. (Pour être précis, il s'agit de la ligne qui minimise la somme des distances au carré de chaque point jusqu'à celle-ci.)

Dans le graphique ci-dessous, vous pouvez voir une courbe de tendance linéaire sur un graphique à nuage de points comparant l'âge des érables à sucre et le diamètre de leurs troncs. Pointez sur la courbe de tendance pour voir l'équation calculée par Google Charts: 4,885 x 0,730.

Pour tracer une courbe 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. Mais parfois, une courbe est préférable pour décrire des données. Pour cela, nous avons besoin d'un autre type de courbe de tendance.

Lignes de tendance exponentielles

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

Remarque : Contrairement aux lignes de tendance linéaires, il existe plusieurs manières de calculer des courbes de tendance exponentielles. Nous ne fournissons qu'une seule méthode pour le moment, mais elle en acceptera davantage à l'avenir. Il est donc possible que le nom ou le comportement de la courbe de tendance exponentielle actuelle soit modifié.

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 colorées de la même manière que les séries de données, mais sont plus claires. Vous pouvez remplacer ce paramètre avec l'attribut color. Ici, nous affichons dans le graphique le nombre de chiffres de π calculés par année au cours d'une période de calcul fructueuse, en coloriant la courbe de tendance exponentielle.

Voici les spécifications des courbes de tendance:

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

Lignes de tendance polynomiales

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

Notez que le tracé après le dernier point de données n'est visible que parce que nous avons étendu artificiellement l'axe horizontal à 15. Si vous ne définissez pas hAxis.maxValue sur 15, vous verriez 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,
      }
    }
  };
HTML complet
<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 de ligne

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 l'épaisseur de ligne en définissant l'option lineWidth.

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

L'option lineWidth est suffisante dans la plupart des cas, mais si vous le souhaitez, vous pouvez utiliser une option pointSize pour personnaliser la taille des points sélectionnables dans la courbe de tendance:

Tout comme la lumière est à la fois une vague et une particule, une courbe de tendance est à la fois une ligne et une série de points. Ce que les utilisateurs voient dépend de leur interaction: généralement, une ligne, mais lorsqu'ils passent la souris sur la courbe de tendance, un point particulier est mis en surbrillance. Le diamètre de ce point sera égal à:

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

Toutefois, si vous définissez l'option pointSize ou la courbe de tendance pointSize, tous les points sélectionnables seront affichés, indépendamment de la valeur lineWidth de la courbe 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
      }
    }
  };
HTML complet
<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 d'un groupe de points figurant sur le graphique. L'option pointsVisible de la courbe de tendance détermine si les points d'une courbe de tendance particulière sont visibles. L'option par défaut pour toutes les courbes de tendance est true, mais si vous souhaitez désactiver la visibilité des points pour votre première courbe de tendance, définissez trendlines.0.pointsVisible: false.

Le graphique ci-dessous montre comment contrôler 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
            }
          }
        };
Version HTML complète
<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é affiche 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 dans les statistiques, détermine à quel point une courbe de tendance correspond aux données. Une corrélation parfaite est 1,0, tandis qu'une corrélation parfaite est 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>