Float Chart with Angular Resize
I have a graphics card displaying successfully in my HTML using angular directive. It looks like this:
<flot id="placeholder" dataset="dataset" options="options" height="300px" width="100%" style="width:100%;" ng-disabled="graphLoading" ng-class="{disabled:graphLoading}"></flot>
I watch the window resize and then want to resize the fleet map as it doesn't do it automatically.
However, resetting the datasource doesn't work and I lost it a bit to try the next.
window.onresize = function(event) {
console.log('refresh size of flot chart');
refreshDataset();
}
Just look for direction or ideas on things that I can try to debug or test to find a solution. There seems to be a jquery solution here http://jsfiddle.net/9x7aJ/2029/ , but I'm trying to find a corner location solution.
source to share
In response to my own question, the best solution was to use the flot.resize.js plugin for float. I originally included it in my index.html file, but I needed to include it in the actual html file to view the controllers in order to access it due to the nature of angularJS (I'm still learning). So I dropped jquery.flot.resize.js into my project, calling it like this:
<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 bottom technical solution was to be a screen refresh on resize, but the resize plugin was much more elegant.
Lower technical solution:
window.onresize = function(event) {
window.location.reload();
}
source to share