I have been attempting to dynamically adjust the width and height of a google-chart directive by utilizing input field values. However, I am encountering an issue where the width and height are not updating as expected.
$scope.height = "300"
$scope.width = "300"
$scope.cssStyle = "height:" + $scope.height+ "px; height:" + $scope.width + "px";
To modify the properties of a google-chart, such as the title, width, and height, use the chart.options.
Changing the values within chart.options eliminates the need to adjust the width and height of the div element.
Utilize ng-change to update the values stored in chart.options.
Enhance the input elements by including the ng-change attribute.
<input type="text" value="300px" ng-change="change()" ng-model="width"/>
<input type="text" value="300px" ng-change="change()" ng-model="height"/>
Add the following change() function to your controller:
$scope.change = function() {
$scope.chart.options = {
height: $scope.width,
width: $scope.height,
};
}
View the updated version on Plunker
Is there a mistake in the third line?
$scope.cssStyle = "height:" + $scope.height+ "px; height:" + $scope.width + "px";
You should change it to:
$scope.cssStyle = "height:" + $scope.height+ "px; width:" + $scope.width + "px";
There is a mistake in the style declaration that you have:
//"height:" + $scope.height+ "px; height:" + $scope.width + "px";
"height:" + $scope.height+ "px; width:" + $scope.width + "px";
The values for $scope.cssStyle are not being updated consistently when $scope.height and $scope.width change. To resolve this issue, you can convert $scope.cssStyle into a function that calculates the styles dynamically.
<div google-chart chart="chart" style="{{cssStyle()}}"/>
$scope.cssStyle = function() {
return "height:" + $scope.height+ "px; width:" + $scope.width + "px";
};
Even with these changes, it seems like the google-chart directive does not update with the new parameters. One workaround is to remove it from the DOM and then add it back again.
<div ng-if="on" google-chart chart="chart" style="{{cssStyle}}"/>
$scope.$watch(function() {
// Watch for changes
return "height:" + $scope.height+ "px; width:" + $scope.width + "px";
}, function(style) {
// New style detected
$scope.on = false; // Remove chart
$timeout(function() {
// Trigger another digest cycle to re-add chart with new style
$scope.cssStyle = style;
$scope.on = true;
});
});
Here is a live demo for reference.
Credit goes to Sarjan's answer - he discovered that the best way to update the dimensions of the google-chart is by utilizing the options property within the chart object. This approach allows the directive to monitor the object and react to any changes accordingly.
Essentially, the issue here is that the cssStyle property is set up as a one-way binding. To resolve this, you need to dynamically calculate the css style based on the width or height property like so:
$scope.$watchGroup(["width", "height"], function(newValues, oldValues){
$scope.cssStyle = "height:" + $scope.height+ "px; width:" + $scope.width + "px";
})
Important: Update your Angular version to 1.3.0 in order to access the $watchGroup method for scope.
You can view the working example on Plunker here: http://plnkr.co/edit/WEe3rPzapIBz3uhoGabI?p=preview
When using disableElements in the setQuickBarPanelContents() function, I am able to remove 2 of the 3 panels from the leftPanel: setQuickBarPanelContents() { this.instance.disableElements(['notesPanel', 'notesPanelButton', &apos ...
Struggling to make chart.js work with a time axis is proving to be quite challenging for me. The code I have is as follows: <html> <head> <script src="https://cdn.jsdelivr.net/npm/moment"></script> <script src="https://cdnjs.clo ...
My login system uses a combination of ajax and php. The form validation is handled through javascript, with the form data then being sent to php for database checks. In the past, this method has worked well for me, but in this instance, it seems 'NOTH ...
Hi, I'm having difficulty fetching the two attributes under CategoryImage in the second level of the JSON array parsing. Can someone help me with this? Thank you. <script> $(document).ready(function() { var cat=""; ...
I am currently working on an angular project to create a sorting visualizer. My goal is to generate a visual representation of an array consisting of random numbers displayed as bars using divisions. Each bar's width will correspond to the value of th ...
As I embark on this React project, things are progressing smoothly. However, a challenge has arisen. The functionality I aim for is as follows: When the checkbox in a row is clicked, I want that particular row to be deleted. For instance, selecting checkb ...
I need assistance finding a solution to my question. Can my friends help me out? What types of requests do I receive: facebook, linkedin, reddit I want to simplify my code and avoid writing lengthy blocks. How can I create a check loop to send the same ...
I am in the process of transferring an existing slider from one website to another. Instead of creating a text slider from scratch, I decided to modify the code I found for the new site. However, the slider is not functioning correctly on the new site. Th ...
I'm currently working on a NextJs project that involves building an editor application. I want to ensure that the editor functionality does not work when users attempt to save the page in a different format, similar to how applications like Youtube an ...
Our email server configuration using Nodemailer SMTP settings looked like this: host: example.host port: 25 pool: true maxConnections: 2 authMethod: 'PLAIN' auth: user: 'username' pass: 'pass' We encou ...
My custom helper functions are stored in a JavaScript file called classie.js: ( function( window ) { 'use strict'; function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } var hasClass, ...
I'm working with checkboxes to toggle the visibility of specific rows in a table based on their content matching the selected checkbox values. Checkboxes: <input type='checkbox' name='foo1' value='foo1' v-model="sele ...
I recently noticed on that I am able to zoom/enlarge a photo by clicking on it. Is there a way for me to incorporate this feature without purchasing the entire theme? While I understand the theme is designed for purchase, I only need this specific functi ...
Currently facing an issue with zod validation in my Node.js environment, specifically encountering the error: TypeError: schema.parseAsync is not a function Despite attempting various solutions like re-importing and troubleshooting, I am unable to resol ...
Currently, I am tackling a project using Next JS 13 and came across an issue pertaining to server actions. While server actions can be directly applied on form or button components, my personal preference is to define server components in separate files an ...
I'm currently conducting test cases for my API using Chai, Mocha, and Chai HTTP. Even when I return a response of 500, my test case is still passing. Below is my test case: describe('/POST saveBatch', () => { it('it should save ...
I want to create a feature where when a user clicks down, something specific occurs. The sequence of events includes: An action taking place (which is not the focus here). Triggering a mouse up event. Implemented with: angular, html, css. Excludes: jQue ...
After executing npm install @types/js-cookie@^2.2.0, an error occurred: npm install @types/js-cookie@^2.2.0 npm ERR! code E401 npm ERR! Unable to authenticate, need: Basic realm="https://pkgsprodsu3weu.app.pkgs.visualstudio.com/" npm ERR! A com ...
My code includes an AJAX function to delete items by row. In my table, there is a column with the action to perform the deletion. Here is the AJAX function: //delete detail function deleteDetail(id_po_req_detail) { var tr = ...
Consider the following HTML code: <div class="form-group"> <label class="col-md-3 col-xs-3 col-sm-3 control-label">Phone</label> <div class="col-md-4 col-xs-4 col-sm-4"> <input id="input ...