An SVG Pie chart using Google Sheets

This is a demo of a chart being created by using the Google Sheets connector that's bundled with RGraph. You can see the Google Sheet that RGraph is fetching data from here and the documentation for the Google Sheets Connector here.

It's using the data that's on the Bar worksheet (there are multiple buttons at the bottom of the screen that allows you access to the other worksheets). The labels are coming from the spreadsheet too.

The stroke color is set to white and the linewidth is 2. There's no other configuration so the Pie chart looks quite standard, though there is a responsive configuration so that on smaller screens the labels disappear and tooltips are used instead.

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.sheets.js"></script>
<script src="RGraph.svg.pie.js"></script>

Put this where you want the chart to show up:

<div style="float: right">
    <div style="width: 650px; height: 300px" id="chart-container"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the div tag:

<script>
    // A pretty basic Pie chart that doesn't do anything particularly magical.
    // The only thing that's worthy of note here is the fact that it gets its
    // data via the Google Sheets import tool. The key for the spreadsheet
    // (the unique identifier) can be found in the URL and is this:
    //
    // 1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E
    //
    // This, along with a callback function that creates the chart and the OAuth ID,
    // are given to the Sheets object constructor. The optional 3rd argument for the
    // Sheets constructor specifies the worksheet to use and has been set to
    // "Bar chart".
    //
    // Remember that the Google Sheets import tool can be used standalone - ie
    // without the RGraph core library. Along with the GPLv2 license,
    // this means that you are free to incorporate it into your own projects
    // or tools if you want to.
    new RGraph.Sheets(
        'AIzaSyBPofvjcDhOdet_U2Tr4-rSLItAgaCsMCM',
        '1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E',
        'Bar chart', // Use the data from the "Bar chart" sheet
    function (sheet)
    {
        // Get the data and the labels from the spreadsheet. Note that you can
        // use the familiar row and column names to get the data.
        var data   = sheet.get('B2:B13'),
            labels = sheet.get('A2:A13');

        new RGraph.SVG.Pie({
            id: 'chart-container',
            data: data,
            options: {
                labels: labels,
                colorsStroke: 'white',
                linewidth: 2,
                textSize: 10,
                tooltipsCss: {
                    fontSize:'16pt'
                },
                responsive: [
                    {maxWidth: null, width: 650, height: 300, options: {labels: labels, tooltips: null,title: ''},parentCss:{'float':'right',textAlign:'none'}},
                    {maxWidth: 900,  width: 400, height: 300, options: {labels: [], tooltips: labels,title: '(Click for labels)'},parentCss: {'float':'none',textAlign:'center'}}
                ]
            }
        
        // Draw the chart and add some responsive accommodation
        }).draw();
    });
</script>