Generate graphics with Chartjs and Angularjs

Question

I have a problem generating graphics using Chartjs and Angularjs. When loading the data from an X api I receive an array of objects that contains the data needed to generate a series of graphs below a model of the object

{ 
    0: {total: 100.00, valores: {10, 20, 5 , ...,X}, 
    1: {total: 350.00, valores: {50, 110, 80, ...,X}, 
    2: {total: 50.00, valores: {10, 4, 2, ...,X} 
}

The received objects are composed of two total properties and value, being total a field that represents the sum of all the values that are within the array 'Values'. Using Chatjs I am trying to generate a line type chart for each object of the request, the graph should present the variation of the field values. I am already using the Anglesjs bilioteca to present the graph but the problem is that it has not become dynamic only the graph of the first object is presented in all ng-repeat interactions. Below is the representation of my html and js

function carregarChart() {
   meuServico.CarregarDados($stateParams.Id).then(function (result) {

    $scope.demonstrativo = result.data;

    var grafico = {};

    for (var i = 0; i < result.data.length; i++) {

        grafico = {
            datasets: [
                {
                    fillColor: #333,
                    strokeColor: #999,
                    pointColor: #999,
                    pointStrokeColor: #999,
                    data: result.data[i].valores
                }
            ]
        };

        $scope.demonstrativo.grafico = grafico;
    }
}

HTML

<div class="col-lg-3" ng-repeat="item in demonstrativo">
<canvas linechart options="opicoesDoGrafico" data="item.grafico" responsive="true" legend="false">
</canvas>

How can I generate a graph for each item in the demo using the previously reported data?

Thank you in advance.

Answer 1

I don’t have much sense of what you need to generate, but looking at the code example you posted, I imagine it’s something like this:

function carregarChart() {
    meuServico.CarregarDados($stateParams.Id).then(function (result) {

        var datasetsArray = []

        for (var i = 0; i < result.data.length; i++) {

            datasetsArray.push({
                fillColor: '#333',
                strokeColor: '#999',
                pointColor: '#999',
                pointStrokeColor: '#999',
                data: result.data[i].valores
            });

        };

        var grafico = {
            datasets: datasetsArray
        };

        $scope.demonstrativo.grafico = grafico;

    });
}