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

javascriptangularjschart.js

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 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();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the main icon in the Windows 10 Action Center through a notification from Microsoft Edge

I am facing an issue with setting the top icon of a notification sent from a website in Microsoft Edge. Let's consider this code as an example: Notification.requestPermission(function (permission) { if (permission == "granted") { new ...

javascripthtmlnotificationswindows-10microsoft-edge

The "model" feature appears to be inactive

I discovered a fiddle with a simple radio button functionality that I forked and made some modifications to. The changes worked perfectly, you can check it out in this fiddle: Vue.component('radio-button', { props: ['id', 'v ...

javascriptvue.jsvuejs2

What can be done to stop the event handler from executing?

My goal is to verify a user's authentication every time they click on a button. If the user happens to be logged out and tries to click on a button, they should be redirected back to the home page. The issue I'm facing is that the code after the ...

phpjavascriptjquery

The setter function for a boolean value in React's useState hook is malfunctioning

I encountered an issue while trying to update a state value using its setter from the useState hook. Surprisingly, the same setter worked perfectly in a different function where it set the value to true. To confirm that the function call was correct, I te ...

javascriptreactjs

Change a portion of the CSS background-image URL using vanilla JavaScript for a set of pictures

My current code successfully updates part of an src URL for regular images. let svgz = document.querySelectorAll(".svg"); for (let i = 0; i < svgz.length; i++) { svgz[i].src = svgz[i].src.replace("light", "dark"); } Now, ...

javascriptcss

Associate a unique identifier string with a randomly generated integer identifier by Agora

For my current web project, I am utilizing a String username as the UID to connect to the channel in an Agora video call. However, I now need to incorporate individual cloud recording by Agora into the project. The challenge lies in the fact that cloud r ...

javascripttypescriptwebagora.io

Popup Triggered by a JavaScript Timer

Seeking assistance in creating a straightforward timer-based popup. Once the timer hits 10 seconds, the popup should become visible. The timer should pause or stop, and after clicking the 'ok' button on the popup, the timer should reset to 0. Can ...

javascriptjquery

Transitioning menus in Ionic 2

I followed the instructions in the Ionic 2 menu documentation and tried to display the menu in a specific way: My intention was to have the menu displayed below the content page while keeping the menu button visible. However, when I ran my app, it appear ...

javascriptnode.jstypescriptmenuionic2

Utilizing React JS to dynamically adjust the z-index upon clicking a component

My goal is to create a functionality where clicking on a box will move it to the top, with the previous box now underneath. For a better understanding, please refer to the following code snippet. https://codesandbox.io/s/optimistic-payne-4644yf?file=/src/ ...

javascriptreactjsdynamicfunctional-programming

Having difficulty retrieving the element's identifier

I am facing an issue with the following directive, as I am attempting to retrieve the element and attribute id but it is returning undefined. Here is the code snippet: 'use strict'; angular.module('clientApp') .directive('myVid ...

angularjsangularjs-directive

Accessing form objects in Typescript with AngularJS

I am currently working with AngularJS and Typescript. I have encountered an issue while trying to access the form object. Here is the HTML snippet: <form name="myForm" novalidate> <label>First Name</label> <input type="text" ...

javascriptangularjstypescript

Tips for customizing the font color in Material UI Typography

Is it possible to change the color of only this text to red? return <Typography style={{ color: 'red' }}>Login Invalid</Typography> I came across this online solution, but I am unsure how to implement it as there is no theme={color ...

javascriptreactjstypescriptmaterial-uitypography

Convert object to JSON format using AJAX request to a PHP file

Despite receiving a 200 green response, my data is still not getting written to the json file and it remains blank. The JavaScript: $(function() { $('form#saveTemp').submit(function() { let savdAta = JSON.stringify($('form#save ...

javascriptphpjsonajax

Steps to include a personalized function in a Mongoose Model

One way to extend Mongoose is by adding methods to documents. Here's an example: const userSchema = new mongoose.Schema({ balance: Number }) userSchema.methods.withdrawBalance = function(amount){ const doc = this doc.balance = doc.balance - amou ...

javascriptnode.jsmongodbmongoose

CSS: Problem Arising from Line Connections Between Tree Elements

I'm currently working on connecting tree nodes with lines in a drawing. I've managed to achieve it to some extent, but there are a few issues like dangling lines that I need to fix. You can find the implementation on codepen here: https://codepe ...

javascripthtmlcssvue.jssass

Develop a unique method for loading AngularJS templates

When working with AngularJS, there are various ways to provide an external template, such as using a script tag or a separate HTML file on the web server. However, I am faced with a situation where I need to implement a custom logic for retrieving these ...

javascriptangularjstemplatesangular-templatecache

Live events are not showing up upon page load, but they work flawlessly on the local server

I am currently developing a project using Laravel and Angular. In this project, I am implementing the angular ui-calendar as well as utilizing the jQuery context menu plugin to create dynamic menus for each event. The versions I am working with are fullca ...

jqueryangularjslaravelui-calendar

Implementing automatic line breaks in Bootstrap

When setting the "overflow scroll able" option, I want it to only allow scrolling in the y direction and if x content overflows, a line break should occur. I tried applying 'white-space', but it didn't work as expected. <ul class="s ...

javascriptjqueryhtmlcssbootstrap-4

Error: Authentication Error - Headers have already been sent to the client and cannot be modified

I am currently working on handling authentication errors for my website. However, when I submit incorrect data, I encounter the following error: node:internal/errors:478 ErrorCaptureStackTrace(err); ^ Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers aft ...

javascriptexpress

Creating a dynamic HIIT program with an autoplay feature for videos and images, using a jQuery/JavaScript slider "playlist" with the backend support of

I am currently exploring the idea of developing a countdown timer that incorporates videos. In order for this timer to function effectively, it must be able to retrieve data such as countdown time, break time, number of sets, and video (or images if no vid ...

javascriptphpjquerymysql