Discussion :

[Benji12]

Hello,

J'essaie d'implémenter chart.js avec un petit exercice, mais je bute sur le format des data-sets :

Dans mon fichier html, j'ai renseigné les différentes datas que je veux récupérer :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
    <div class="shadow-lg rounded-lg overflow-hidden bg-white"
         id= "chart"
         data-id="vues"
         data-name="vues"
         data-year="2020"
         data-vues= "[0, 10, 5, 2, 20, 30, 45, 10, 5, 2, 20, 30]">

Dans mon js je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const ChartValues = document.getElementById('chart').dataset

et je voudrais passer ChartValues.vues dans une autre constante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
  const data = {
    labels: labels,
    datasets: [
      {
        label: 'Vues',
        data: ChartValues.vues,
        borderColor: "hsl(252, 82.9%, 67.8%)",
        backgroundColor: "hsl(252, 82.9%, 67.8%)",
      }
    ]
  };

Le souci c'est que ChartValues.vues me retourne une string au lieu de [0, 10, 5, 2, 20, 30, 45, 10, 5, 2, 20, 30]

Quelle est la meilleure façon de faire dans le cas présent ?

[Toufik83]

Bonjour,

Il faut convertir la chaîne de caractère en tableau avec JSON.parse:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data: JSON.parse(ChartValues.vues)

[Benji12]

Merci Toufik

J'ai un autre souci. Comment je peux faire pour avoir un affichage conditionnel, seulement si mon dataset contient des valeurs ?

Par exemple si j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data-phone="[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]"

Je voudrais ne pas afficher le chart correspondant. Je peux éventuellement passer data-phone sous la forme d'un array vide, ou avec la valeur null. J'ai bien essayé avec des ifs, mais comme je fais essentiellement du back, j'ai un peu de mal

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  const data = {
    labels: labels,
    datasets: [
      {
        label: 'Vues',
        data: JSON.parse(ChartValues.vues),
        borderColor: "#7E2E84",
        backgroundColor: "#7E2E84",
      },
      {
        label: 'Téléphone',
        data: JSON.parse(ChartValues.phone),
        borderColor: "#1F2648",
        backgroundColor: "#1F2648",
      },
      {
        label: 'Mobile',
        data: JSON.parse(ChartValues.mobil),
        borderColor: "#FAB313",
        backgroundColor: "#FAB313",
      },
      {
        label: 'Whatsapp',
        data: JSON.parse(ChartValues.whatsapp),
        borderColor: "#856A5D",
        backgroundColor: "#856A5D",
      },
      {
        label: 'Email',
        data: JSON.parse(ChartValues.booking),
        borderColor: "#4D5FB3",
        backgroundColor: "#4D5FB3",
      },
      {
        label: 'Site Web',
        data: JSON.parse(ChartValues.website),
        borderColor: "#89AAE6",
        backgroundColor: "#89AAE6",
      }
    ]
  };

[Toufik83]

Bonjour,

L'idée est de faire la somme des valeurs du tableau, si c'est égale à 0 cela dit que toutes les valeurs sont des 0.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data:JSON.parse(ChartValues.vues).reduce((acc,curVal)=>acc+curVal)===0?null:JSON.parse(ChartValues.vues);

Sinon et si l'une des valeurs est différente de 0, il existe l'option spanGaps pour ignorer complétement le point (x,y) de la ligne correspondante.

[Benji12]

Bonjour,
L'idée est de faire la somme des valeurs du tableau, si c'est égale à 0 cela dit que toutes les valeurs sont des 0.
.

En fait mon problème c'est pas trop à ce niveau, j'ai réglé ça en back en passant la valeur null si l'array ne contient que de zéros.

C'est plutôt ne pas afficher ce bloc là, si la value est null, un truc dans le genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
datasets: [
      if (JSON.parse(ChartValues.vues) != null)
      {
        label: 'Vues',
        data: JSON.parse(ChartValues.vues),
        borderColor: "#7E2E84",
        backgroundColor: "#7E2E84",
      },
  else if (JSON.parse(ChartValues.mobil) != null)

[Toufik83]

Dans ce cas, tu peux filtrer les éléments de datasets en fonction de data et récupérer seulement les entrées non null :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const data={
...
};
//filtrer les éléments :
data.datasets=data.datasets.filter(elem=>elem.data!==null);

[Benji12]

Merci Toufik

La fonction que tu m'as envoyée, ne fonctionnait pas, Du coup j'ai fait mes recherches et j'ai fait de la façon suivante. Je ne sais pas si c'est la plus pertinente, mais ça fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const items = [
    {
      label: 'Vues',
      data: JSON.parse(ChartValues.vues),
      borderColor: "#7E2E84",
      backgroundColor: "#7E2E84",
    },
    {
      label: 'Téléphone',
      data: JSON.parse(ChartValues.phone),
      borderColor: "#1F2648",
      backgroundColor: "#1F2648",
    },
    {
      label: 'Mobile',
      data: JSON.parse(ChartValues.mobil),
      borderColor: "#FAB313",
      backgroundColor: "#FAB313",
    },
  ]
 
  const datas = items.filter(function(item) {
    return item.data!== null ;
  });
 
  const data = {
    labels: labels,
    datasets: datas
  };

[Toufik83]

Bonjour,

Les deux solutions sont correctes, et je pense que j'ai testé la mienne avant de te l'envoyer et ça a fonctionné, à moins que tu as fait une erreur quelque part.. mais bon, content que le problème a été résolu.