About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

New style of Semi-circular Progress meter

Written by Richard Heyes, RGraph author, on 12th March 2023

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>