Chartjs-How do I create multiple charts at the same page with angular?

by

0👍

First of all I believe your data will be like this,

var example = [{
                  project: {data:['24/12/1994','25/12/1994'], qtd: [1,5]
               },{
                  project: {data:['24/12/1994','25/12/1994'], qtd: [1,5]
               }];

The object format you have posted in question is wrong.

To do this, firstly you need to save the whole data in a $scope like

$scope.chartData = example; //example is what we defined above or your response

the in html you have to ngRepeat the canvas for displaying each chart.

  <div class="chart-container">
    <canvas 
            ng-repeat="data in chartData"
            chart-data="{{data}}"
            id="line" class="chart chart-line"
            chart-labels="labels"
            chart-series="series" chart-options="options"
            chart-dataset-override="datasetOverride"
            chart-click="onClick">
    </canvas> 
  </div>

Here I passed data in chart-data="{{data}}" guessing you need to pass the each object in your array of objects.

If you want to pass only project object in each object, then
chart-data="{{data.project}}"

and chart-data="{{data.qtd}}" in case of qtd object

Leave a comment