Set Scope in Angular-Charts.js after rendering

Question

Hi im currently trying to show multiple charts with angular-charts.js framework. My problem is that i need the same scale on each chart. At the moment each chart has its own scale based upon the data displayed. I can not predict the data before the charts are rendered. So I need something like a Callback function...

Is there any solution?

Using Angular 1.6.1

EDIT:

$scope.options = {
                  scales: {
                    yAxes: [{
                            ticks: { min: 0, max: },
                              }]
                  }
                };

Markup:

<div ng-repeat="i in getNumberOfSprints(numberOfSprints) track by $index">
                <h3>
                    Sprint {{$index+1}}
                </h3>
                <div ng-controller="MyCtrl">
                    <canvas class="chart-bar"
                      chart-data="GetData($index)"
                      chart-dataset-override="datasetOverride" chart-options="options">
                    </canvas> 
                </div>
            </div>

GetData calculates Data for each chart based on index

you tried services and factories ?? and create a single object of chart and create object aray and assign the same property of scale to each chart with angular.each — Ameya Deshpande, Jan 25 '17 at 09:06
You should have better separate your architecture, between rendering and updating date. First, render your chart, then update with your data to chart. You can decide your trigger for updating data to chart. — Aung Satt, Jan 25 '17 at 09:07
Data for each chart is calculated by a function in a service. I can use a property for the scale but changes are not assumend by the chatrs — Taree, Jan 25 '17 at 09:08
Add your code - other than that, the only advice we can give you is calculate your numbers first, and draw the charts afterwards. — Fissio, Jan 25 '17 at 09:10

score 1 · Answer 1 · answered Jan 30 '17 at 08:48

I finally found a solution for my Problems.

I used a parent-controller to store my scale variable and in my Child Controllers a $watch expression to rerender each chart.

Parent:

$scope.max = 0;

    $scope.setMax = function(val){
        $scope.max = Math.max($scope.max, val);
        console.log($scope.max);
    }

Child:

$scope.$watch('max',function(){
    ...
});

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

When you change a chart's option after it was render, you need to call the update function.

.update(duration, lazy)

Triggers an update of the chart. This can be safely called after replacing the entire data object. This will update all scales, legends, and then re-render the chart.

Documentation

Example:

// duration is the time for the animation of the redraw in milliseconds
// lazy is a boolean. if true, the animation can be interrupted by other animations
    
// Would update the first dataset's value of 'March' to be 50
myLineChart.data.datasets[0].data[2] = 50; 
    
// Calling update now animates the position of March from 90 to 50.
myLineChart.update();

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 25 '17 at 11:25

Lucas Araujo

1,648
16
25

I tried this solution but for some reason Im not able to access my chart-element properly. Is there a way to get not just the dom-element, but the Charts-Object? – Taree Jan 30 '17 at 08:33
Yes, http://stackoverflow.com/questions/41545742/getting-access-to-already-created-chart-js-chart/41575491#41575491 – Lucas Araujo Jan 30 '17 at 10:19

Set Scope in Angular-Charts.js after rendering

2 Answers2

Example: