I'm trying to add multiple RGraphs canvases to website

Question

i want to display a pie chart against multiple profiles (a list created from mysql database) on the same page. I am currently using iframes to call in the pie graph from another page but is there a better way to do this? Each chart has different values. Is it possible to create a function on the canvas?

<canvas id="cvs" width="100" height="100" >[No canvas support]</canvas>
    <script>
        window.onload = function ()
        {
            var donut = new RGraph.Pie('cvs', [17,40,25,8]);
            donut.Set('chart.variant', 'donut');
            donut.Set('chart.tooltips', ['Standard','Location','Social']);
            donut.Set('chart.strokestyle', 'transparent');
            donut.Set('chart.exploded', 2);

            donut.Set('chart.gutter.left', 5);
            donut.Set('chart.gutter.top', 5);
            donut.Set('chart.gutter.right', 5);
            donut.Set('chart.gutter.bottom', 5);

            donut.Set('chart.colors', ['rgba(222,82,49,0.15)','rgba(222,82,49,0.40)','rgba(222,82,49,0.80)','rgba(222,82,49,0)']);

            donut.Draw();
        }

    </script>

Richard · Answer 1 · 2020-08-16T08:22:02.027

Yes you can show different charts on the same canvas.

There's a demo in the downloadable archive that shows this called:

demos/bar-css3-animations.html

You can download the RGraph archive here:

https://www.rgraph.net/download.html#stable

You could have functions that create and display each chart:

function ShowChart1 ()
{
    RGraph.Reset(canvas);

    // Create and show first chart
}

function ShowChart2 ()
{
    RGraph.Reset(canvas);

    // Create and show second chart
}

I'm trying to add multiple RGraphs canvases to website

1 Answers1