dynamic style for google-chart

Question

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";

Answer 1

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

Answer 2

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";

Answer 3

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.

Answer 4

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