Chartjs-How to set the data of chart in angular which is taken from the backend nodejs api that is store in mongodb and showing on the html page

by

0👍

If i undestand correctly you are trying to read data from a database and put it on a chart. I did something similar, but i had a bit different approach:

HTML:

<canvas id="myChart" width="300" height="100"></canvas> <br/>

Chart config:

var config = {
    type: 'line',
    data: { datasets: [] }, // trend data goes here
    options: { 
        scales: {
            xAxis: { // x axis
                type: 'time',
            }
        },
    },
}

New chart:

function newChart() {
     config.data.datasets = []; // reset data
     populateTrend(config); // populate chart

     if (window.hasOwnProperty("graph")) { // destroy previous chart
          if (typeof window.graph.resetZoom !== "undefined") { // if you have a zoom plugin
               window.graph.resetZoom();
          }
          window.graph.destroy();
     }

     let ctx = document.getElementById('myChart').getContext('2d'); // canvas
     window.graph = new Chart(ctx, config); // make the chart
}

populate trend:

function populateTrend (config) {
    // data sets and scales
    let datasets = config.data.datasets, scales = config.options.scales;

    let log = data; // this is where you read from your database

    let dataset = { // add some data here
        data: [],
        label: log.description, 
        fill: false, 
        radius: 0,
        unit: log.unit, 
        pointType: log.pointType,
        yAxisID: log.unit, // y axis
    };

    // this is where the real data goes
    // you should push the data in a loop
    dataset.data.push({
        "x": something.getTime(),
        "y": null,
        "ymin": null,
        "ymax": null,
    });

    datasets.push(dataset); // add data set to config
}

Leave a comment