web-dev-qa-db-fra.com

comment tracer plusieurs séries temporelles dans chartjs où chaque série temporelle a des temps différents

J'ai deux séries chronologiques par exemple:

s1:
  2017-01-06 18:39:30    100
  2017-01-07 18:39:28    101

et

s2:
2017-01-07 18:00:00     90
2017-01-08 18:00:00    105

Je souhaite les tracer dans un graphique Chartjs, mais il semble que Chartjs ne prenne qu'un tableau d'axe des x (ou une étiquette dans la terminologie de Chartjs). 

Donc ma question est quelle est la meilleure façon de tracer les deux?

Mon approche consistait à écrire une fonction (en python, bien que le langage importe peu pour cette partie) qui parcourt les deux séries chronologiques et crée 3 nouveaux tableaux, dont le format est apparemment celui dont Chartjs a besoin à partir du premier exemple: https://www.sitepoint.com/introduction-chart-js-2-0-six-examples/

L'algorithme (en code Sudo) se présente comme suit:

    # inputs are initial time series s1 and s2
    y1 = [] # to hold new s1 data values
    y2 = [] # to hold new s2 data values
    x  = [] # to hold times

    # iterate through longest series s1 or s2
    if s1[idx].time > s2[idx].time
      x.append(s1[idx].time)
      y1.append(s1[idx].data)
      # y2 appends the linear interpolation of 
      # of closest y2 points

    if (s1[idx].time < s2[idx].time)
      x.append(s2[idx].time)
      # opposite of above. ie. swap y1<->y2, s1->s2

    else # they have the same time
      x.append(s1[idx].time)
      y1.append(s1[idx].data)
      y2.append(s2[idx].data)

Il existe quelques autres contrôles conditionnels pour le moment où les données sont épuisées, mais c'est la logique principale. Après quoi, j'ai 3 tableaux que je peux maintenant ajouter au graphique js via un tableau de temps/libellé/axe x et deux tableaux de données. Cependant, cela semble bien plus compliqué qu'il ne devrait l'être étant donné la fréquence de ce cas d'utilisation, je suppose. Toute aide ou conseil est grandement apprécié.

javascriptpythonchart.js
7
achyrd

Dans ChartJS, label est un axe cartésien Catégorie . Puisque vous avez mentionné l’interpolation linéaire dans votre code, je suppose que les chaînes telles que 2017-01-06 18:39:30 ne sont pas des catégories, mais représentent les valeurs numériques de l’axe des x. Nous devons donc informer ChartJS que les chaînes de l’axe des x sont en réalité du temps. Nous faisons cela dans les options d'échelle.

var s1 = {
  label: 's1',
  borderColor: 'blue',
  data: [
    { x: '2017-01-06 18:39:30', y: 100 },
    { x: '2017-01-07 18:39:28', y: 101 },
  ]
};

var s2 = {
  label: 's2',
  borderColor: 'red',
  data: [
    { x: '2017-01-07 18:00:00', y: 90 },
    { x: '2017-01-08 18:00:00', y: 105 },
  ]
};

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: { datasets: [s1, s2] },
  options: {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Vous trouverez plus d'informations dans la documentation Chart.js .

10
Waterscroll

Vous pouvez avoir des données de la forme [{x: "valeur", y: "valeur"}] lorsque votre graphique est de type scatter .

Donc, pour que votre graphique fonctionne, faites ceci.

var canvas = document.getElementById("graph");
var s1 = [{x:"2017-01-06 18:39:30",y:"100"},{x:"2017-01-07 18:39:28",y:"101"}];
var s2 = [{x:"2017-01-07 18:00:00",y:"90"},{x:"2017-01-08 18:00:00",y:"105"}];

var graphParams = {
	type:"scatter",
	data:{
		datasets: [{
			label:"Series 1",
			data:s1,
			borderColor:"red",
			backgroundColor:"transparent",
		},
		{
			label:"Series 2",
			data:s2,
			borderColor:"blue",
			backgroundColor:"transparent",
		}],
	},
	options:{
		maintainAspectRatio:false,
		responsive:false,	
		scales:{
			xAxes:[{
				type:"time",
				distribution: "series",
			}],
		}
	}

}
ctx = new Chart(canvas, graphParams);
<canvas id="graph" height="500" width="700"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script>

0
Jeremy Myers