Commit c6854aaf authored by Chris Andrews's avatar Chris Andrews
Browse files

The canvas used by smoothie chart will now resize correctly on browser zoom in and out fixing #375.

parent a8166110
...@@ -440,7 +440,7 @@ ...@@ -440,7 +440,7 @@
/** /**
* Fetches and displays data as line chart at a certain refresh rate * Fetches and displays data as line chart at a certain refresh rate
*/ */
angular.module('linuxDash').directive('lineChartPlugin', ['$interval', '$compile', 'server', function($interval, $compile, server) { angular.module('linuxDash').directive('lineChartPlugin', ['$interval', '$compile', 'server', '$window', function($interval, $compile, server, $window) {
return { return {
restrict: 'E', restrict: 'E',
scope: { scope: {
...@@ -458,7 +458,12 @@ ...@@ -458,7 +458,12 @@
if (!scope.color) scope.color = '0, 255, 0'; if (!scope.color) scope.color = '0, 255, 0';
var series; var series, w, h, canvas;
angular.element($window).bind('resize', function() {
canvas.width = w;
canvas.height = h;
});
// smoothieJS - Create new chart // smoothieJS - Create new chart
var chart = new SmoothieChart({ var chart = new SmoothieChart({
...@@ -486,8 +491,10 @@ ...@@ -486,8 +491,10 @@
}); });
// smoothieJS - set up canvas element for chart // smoothieJS - set up canvas element for chart
canvas = element.find('canvas')[0]; canvas = element.find('canvas')[0];
series = new TimeSeries(); series = new TimeSeries();
w = canvas.width;
h = canvas.height;
chart.addTimeSeries(series, { chart.addTimeSeries(series, {
strokeStyle: 'rgba(' + scope.color + ', 1)', strokeStyle: 'rgba(' + scope.color + ', 1)',
...@@ -550,7 +557,7 @@ ...@@ -550,7 +557,7 @@
* Fetches and displays data as line chart at a certain refresh rate * Fetches and displays data as line chart at a certain refresh rate
* *
*/ */
angular.module('linuxDash').directive('multiLineChartPlugin', ['$interval', '$compile', 'server', function($interval, $compile, server) { angular.module('linuxDash').directive('multiLineChartPlugin', ['$interval', '$compile', 'server', '$window', function($interval, $compile, server, $window) {
return { return {
restrict: 'E', restrict: 'E',
scope: { scope: {
...@@ -564,6 +571,13 @@ ...@@ -564,6 +571,13 @@
templateUrl: 'templates/app/multi-line-chart-plugin.html', templateUrl: 'templates/app/multi-line-chart-plugin.html',
link: function(scope, element) { link: function(scope, element) {
var w, h, canvas;
angular.element($window).bind('resize', function() {
canvas.width = w;
canvas.height = h;
});
// smoothieJS - Create new chart // smoothieJS - Create new chart
var chart = new SmoothieChart({ var chart = new SmoothieChart({
borderVisible: false, borderVisible: false,
...@@ -603,9 +617,11 @@ ...@@ -603,9 +617,11 @@
}]; }];
// smoothieJS - set up canvas element for chart // smoothieJS - set up canvas element for chart
var canvas = element.find('canvas')[0]; var canvas = element.find('canvas')[0];
scope.seriesArray = []; w = canvas.width;
scope.metricsArray = []; h = canvas.height;
scope.seriesArray = [];
scope.metricsArray = [];
// get the data once to set up # of lines on chart // get the data once to set up # of lines on chart
server.get(scope.moduleName, function(serverResponseData) { server.get(scope.moduleName, function(serverResponseData) {
......
<line-chart-plugin <line-chart-plugin
heading="CPU Utilization" heading="CPU Utilization"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment