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:      300,
                 text:   '+12% improvement',
                 italic: true,
                 size:   12,
                 halign: 'center',
                 valign: 'top',
                 color: '#aaa',
                 font: 'Verdana'
                }
            ],
        }

    // Use the first draw RGraph custom event to center the text
    }).on('firstdraw', function (obj)
    {
        obj.properties.text[0].x = obj.centerx;
        obj.properties.text[1].x = obj.centerx;
    
        RGraph.redraw();
    
    // Add a rounded rectangle around one of the extra bits of text that we
    // added using the text property.
    }).on('draw', function (obj)
    {
        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
        );
    }).draw();
<script>