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

di il
4 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',
    },
  },
};

4 Risposte

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

    03/04/2025 - morenog ha scritto:

    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.

    Siccome hai basato la tua applicazione su Angular, per utilizzare Chart.js dovrai trovare il modo di integrarlo, o utilizzando un wrapper esistente (tipo questo, anche se chiuso e abbandonato), o costruendotene uno.

    Chart.js utilizza direttamente il DOM, mentre Angular ha un suo "ciclo di vita" nella gestione della pagina, sebbene alla fine pure Angular finisca per utilizzare il DOM dietro le quinte. Tuttavia, per "fare cose" nel grafico da Angular, o notificando ad Angular ciò che avviene nel grafico, le due parti vanno integrate in maniera opportuna per essere compatibile con quell'ecosistema.

    Fossi in te, cercherei nel Web una alternativa a Chart.js che sia compatibile o già "disegnata" per Angular.

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

    Sono riuscito a installare Chart.js e in un componente funziona bene.
    Ho fatti un'implementazione che mi sembra importante.
    Il grafico nasce con tipo grafico "bar".
    Ho messo dei bottoni che impostano un tipo di grafico diverso (?line', 'radar',ecc) in maniera tale da permettere all'utente di ottenere una visualizzazzione dei sui dati con un tipo di grafico diverso.
    Per otteneree questo risultato, prima di ricreare il nuovo grafico, devo cancellare il vecchio.
    Mi va in errore non cancellando il grafico iniziale.
    il codi che utilizzo mi sembra corretto.
    Vorrei chiedervi se rilevate qualche errore che impedisce di cancellare il grafico iniziale.

    public MyChartconsumiProdCucinadata: any;      definizione del grafico
    
    
    
    
    
              RenderChartMyChartconsumiProdCucinadata(labelData:any, valoriData: any, colorData: any, tipo: any) {
    
                  // ho provato a verificare l'esistenza ddel grafico con queste due modalita:
                  // modalita ricerca grafico N. 1
                    if(Chart.getChart("graficoconsumiProdCucinachart")) {
                     
                      Chart.getChart("graficoconsumiProdCucinachart")?.destroy()
                       
                    }
                    
                   // modalita ricerca grafico N. 2
                      if(this.MyChartconsumiProdCucinadata) {
                        alert(' ho trovato il grafico con  -- consumiProdCucinachart --' )
                       this.MyChartconsumiProdCucinadata.destroy();
                      }
    
                    this.MyChartconsumiProdCucinadata = new Chart("graficoconsumiProdCucinachart", {
                      type: tipo,
                      data: {
                        labels: labelData,
                        datasets: [{
                          label: '# consumi Prodotti Cucina',
                          data: valoriData,
                          borderWidth: 1,
                          backgroundColor: colorData,
                          borderColor: "black"
                        }
                      ]
                      },
                      options: {
                        scales: {
                          y: {
                            beginAtZero: true
                          }
                        },
    
                      }
                    });
                  }

    lato html utilizzo questo codice

     <div class="row">
        <div class="col-md-6" >
              <h2>ConsumiProdCucina Chart</h2>
              <canvas id="graficoconsumiProdCucinachart"></canvas>
        </div>
    </div>
    <br>

    controllando su package.json vedo che la versione di chart.js in uso è la  3.7.1

      "@ng-bootstrap/ng-bootstrap": "^10.0.0",
        "angular-notifier": "^9.1.0",
        "angular-responsive-carousel": "^2.1.2",
        "bootstrap": "^5.1.3",
        "chart.js": "^3.7.1",
        "html2canvas": "^1.4.1",
        "jspdf": "^2.5.1",
        "moment": "^2.29.1",
        "ng-img-magnifier": "^1.2.1",
        "ng2-search-filter": "^0.5.1",
        "ngx-bootstrap": "^6.2.0",

    mentre sulla documentazione di npm vedo che la versione latest è la 4.4.8
    il problema, se il codice può risultare corretto, potrebbe essere superato installano la versione latest ?

    Nel caso come posso aggiornare alla versione 4.4.8 ?

    Ho ricontrollato minuziosamnete il codice, ma non trovo motivi per non riuscire a cancellare il grafico iniziale.
    Non riuscendo ad effettuare la cancellazione, va in errore con il seguente coice

    Failed to create chart: can't acquire context from the given item main.js:130:569534
    ERROR Error: Canvas is already in use. Chart with ID '1' must be destroyed before the canvas can be reused.
        Vc http://localhost:4200/main.js:130
        RenderChartMyChartConsumiProdotti http://localhost:4200/main.js:130
        setChartType http://localhost:4200/main.js:130
        template http://localhost:4200/main.js:130
        pP http://localhost:4200/main.js:1
        s http://localhost:4200/main.js:1
        xB http://localhost:4200/main.js:1
        invokeTask http://localhost:4200/polyfills.js:23
        onInvokeTask http://localhost:4200/main.js:1

    Grazie 

    Moreno

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

    Ciao, prova a dare un'occhiata a questa libreria, 

    https://valor-software.com/ng2-charts/

    sembra essere fatta apposta per integrare chart-js con il typescript di angular, quindi potrebbe essere più semplice da integrare nel progetto

    in giornata ci guardo anch'io visto che sto studiando angular 17

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

    questo è quello che sono riuscito a fare

    ho installato chart js normale

    npm install chart.js

    in app.component.html ho messo:

    <div class="chart-container">
      <canvas  id="MyChart" >{{ chart }}</canvas>
    </div>
    

    mentre in app.component.ts ho messo:

    import { Component, OnInit } from '@angular/core';
    import Chart from 'chart.js/auto';
    
    
    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [],
      templateUrl: './app.component.html',
      styleUrl: './app.component.css'
    })
    export class AppComponent implements OnInit{
    
      ngOnInit(): void {
        this.disegnaGrafico();
      }
    
      title = 'grafico-prova';
    
      public chart: any;
    
      disegnaGrafico(){
    
        this.chart = new Chart("MyChart", {
          type: 'bar',
    
          data: {
    
            //asse x
            labels: ['2022-05-10', '2022-05-11', '2022-05-12','2022-05-13','2022-05-14', '2022-05-15', '2022-05-16','2022-05-17', ],
    
            //asse y
            datasets: [
              {
                label: "Sales",
                data: ['467','576', '572', '79', '92', '574', '573', '576'],
                backgroundColor: 'blue'
              },
              {
                label: "Profit",
                data: ['542', '542', '536', '327', '17', '0.00', '538', '541'],
                backgroundColor: 'limegreen'
              }
            ]
    
          },
          options: {
            aspectRatio:2.5
          }
    
        });
      }
    
    }
    
Devi accedere o registrarti per scrivere nel forum
4 risposte