MENU
.net Powerful JavaScript charts
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 use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

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

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 closed]