Generate charts with ChartJs and AngularJS

Question

Generate charts with ChartJs and AngularJS

Navigation

#1 by (1 votes)

2

I have a problem generating charts using ChartJS and AngularJS. When loading the data of an api X I get an array of objects that contains the data needed to generate a series of graphics follows below an object model

{ 
    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} 
}

Received objects are composed of two total and value properties, with a total field representing the sum of all values that are within the 'Values' array. Using the ChatJs I am trying to generate a chart of type line for each object of the request, the graph should display the variation of the range of values field. I am already using the AnglesJs library to present the graph but the problem is that it was not dynamic only the graph of the first object is presented in all ng-repeat interactions. Below is the representation of my html and my 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 statement using the data previously reported?

Thank you in advance.

angularjs chartjs

asked by anonymous 20.05.2016 / 16:29

1 answer

Codeigniter - Dynamic form How to eliminate the space that require_once leaves?

score 1 · Answer 1

I'm not very aware of what you need to generate, but looking at the code example you posted, I imagine it to be 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;

    });
}