Creare grafici con Chart.js dentro a applicazione Angular/Nodejs/Mysql

di il
0 risposte

Creare grafici con Chart.js dentro a applicazione Angular/Nodejs/Mysql

Buongiorno a tutti e un grazie anticipato per chi può accompagnarmi nel risolvere il problema.

Ho creato una web application in Angular/Nodejs e Mysql. Ora vorrei implementare l'applicazione inserendo amche la parte di grafici per far risaaltare certe situazioni

E' l a prima volta che mi cimento e sto cercando di  informarmi su come poter realizzare questa problematica. Mi sembra di capire che lo strumento più utilizzato sia Chart.js ma non so come alimentare i dati provenienti da tabelle su Mysql. Riporto un esempio preso da un progetto che sto studiando. Vedo che i dati che devono essere utilizzati in modalità grafico, nel configuratore sono degli array (labels, data) Non so come creare degli array popolandoli da record su mysql.

Qualcuno ha già affrontato queste tematiche ? Ci sono dei progetti d'esempio per visualizzaare i passi per la creazione del o dei grafici ?

Grazie

Moreno 

import type { ChartData, ChartOptions } from 'chart.js';                                            esempio di configuratore per chart.js
const data: ChartData = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)',
      ],
      borderColor: [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)',
      ],
      borderWidth: 1,
    },
  ],
};
const options: ChartOptions = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Chart.js Doughnut Chart',
    },
  },
};
Devi accedere o registrarti per scrivere nel forum
0 risposte