Adjust the Scope in Angular-Charts.js Post-Rendering

Question

Adjust the Scope in Angular-Charts.js Post-Rendering

I am currently facing a challenge with displaying multiple charts using the angular-charts.js framework. The issue is that I require all the charts to have the same scale, but each chart currently has its own scale based on the displayed data. Unfortunately, I cannot predict the data beforehand, so I am looking for a solution that involves a Callback function...

Is there any way to achieve this?

Working with 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 function calculates Data for each individual chart based on index number

javascript angularjs chart.js

Answer 1

Answer №1

After much trial and error, I have finally discovered a solution to my challenges.

To address the issue, I implemented a parent controller to manage the scaling variable and utilized $watch expressions in my child controllers to update each chart accordingly.

Parent Controller:

$scope.maximumValue = 0;

    $scope.updateMaximum = function(value){
        $scope.maximumValue = Math.max($scope.maximumValue, value);
        console.log($scope.maximumValue);
    }

Child Controller:

$scope.$watch('maximumValue',function(){
    // code to rerender charts
});

Answer 2

After much trial and error, I have finally discovered a solution to my challenges.

To address the issue, I implemented a parent controller to manage the scaling variable and utilized $watch expressions in my child controllers to update each chart accordingly.

Parent Controller:

$scope.maximumValue = 0;

    $scope.updateMaximum = function(value){
        $scope.maximumValue = Math.max($scope.maximumValue, value);
        console.log($scope.maximumValue);
    }

Child Controller:

$scope.$watch('maximumValue',function(){
    // code to rerender charts
});

Answer 3

Answer №2

After rendering a chart, if you want to modify its options, make sure to use the update function.

.update(duration, lazy)

This function triggers an update of the chart. It is safe to call this after completely replacing the data object. It will update all scales, legends, and then re-render the chart.

Documentation

For example:

// Define duration as the animation time for redrawing in milliseconds
// Lazy is a boolean value. If true, the animation can be interrupted by other animations

// Update the value of 'March' in the first dataset to 50
myLineChart.data.datasets[0].data[2] = 50;

// Calling the update function will animate the change from 90 to 50 for the position of March.
myLineChart.update();

Answer 4

After rendering a chart, if you want to modify its options, make sure to use the update function.

.update(duration, lazy)

This function triggers an update of the chart. It is safe to call this after completely replacing the data object. It will update all scales, legends, and then re-render the chart.

Documentation

For example:

// Define duration as the animation time for redrawing in milliseconds
// Lazy is a boolean value. If true, the animation can be interrupted by other animations

// Update the value of 'March' in the first dataset to 50
myLineChart.data.datasets[0].data[2] = 50;

// Calling the update function will animate the change from 90 to 50 for the position of March.
myLineChart.update();

Adjust the Scope in Angular-Charts.js Post-Rendering

Answer №1

Answer №2

For example:

Similar questions

Create a regular expression in Javascript that only matches strings that do not contain any periods

Where should data processing be conducted: in the service or controller layer?

Which should take precedence in a URL: the hash or the querystring?

The string obtained from input.getAttribute('value') is lacking one character

Determining if a specific time falls within a certain range in JavaScript

The Stripe payment form effortlessly updates in real-time thanks to the powerful @stripe/react-stripejs module

Issue with PHP Upload: Index is undefined

Customize the text color of the active tab in Material-UI Tabs

Perform an additional HTTP request and utilize the response within the existing Observable

Mobile phone web development using HTML5

Interested in learning how to utilize tabs for a carousel?

Build a Google Map Widget within SurveyJs

How can multiple functions be grouped and exported in a separate file in Node.js?

Unable to utilize the .keyCode method within a query selector

In Firefox, there is a peculiar issue where one of the text boxes in an HTML form does not display

Ways to thwart CSRF attacks?

Tips for signaling to an AngularJS form that the input value has been altered

Adjusting the transparency of each segment within a THREE.LineSegments object

Notify when the focus is solely on the text box

Error: Trying to access "dishes" property on an undefined object gives a TypeError