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.

More »

 

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.

More »

 

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

More »

How can I create a Radial chart with data entry?


Posted by Rachel at 12:31 on Monday 4th September 2023 [link]
Can I create a radial chart where the user can add data interactively? In my scenario, users are rating themselves from 1-10 against 12 skills before and after they complete a project. Ideally they use a slider to add a score for each skill and it plots on a radial/radar chart in real time (see attached image). The functionality needs to be an API that I can call from my application.

Has anyone done anything like this please? Is it possible?
Attached image:
Attached image

Posted by Richard at 17:02 on Monday 4th September 2023 [link]
Yes you could do this with the Radar chart - albeit it won't be curvy - just angled.

I'll make you an interactive demo later today but for now, you could look at the Radar chart demos in the download archive:

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

I'll update you when I've made the demo.

Posted by Richard at 20:19 on Monday 4th September 2023 [link]
Ok here's the demo:

https://codepen.io/rgraph/full/rNoMqqe

The JavaScript code is actually a lot less complicated than I thought it was going to be.

There are lots of things that you could add to this (maybe you're thinking of doing this already) - two that come to mind are storing the data in the window.localData variable to make it persist across refreshes and/or adding AJAX calls to send the data back to the server.

In both cases, you'd add the relevant code to the updateRadar() function.

Posted by Rachel at 18:05 on Thursday 7th September 2023 [link]
That is amazing, Richard, and thank you for taking the time to do it. I am saving the results to Zoho Creator, and the graph would be embedded into the Creator app. There might be a way to do the graph natively with Creator, though it's quite limited in the configuration options, but there is no way to do the sliders.

[Replies are now closed]