Flot Chart with Angular Resize

Question

I have a flot chart successfully displayed in my HTML using a angular directive. It looks like:

<flot id="placeholder" dataset="dataset" options="options" height="300px" width="100%" style="width:100%;" ng-disabled="graphLoading" ng-class="{disabled:graphLoading}"></flot>

I watch for a window resize and then wish to resize the flot chart, as it doesn't do so automatically.

However resetting the datasource doesnt work and I'm somewhat lost as to what to try next.

window.onresize = function(event) {
  console.log('refresh size of flot chart');
  refreshDataset();
}

Just looking for direction, or ideas on things I can try to debug or test to find a solution. It does seem that there is a jquery solution here http://jsfiddle.net/9x7aJ/2029/ , but I'm trying to find a angularJS solution.

Answer 1

In answer to my own question, the best solution was to use the flot.resize.js plugin for flot charts. I had initially included it in the index.html file, but needed to include it in the actual controllers view html file for it to get accessed, due to the nature of angularJS (I'm still learning). So I dropped the jquery.flot.resize.js into my project an referenced it like so:

<script src="scripts/jquery.flot.min.js" cache="false"></script>
<script src="scripts/jquery.flot.time.js" cache="false"></script>
<script src="scripts/jquery.flot.resize.js" cache="false"></script>

The lower tech solution, was going to be a screen refresh on resize, but the resize plugin was much more elegant.

Lower tech solution:

window.onresize = function(event) {
    window.location.reload();
}