Meter and Gauge charts

Recommend RGraph:  
    Read comments...

Fuel gauges

  • Annotation, resizable
  • Customisable icon and colors
  • Adjustable and interactive
  • Visual effects
[No canvas support]

Fuel gauge documentation
<script>
    var fuel = new RGraph.Fuel({
        id: 'cvs',
        min: 0,
        max: 100,
        value: '73'
    }).draw();
</script>

Gauge charts

  • Can be heavily customised
  • Annotation, resizable
  • Adjustable and interactive
  • Custom start/end angles
  • Visual effects
[No canvas support]

Gauge charts documentation
<script>
    var gauge = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 84,
        options: {
            scaleDecimals: 0,
            tickmarksSmall: 50,
            tickmarksBig: 5,
            titleTop: 'Volume', 
            titleTopSize: 24,
            titleBottom: ['m',
            titleBottomColor: '#aaa',
            borderOuter: 'Gradient(white:white:white:white:white:white:white:white:white:white:#aaa)'
    }).draw();
</script>

Horizontal progress bars

  • Normal or stacked bars
  • Tooltips, resizable, annotatable
  • Adjustable and interactive
  • Visual effects
[No canvas support]

Horizontal Progress bar documentation
<script>
    var hprogress = new RGraph.HProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: [59.65, 22.96, 7.98, 5.27, 4.09],
        options: {
            colors: [
                'Gradient(#ccf:blue)',
                'Gradient(#fcc:#fcc:red)',
                'Gradient(white:white:yellow)',
                'gradient(white:white:white:green)',
                'Gradient(white:white:white:white:gray)'
            ],
            key: ['Internet Explorer', 'Firefox', 'Chrome', 'Safari','Other'],
            keyColors: ['blue','red','yellow','green','gray'],
            unitsPost: '%',
            tickmarksInner: true,
            tickmarksZerostart: true,
            margin: 10,
            gutterBottom: 30
        }
    }).draw()
</script>

Meter charts

  • Custom start/end angles
  • Custom color ranges
  • Different styles
  • Annotation, resizable
  • Adjustable and interactive
  • Visual effects
[No canvas support]

Meter charts documentation
<script>
    var meter = new RGraph.Meter({
        id: 'cvs5',
        min: 0,
        max: 100,
        value: 75,
        options: {
            anglesStart: RGraph.PI + 0.5,
            anglesEnd: RGraph.TWOPI - 0.5,
            linewidthSegments: 15,
            textSize: 16,
            strokestyle: 'white',
            segmentRadiusStart: 155,
            border: 0,
            tickmarksSmallNum: 0,
            tickmarksBigNum: 0,
            adjustable: true
        }
    }).on('beforedraw', function (obj)
    {
        RGraph.clear(obj.canvas, 'white');
    }).draw();
    
    // Uncomment this to be alert()ed with the new value when adjusting has finished.
    // Naturally you'll probably want to do something more useful withe new value, eg
    // Make an AJAX call to the server with it.
    //
    //.on('adjustend', function (obj)
    //{
    //    // Get the new value
    //    var val = obj.value.toFixed(2);
    //    
    //    alert('New value: ' + val);
    //});
</script>

Odometer charts

  • Annotation, resizable
  • Adjustable and interactive
  • Custom events
  • Visual effects
[No canvas support]

Odometer charts documentation
<script>
    var odo = new RGraph.Odometer({
        id: 'cvs',
        min: 0,
        max: 360,
        value: 256,
        options: {
            needleColor: 'black',
            needleTail: false,
            labelArea: 30,
            tickmarks: false,
            greenColor: 'Gradient(white:green)',
            yellowColor: 'Gradient(white:yellow)',
            redColor: 'Gradient(white:red)',
            shadowOuter: true,
            shadowOuterColor: '#aaa',
            shadowOuterOffsetx: 2,
            shadowOuterOffsety: 2
        }
    }).draw();
</script>

SemiCircularProgress bars

  • Adjustable, interactive
  • Tooltips, annotation, resizable
  • Custom events
  • Visual effects
[No canvas support]

SemiCircularProgress charts documentation
<script>
    new RGraph.SemiCircularProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 42,
        options: {
            tooltips: ['The water level is low!'],
            color: ['blue']
        }
    }).draw();
</script>

Thermometer charts

  • Adjustable, interactive
  • Tooltips, annotation, resizable
  • Custom events
  • Visual effects
[No canvas support]

Thermometer charts documentation
<script>
    var thermometer = new RGraph.Thermometer({
        id: 'cvs',
        min: 0,
        max: 1,
        value: 0.94,
        options: {
            titleSide: 'Load value',
            scaleVisible: true,
            scaleDecimals: 2,
            gutterLeft: 60,
            gutterRight: 60
        }
    }).draw();
</script>

Vertical progress bars

  • Normal or atacked bars
  • Tooltips, annotation, resizable
  • Adjustable/interactive
  • Visual effects
[No canvas support]

Vertical Progress bar documentation
<script>
    var vprogress = new RGraph.VProgress({
        id: 'cvs',
        min: 0,
        max: 10,
        value: 4.6,
        options: {
            colors: ['red','blue', 'pink'],
            scaleDecimals: 1,
            gutterLeft: 225,
            gutterRight: 225,
            margin: 10,
            tickmarksInner: true
        }
    }).draw();
</script>

Comments