jQuery Gauge

Set the int64 property of the jqxGauge. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bignumber.js/8.0.2/bignumber.js"></script>
<div id="gaugeContainer"></div>

JavaScript

$('#gaugeContainer').jqxGauge({
    int64: true,
    width: 500,
    height: 500,
    startAngle: 40,
    endAngle: 300,
    ranges: [{
        startValue: '0',
        endValue: '250000000000000',
        style: {
            fill: '#CCCCE6',
            stroke: '#B2B2D9'
        },
        endWidth: 5,
        startWidth: 1
    }, {
        startValue: '250000000000000',
        endValue: '500000000000000',
        style: {
            fill: '#9999CC',
            stroke: '#8080C0'
        },
        endWidth: 10,
        startWidth: 5
    }, {
        startValue: '500000000000000',
        endValue: '750000000000000',
        style: {
            fill: '#6666B3',
            stroke: '#4D4DA6'
        },
        endWidth: 15,
        startWidth: 10
    }, {
        startValue: '750000000000000',
        endValue: '1000000000000000',
        style: {
            fill: '#333399',
            stroke: '#19198D'
        },
        endWidth: 20,
        startWidth: 15
    }],
    ticksMinor: {
        interval: '50000000000000',
        size: '5%'
    },
    ticksMajor: {
        interval: '250000000000000',
        size: '9%'
    },
    labels: {
        interval: '100000000000000',
        formatValue: function (value) {
            return value;
        }
    },
    cap: {
        style: {
            fill: '#333399',
            stroke: '#19198D'
        }
    },
    pointer: {
        style: {
            fill: '#333399',
            stroke: '#19198D'
        }
    },
    min: '0',
    max: '1000000000000000',
    value: '0',
    colorScheme: 'scheme03',
    animationDuration: 1200
});

$('#gaugeContainer').jqxGauge({
    value: '300000000000000'
});