examples/example-custom-resize.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="width:100%;height:100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script>var CANV_GAUGE_FONTS_PATH = '../fonts'</script>
    <script src="../gauge.min.js"></script>
    <style>body{padding:0;margin:0;background:#222}</style>
</head>
<body style="width:100%;height:100%">
<canvas id="temp-gauge"></canvas>
<div id="console"></div>
<script>
    var tempGauge = new Gauge({
        renderTo: 'temp-gauge',
        width: 380,
        height: 380,
        glow: true,
        units: '°C',
        title: 'Temperature',
        minValue: -10,
        maxValue: 50,
        majorTicks: [ -10, 0, 10, 20, 30, 40, 50 ],
        minorTicks: 10,
        strokeTicks: false,
        highlights: [
            { from: -10, to: 0, color: 'rgba(0, 0, 255, .3)' },
            { from: 0, to: 10, color: 'rgba(0, 0, 255, .1)' },
            { from: 30, to: 35, color: 'rgba(255, 255, 0, .3)' },
            { from: 35, to: 50, color: 'rgba(255, 0, 0, .3)' }
        ],
        colors: {
            plate: '#f5f5f5',
            majorTicks: '#666',
            minorTicks: '#888',
            title: '#444',
            units: '#000',
            numbers: '#222',
            needle: {
                start: 'rgba(240, 128, 128, 2)',
                end: 'rgba(255, 160, 122, .9)'
            }
        },
        animation: {
            duration: 500,
            fn : 'linear'
        },
        valueFormat: {
            int: 2,
            dec: 1
        }
    });

    tempGauge.onready = function() {
        tempGauge.setValue(0);
    };

    tempGauge.draw();

    $(window).resize(function() {
        if ($(window).width() < 1200) {
            tempGauge.updateConfig({ width: 300, height: 300 });
        } else {
            tempGauge.updateConfig({ width: 380, height: 380 });
        }
    });
</script>

</html>