An Activity meter chart

Formerly this interesting style of chart was a variant of the Pie chart that was created by using a custom class that resided in the Pie chart library. It also made use of the Rose chart in order to draw a circular background grid.

Now however it has been promoted to a full chart type - the Activity meter - so the code necessary is much smaller. By default, the Activity meter class creates a much different looking chart but with some configuration, you can achieve the style as it's shown here.

You can see the code that creates the chart below and how easy it is to implement.

You can use this style of chart to show one or more values that make more sense when they're arranged in a circle than in a horizontal or vertical arrangement.

If you want to add animation then the grow effect looks nice.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.activity.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="400" height="400" style="float: right">[No canvas support]</canvas>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    activity = new RGraph.Activity({
        id: 'cvs',
        min: 0,
        max: 100,
        value: [28,19,39,45],
        options: {
            backgroundColor: 'transparent',
            backgroundGrid: true,
            backgroundGridColor: '#aaa',
            backgroundRings: false,
            colors: ['blue','gray','green','red'],
            labels: ['Month 1','Month 2','Month 3','Month 4'],
            labelsBold: true,
            labelsItalic: true,
            tooltips:                        'Result: %{key}',
             tooltipsCss:                       {
                fontSize: '20pt',
                textAlign: 'left'
             },
            tooltipsFormattedKeyLabels:      ['Jenny','Richard','Dave','Kev'],
            ends: 'straight',
            labelsColor: 'black'
        }
    }).grow();
    
    setInterval(function ()
    {
        activity.value[0] += RGraph.random(-10,10);
        activity.value[1] += RGraph.random(-10,10);
        activity.value[2] += RGraph.random(-10,10);
        activity.value[3] += RGraph.random(-10,10);
        
        activity.grow();
    }, 5000);
</script>