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 show charts on your website.

Download

Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

License

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

I have problems installing and setting up RGraph

Posted by Lieuwe Montsma at 19:39 on Wednesday 8th December 2021 [link]

looks like rgraph is exact what I need.
but have no idea how to install.
tried a demo graph, with adjusting paths to js and css files (svg-pie-cvs, with data in a div)
no errors, but also no graph.
please help

Posted by Richard at 20:29 on Wednesday 8th December 2021 [link]

Try starting with a page like this. Put this HTML in a file in a directory and the RGraph library files in the same place:

------8<------
<!DOCTYPE html >
<html lang="en">
<head>
    <script src="RGraph.svg.common.core.js" ></script>
    <script src="RGraph.svg.pie.js" ></script>
</head>
<body>

    <h1>My first chart</h1>

    <div style="width: 750px; height: 300px" id="cc"></div>

    <script>
        data = [2,6,2,5,9,8,5];

        new RGraph.SVG.Pie({
            id: 'chart-container',
            data: data, // The data variable from above
            options: {
            }
        }).draw();
    </script>

</body>
</html>
------8<------

I've put the page online here:

[]LINK REMOVED]

And the two RGraph libraries that it uses are here:

[]LINK REMOVED] - Use the latest download
[]LINK REMOVED] - Use the latest download

Posted by Lieuwe Montsma at 09:30 on Thursday 9th December 2021 [link]

Hi Richard,

did all, no result.

[LINK REMOVED]

cu

lieuwe

Posted by Richard at 15:02 on Thursday 9th December 2021 [link]

My mistake - change RGraph.svg.bar.js to RGraph.svg.pie.js

Posted by Lieuwe Montsma at 15:51 on Thursday 9th December 2021 [link]

Hi Richard,

still the same, no result.

[LINK REMOVED]
cu

lieuwe

Posted by Richard at 16:01 on Thursday 9th December 2021 [link]

OK, try this HTML then instead:

---8<---
<!DOCTYPE html >
<html lang="en">
<head>
    <script src="RGraph.svg.common.core.js" ></script>
    <script src="RGraph.svg.pie.js" ></script>
</head>
<body>

    <h1>My first chart</h1>

    <div style="width: 750px; height: 300px" id="cc"></div>

    <script>
        data = [2,6,2,5,9,8,5];

        new RGraph.SVG.Pie({
            id: 'cc',
            data: data, // The data variable from above
            options: {
            }
        }).draw();
    </script>

</body>
</html>
---8<---

Posted by Lieuwe Montsma at 16:30 on Thursday 9th December 2021 [link]

Hi Richard,

this works!!!
what does it mean for other graphs I want to use?

lieuwe

Posted by Richard at 17:22 on Thursday 9th December 2021 [link]

OK, the first thing to do would be to check your web-browsers JavaScript console for an error message. In Google Chrome you can access this by pressing CTRL+SHIFT+J This will show any error message which will give you a clue as to what is going wrong. Other things to check are:

1. Check that the paths to the RGraph libraries are correct. For example (you may need to change the paths if the files are in a different directory):

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

2. Check that the <div> tag is OK with the id attribute set correctly (eg id="cc" ). An example <div> tag is:

<div style="width: 750px; height: 300px" id="cc"></div>

3. Check that that id is set correctly in the RGraph Pie chart configuration. For example:

<script>
    myData = [2,6,2,5,9,8,5];

    new RGraph.SVG.Pie({
        id: 'cc',
        data: myData, // The myData variable from above
        options: {
        }
    }).draw();
</script>

Posted by Lieuwe Montsma at 19:39 on Thursday 9th December 2021 [link]

Hi Richard,

thx again.
1. have checked for errors, nothing to see.
2. have directory issues solved.
3. saw u changed id from chart-container to cc the last time and that worked. that was the issue: having 2 different id's?

lieuwe

Posted by Richard at 20:13 on Thursday 9th December 2021 [link]

The id's do indeed have to match - so the id that you use when you create the RGraph object has to match the id in the div tag that you use. This is so that RGraph uses the correct div tag.

So the id here:

<script>
    new RGraph.SVG.Pie({
        id: 'cc',
        data: [2,6,2,5,9,8,5],
        options: {
        }
    }).draw();
</script>

Should match the id on the div tag:

<div style="width: 750px; height: 300px" id="cc"></div>

They don't have to be "cc" - they could be something else (for example if you have multiple charts on the page they could be "myChart1" and "myChart2"). But the block of code that creates a chart should use the id of the corresponding <div> tag.

[Replies are now closed]