Récupérer les dataset au bon format

Version imprimable

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:

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:

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

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

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 ?

26/08/2022, 18h36
Toufik83

Bonjour,

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

Code:

data: JSON.parse(ChartValues.vues)

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:

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:

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",
      }
    ]
  };

28/08/2022, 14h06
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:

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.

Citation:

Envoyé par 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.
.

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:

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)

28/08/2022, 15h57
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:

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

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:

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

28/08/2022, 17h13
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.