CODEWITHSUNDEEP
javascriptangularjs
Ritesh Kashyap
Ritesh Kashyap

Reputation: 394

dynamic style for google-chart

I am trying to dynamically update the width and height of a google-chart directive using values from input fields. The width and height is not being updated.

Plunker

$scope.height = "300"
$scope.width = "300"
$scope.cssStyle = "height:" + $scope.height+ "px; height:" + $scope.width + "px";

Upvotes: 1

Views: 161

Answers (4)

m59
m59

Reputation: 43745

You have a typo in the style declaration:

//"height:" + $scope.height+ "px; height:" + $scope.width + "px";
  "height:" + $scope.height+ "px; width:" + $scope.width + "px";

$scope.cssStyle won't be continually updated as $scope.height and $scope.width change. To fix that, you can turn $scope.cssStyle into a function that returns the calculation.

<div google-chart chart="chart" style="{{cssStyle()}}"/>

$scope.cssStyle = function() {
  return "height:" + $scope.height+ "px; width:" + $scope.width + "px";
};

With that, the cssStyle is updating as you desire, but the google-chart directive doesn't seem to update with the new parameters. You can hack around that by removing it from the DOM and re-adding it.

<div ng-if="on" google-chart chart="chart" style="{{cssStyle}}"/>

$scope.$watch(function() {
  // watch this for changes
  return "height:" + $scope.height+ "px; width:" + $scope.width + "px";
}, function(style) {
  // there is a new style
  $scope.on = false; // remove chart
  $timeout(function() {
    // trigger another digest cycle to add chart with new style
    $scope.cssStyle = style;
    $scope.on = true;
  });
});

Click here for live demo.

Credit to Sarjan's answer - he found the best way to update the google-chart dimensions is by using the options property of the chart object. The directive watches that object and responds to changes.

Upvotes: 0

Sarjan Desai
Sarjan Desai

Reputation: 3733

Use chart.options for updating google-chart property like title, width, height etc.

By changing value of chart.options there is no need to change width and heigth of div.

Use ng-change for updating value of chat.options

Update input element by adding ng-change

<input type="text" value="300px" ng-change="change()" ng-model="width"/>
<input type="text" value="300px" ng-change="change()" ng-model="height"/>

Add below change() function to controller

$scope.change = function() {
   $scope.chart.options = {
      height: $scope.width,
      width: $scope.height,
  };
}

Check updated plunkr

Upvotes: 2

Raju Bera
Raju Bera

Reputation: 1018

Basically what is happening is you cssStyle property is one way binding so what you need to do is you need to calculate the css style property on width or height property as following:

$scope.$watchGroup(["width", "height"], function(newValues, oldValues){
    $scope.cssStyle = "height:" + $scope.height+ "px; width:" + $scope.width + "px";
  })

Note: Upgarde your angular to 1.3.0 then you will get the $watchGroup method for scope. Check the plunker: http://plnkr.co/edit/WEe3rPzapIBz3uhoGabI?p=preview

Upvotes: -1

windupurnomo
windupurnomo

Reputation: 1190

Typo in 3rd line?

$scope.cssStyle = "height:" + $scope.height+ "px; height:" + $scope.width + "px";

to be

$scope.cssStyle = "height:" + $scope.height+ "px; width:" + $scope.width + "px";

Upvotes: 0

Related Questions