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 — Brave Soul
– Brave Soul, Commented Jan 25, 2017 at 9: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
– Aung Satt, Commented Jan 25, 2017 at 9: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
– Taree, Commented Jan 25, 2017 at 9: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
– Fissio, Commented Jan 25, 2017 at 9:10

Taree · Accepted Answer · 2017-01-30 08:48:10Z

1

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(){
    ...
});

answered Jan 30, 2017 at 8:48

Taree

615 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 25, 2017 at 11:25

Lucas Araujo

1,68816 silver badges25 bronze badges

2 Comments

Taree Over a year ago

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?

Lucas Araujo Over a year ago

Yes, stackoverflow.com/questions/41545742/…

Collectives™ on Stack Overflow

Set Scope in Angular-Charts.js after rendering

2 Answers 2

Comments

Example:

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Example:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related