New style of Semi-circular Progress meter

Here's a funky (?) new style for the Semi-circular Progress meter. The only real difference is that the ends are rounded instead of being straight. Not a huge difference I'll grant you but that, along with the colors shown here and some extra text (added using the text property), makes for a significantly different aesthetic to the basic Semi-circular Progress..

This update to the chart will be available in version 6.12 (or whenever I get around to committing it to GitHub!). When I've committed the updated code it to GitHub you'll be able to download it here . Click on the Raw button to see the file by itself.

Incidentally - the text property is already a part of the RGraph canvas libraries so you can use that already if you want to add text to your charts.

<script>

    // The data for the chart
    data = [43,20];

    scp = new RGraph.SemiCircularProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: data,
        options: {
            labelsMin: false,
            labelsMax: false,
            labelsCenterSize: 75,
            labelsCenterUnitsPost: '%',
            labelsCenterBold: true,
            labelsCenterOffsety: 30,
            labelsCenterSpecific: RGraph.arraySum(data) + '%',
            width: 40,
            marginBottom: 100,
            marginTop: 5,
            colors: ['black','#71a6a1','#c00','blue'],
            anglesStart: RGraph.PI - (RGraph.HALFPI / 4),
            anglesEnd:RGraph.TWOPI + (RGraph.HALFPI / 4),
            variant: 'rounded',

            // A custom property that's used in the formatted tooltips
            _names: ['Alfie','Barack'],

            tooltips: '%{property:_names[%{index}]}: %{global:data[%{index}]}%',
            tooltipsCss: {
                fontSize: '20pt'
            },
            colorsStroke: 'transparent',

            // Use the text property to add the two extra pieces of text in the
            // middle of the chart
            text: [
                {
                 x:      0,
                 y:      264,
                 text:   'Overall Data score',
                 bold:   true,
                 size:   20,
                 halign: 'center',
                 valign: 'top'
                },
                {
                 x:      0,
                 y:      600,
                 text:   '+12% improvement',
                 italic: true,
                 size:   24,
                 halign: 'center',
                 valign: 'top',
                 color: '#aaa',
                 font: 'Verdana'
                }
            ],

            events: {
                firstdraw: function (obj)
                {
                    obj.properties.text[0].x = obj.centerx;
                    obj.properties.text[1].x = obj.centerx;

                    RGraph.redraw();
                },
                draw: function (obj)
                {
                    // Add a roundedRect around the % improvment text
                    var index = 3;

                    obj.path(
                        'b rr % % % % % s #ccc',
                        obj.coordsText[index].x - 2,
                        obj.coordsText[index].y - 3,
                        obj.coordsText[index].width + 7,
                        obj.coordsText[index].height + 4,
                        50
                    );
                }
            }
        }
    }).grow();
<script>