I have problems installing and setting up RGraph - Official RGraph support forum

I have problems installing and setting up RGraph

Post a reply
Posted by Lieuwe Montsma at 19:39 on 8th December 2021
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 8th December 2021
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:

https://www.rgraph.net/tests/svg.pie/montsma/chart.html

And the two RGraph libraries that it uses are here:

https://www.rgraph.net/tests/svg.pie/montsma/RGraph.svg.common.core.js
https://www.rgraph.net/tests/svg.pie/montsma/RGraph.svg.pie.js

Posted by Lieuwe Montsma at 09:30 on 9th December 2021
Hi Richard,

did all, no result.
https://www.lieuwemontsma.nl/Disrupt/wp-content/themes/neve/assets/js/rgraph/chart.html
cu

lieuwe

Posted by Richard at 15:02 on 9th December 2021
My mistake - change RGraph.svg.bar.js to RGraph.svg.pie.js

Posted by Lieuwe Montsma at 15:51 on 9th December 2021
Hi Richard,

still the same, no result.
https://www.lieuwemontsma.nl/Disrupt/wp-content/themes/neve/assets/js/rgraph/chart.html
cu

lieuwe

Posted by Richard at 16:01 on 9th December 2021
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 9th December 2021
Hi Richard,

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


lieuwe

Posted by Richard at 17:22 on 9th December 2021
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 9th December 2021
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 9th December 2021
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.

Post a reply

What's your name?
What do you want to say?