Making the gauge responsive

[ankgt]

Hi,

This gauge is awesome! I am using this with Bootstrap, and wanted some tips on how I could make it responsive. For example, if placed in a div with class "col-xs-12 col-md-6" it should adjust as the div class changes based on the window size.

Thanks!

[ashish-chopra]

Thanks for liking it. Do star or fork the project.

Gauge is built using canvas and the canvas is given absolute size as of now using size property. So the gauge is not responsive as per current implementation. But if you can add the responsive feature to it, I am happy to accept the pull request for the same.

Make sure to discuss your approach here so that we can refine it before sending the pull request. I am not sure when I will add that feature on my own, as currently, I am quite occupied.

Thanks

[tmontanaro]

I partially solved the problem in this way:

HTML code

<div id="gauge-container" ng-controller="gaugeController as ctrl">
        <ng-gauge size="{{getBlockSizeForGauge()}}" type="full" thick="5" min="0" max="100" value="getValue()" cap="round" label="" append="%"></ng-gauge>
</div>

Javascript code

'use strict';
// create the gauge module
var gaugeModule = angular.module('gaugeModule', []);
// the module controller
gaugeModule
    .controller(
        'gaugeController',
        [
            '$scope',
            '$rootScope',
            function ($scope, $rootScope) {
                $scope.getBlockSizeForGauge = function()
                {
                    var dimension = document.getElementById("gauge-container").offsetWidth;
                    return dimension;
                }
            }]);

[TristanBrotherton]

• 1 for this feature

[ghost]

I did something similar

HTML

<ng-gauge id="{{gauge.id}}"
        label="{{gauge.label}}" 
        value="gauge.value" 
        type="{{gauge.type}}" 
        thick="{{gauge.thick}}" 
        duration="{{gauge.duration}}" 
        append="{{gauge.append}}" 
        thresholds="gauge.thresholds"
        size="{{gauge.calculateGaugeSize(200)}}" >
</ng-gauge>

(note size attribute)

JS

$scope.gauge.calculateGaugeSize = function (size) {
        // detect gauge div
        var gaugeDiv = document.getElementById($scope.gauge.id);
        // check if gauge div exists and have "dimensions"
        if (gaugeDiv && 
            gaugeDiv.offsetWidth && 
            gaugeDiv.offsetWidth > 0 && 
            gaugeDiv.offsetHeight && 
            gaugeDiv.offsetHeight > 0) {
                var min = Math.min(gaugeDiv.offsetWidth, gaugeDiv.offsetHeight);
                // set size as 80% of his div container (that have relative dimension setted in css)
                return min * 80 / 100;
        }
        // if gauge div dont exist 
        else { 
                // if default size passed as parameter, set it
                if (size) {
                        return size;
                } 
                // if default size NOT passed as parameter, set 100
                else { 
                        return 100; 
                }
        }
};