2

I am using angularjs-gridster (https://github.com/ManifestWebDesign/angular-gridster) with higharts-ng directive (https://github.com/pablojim/highcharts-ng/blob/master/README.md)

I am trying to generate these highcharts inside the grid cells. My problem is that the highcharts are occupying their default width and height (600px * 400px) even when i place my graph drawer function in a $timeout service. Here's the code:

HTML:

<div class="graph-list" gridster="gridsterOpts">
  <ul>
    <li gridster-item="graph.grid" class="graph-set" ng-repeat="graph in graphs | orderBy: 'number'">
      <highchart id="{{'graph' + graph.number}}" class="graph" config="graph.config"></highchart>
    </li>
  </ul>
</div>

JS:

// inside the graph-list div controller 
$scope.gridsterOpts = {
    colums: 4,
    rowHeight: 240,
    margins: [10,10],
    outerMargin: false,
    draggable: {
      enabled: false // whether dragging items is supported
    }
};
$scope.graphs = {}; //
$scope.somefunction(){ /* this function populates the graphs object */ }; 
function drawGraphs(){ /* this function populates the graph.config object by looping through all the graph objects */ }
$timeout(function(){
    drawGraphs(); 
});

I have tried creating watch on the grid-cell width and height but it shows no change. I have not given the highchart width and height explicitly in the graph.config options because I read in the highcharts-ng documentation that it takes the parent width and height by default but its not happening. Can anyone guide me what could be the possible problem.

Seems to me that the angularjs-gridster plugin is not able to set the grid width and height before the highcharts directive is able to render itself. Please help.

Mohit Srivastava
  • 1,909
  • 1
  • 13
  • 18

1 Answers1

1

I eventually did it. I needed to add the chart.reflow() method (which just resizes the chart instead of redrawing it so better performance wise also, I guess) in the func() options as provided in the highcharts-ng documentation.

graph.config = {
  options: { },
  series: [],
  func: function (chart) {
    $timeout(function(){
      chart.reflow();
    })
  } 
}

Hope it helps someone else.

Mohit Srivastava
  • 1,909
  • 1
  • 13
  • 18
  • It kind of does yes thanks. However my graph is now 100px*100px. Have you seen this behavior at some point? – neric Feb 13 '15 at 11:34
  • Probably its because of your wrappers height and width, check that in the gridster options – Mohit Srivastava Feb 13 '15 at 11:38
  • Managed to solve my issue: Turned out I had to reflow the chart after 100ms: `timeout(function() { chart.reflow(); }, 100);` and draw the series after 500ms: `$timeout($scope.addSeries, 500); ` This way I get to keep the loading/drawing animation too. Thanks! – neric Feb 13 '15 at 12:45