A circular Meter chart

This is a customised Meter chart. The canvas is still the usual rectangle but it has been placed inside a DIV which has a large border-radius CSS property giving the circular appearance.

[No canvas support] Temperature (C)

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.meter.js"></script>
Put this where you want the chart to show up:
<div style="width: 450px; height: 450px; background-color: white; border-radius: 250px; text-align: center; font-family: Arial; box-shadow: 0px 0px 25px gray; border: 10   px solid #ddd">
    <canvas id="cvs" width="450" height="350">[No canvas support]</canvas>
    <b style="font-size: 20pt">
        Temperature (C)
    </b>
</div>
This is the code that generates the chart:
<script>
    meter = new RGraph.Meter({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 56,
        options: {
            border: false,
            tickmarksSmallCount: 0,
            tickmarksLargeCount: 0,
            anglesStart: RGraph.HALFPI + (RGraph.HALFPI / 1.5),
            anglesEnd: RGraph.TWOPI + RGraph.HALFPI - (RGraph.HALFPI / 1.5),
            segmentsRadiusStart: 140,
            textSize: 16,
            colorsRanges: [
                [0,40,'Gradient(#0c0:#cfc:#0c0)'],
                [40,80,'Gradient(yellow:#ffc:yellow)'],
                [80,100,'Gradient(red:#fcc:red)']
            ],
            needleRadius: 110,
            marginBottom: 135
        }
    }).draw()
    
    meter.canvas.onclick = function (e)
    {
        var obj   = e.target.__object__;
        var value = obj.getValue(e);

        if (typeof value === 'number') {
            obj.value = value;
            obj.grow();
        }
    }
</script>