Making angular-chartjs responsive with UI-Grid

Question

I am using angular-chart.js (http://jtblin.github.io/angular-chart.js/) module and trying to make the chart data editable with UI-Grid module (http://ui-grid.info/docs/#/tutorial/201_editable). I am able to edit the data but not sure how I can make the chart updated responsively upon editing the cell. I am fighting with this for sometime.I'd appreciate any thoughts on this.

Here's what I have got so far:

app.controller("myController", function ($scope) {

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];

$scope.gridOptions = {
    columnDefs: [
        { name: 'A', width: '50%', enableCellEdit: true },
        { name: 'B', width: '50%', enableCellEdit: true }
    ],
    data: [{
        "A": 65,
        "B": 28
    },
    {
        "A": 59,
        "B": 48
    },
    {
        "A": 80,
        "B": 40
    },
    {
        "A": 81,
        "B": 19
    },
    {
        "A": 56,
        "B": 86
    },
    {
        "A": 55,
        "B": 27
    },
    {
        "A": 40,
        "B": 90
    }
    ]
};

var seriesA = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
    seriesA.push($scope.gridOptions.data[i].A);
}

console.log(seriesA);

var seriesB = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
    seriesB.push($scope.gridOptions.data[i].B);
}

console.log(seriesB);

$scope.data = [
        seriesA,
        seriesB
];


$scope.onClick = function (points, evt) {
    console.log(points, evt);
};
});

Here's the HTML snippet:

<div id="grid1" class="panel" ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="grid"></div>
<canvas id="line" class="chart chart-line" data="data"
    labels="labels" legend="true" series="series"
    click="onClick"></canvas>

score 0 · Answer 1 · answered Aug 12 '15 at 01:40

0

Just specify data="gridOptions.data" in your canvas and it will automatically update when there is a change in data.

answered Aug 12 '15 at 01:40

GSP59

413
5
10

In the debugger I see that the chart is "trying" to be updated, but I am seeing a "Uncaught TypeError: Cannot read property 'draw' of undefined" error when I do that. I think the problem is gridoptions.data is in json format and chartjs is looking for an array format. – Dynos Aug 12 '15 at 03:43
Yes that's the problem ! – GSP59 Aug 12 '15 at 10:09

potatopeelings · Accepted Answer · 2015-08-18T13:42:54.143

You are setting data only once. All you need to do to make this dynamic is point it to a scope method that calculates data from the grid data, like so

Script change

Define a function to calculate the chart data structure from the grid data. Use this to initialize the graph and also update the graph when after cell edit is complete

var getData = function () {
    var seriesA = [];
    for (var i = 0; i < $scope.gridOptions.data.length; i++) {
        seriesA.push($scope.gridOptions.data[i].A);
    }

    console.log(seriesA);

    var seriesB = [];
    for (var i = 0; i < $scope.gridOptions.data.length; i++) {
        seriesB.push($scope.gridOptions.data[i].B);
    }

    console.log(seriesB);

    return [
        seriesA,
        seriesB
    ];
}

$scope.data = getData();

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
    gridApi.edit.on.afterCellEdit($scope, function () {
        $scope.data = getData();
    });
};

Now, editing the grid entries will automatically update the chart.

Solution makes sense. However, it seems to be getting into an infinite loop in angularjs. — Dynos, Aug 18 '15 at 12:44

Making angular-chartjs responsive with UI-Grid

2 Answers2