Multi line chart for daily sales of every product using chart js

👍:0

so i found the solution
so line chart in chartjs needed a data structure like this

[
 {
  label: "product name",
  data: [
    { x: "2022-11-15", y: 30 },
    { x: "2022-11-15", y: 60 },
    { x: "2022-11-16", y: 80 },
    { x: "2022-11-17", y: 30 },
    { x: "2022-11-18", y: 40 },
    { x: "2022-11-19", y: 40 },
  ],
},

]

so created it using this

 if (dates && dataSet) {
//   lineData = [];
if (lineData.length === 0) {
  lineData.push({
    label: dataSet[0].nom_produit,
    data: [],
  });
}
dataSet.map((set: any) => {
  let found = lineData.find((el: any) => el.label === set.nom_produit);
  if (!found) {
    lineData.push({
      label: set.nom_produit,
      data: [],
      borderColor: `rgb(0, 0, 220, 0.9)`,
      backgroundColor: "rgba(0, 0, 220, 0.5)",
      tension: 0.4,
    });
  }
});
dataSet.map((set: any) => {
  lineData.map((line: any) => {
    if (set.nom_produit === line.label) {
      line.data.push({
        x: set.date,
        y: set.whole_price,
      });
    }
  });
});

}

hope that it help some one

if someone has a better solution it will cool to post it thank’s

Leave a comment