[Spider Web Reactive Chart] How to get multiple lines (dataseries) in Spider Web Chart
spider-web-reactive-chart
Reactive icon
Forge component by Pedro Costa
Application Type
Reactive

Hello

Could someone tell me how I can get multiple lines/dataseries in one Spider Web Chart. 
I have tried, I get multiple lines, but not for the same lables.
An example like in the demo would be welcome. The demo unfortunately only shows a simple single line example.

Kind regards,

Ellen Visser

Hi Ellen,

Thanks, yes, updating the highcharts more library did the trick.

I think the cause of the problem probably is that the author of this asset used the Outsystems pie chart as a base for his Spider Web chart.  I think Outsystems pie chart doesn't deal well with more than 1 series.

Other than that, I see a lot of stuff going on in that asset that I don't understand, so I'm not going to try and change it.  Instead, I tried to start from scratch, and it is really very easy to get a spiderweb chart with multiple series, so brewing your own is a valid option over using that forge asset.

See attached oml for an example.  I added a pie chart just to show that that doesn' work, so it's the left example you should follow ;-)

So you can fill datapoint list like for any other chart, and all you need is to make sure the higcharts more script is loaded, and add this in HighchartsJSON :

The chart bit already turns it into a spider chart, the xAxis bit makes sure the values lie on a line instead of between 2 lines.

Dorine

QDR_SpiderChart.oml

Correction : I assumed you need higcharts_more because that asset is doing it, but you don't.


Hi,

I had a quick look : 2 observations

as I suspected, when your max is 100, values of 100 datapointlabels are not shown, see this chart, 

where i made these changes : 

    yAxis: {       max: 115, endOnTick: false

If you don't make endOnTick false (default is true, making the max > 100 would add an extra outer spiderweb line

As for the placement of the y axis labels (red), you think they are in the wrong spot but for comparison, if you make it a simple radial again, you can see they are on the right spot then (radial distance from center point).  See below, the red number are exactly on the right spot, see above, they are on the same spot, but because it's a poligon instead of round guidelines, it looks wrong.  You could argue if this is a bug or a feature, I'm leaning towards bug.

One solution to this would be to show those red numbers on one of the axis, instead of between the axis, it is possible, see this example, but I haven't really figured out how to achieve this.  I would think something to do with distance and tickmarkPlacement, but can't make it work.

See also this, I'm done searching for now.

Good luck with it, and if you find it, please keep us posted.

Dorine


Hi Ellen,

I can't try it out, as I'm getting exceptions about fontsize when I try to run the demo app of this forge component (probably to do with my version of charts or something, don't know, don't want to spend time on it)

But I would think that all you need to do is have an extra set of datapoints for a different DataSeriesName, with same labels, to create a second line in your spider chart.  That's how it works for all chart types, and you can see for example here.  

What do you mean when you say you get 2 lines, but not for the same labels.  Can you share how you fill your datapoints?

You can see they have 2 series, resulting in 2 lines

In outsystems, you can create that by the DataSeriesName of your datapoints.

Dorine

Hi Dorine
Thanks for your answer. The error : "Cannot read properties of undefined (reading 'fontSize') " in the Demo can be solved by replacing the the highcharts_more script with the most recent version. The most recent version can be found here: https://code.highcharts.com/highcharts-more.js

I already tried to get the two dataseries (two lines) in de spider web chart using the suggestion you mentioned, but it doesn't seem to work.
I get the two dataseries in two different spider web charts like this (the second dataseries is supposed to give only 100%):

My data: 


My spider web charts (left SpiderWebChart2 and right SpiderWebChart3, these are correct):

When I try to integrate them into one spider web chart, this doesn't work:

I get this Spider web chart, which isn't correct at all:


Making sure there are only 4 X-axisCategories doesn't solve this problem:

I hope someone can point me in the right direction to create the two dataseries correctly in one spider web chart.

Regards, Ellen

your reply is very informative.

Hi Ellen,

Thanks, yes, updating the highcharts more library did the trick.

I think the cause of the problem probably is that the author of this asset used the Outsystems pie chart as a base for his Spider Web chart.  I think Outsystems pie chart doesn't deal well with more than 1 series.

Other than that, I see a lot of stuff going on in that asset that I don't understand, so I'm not going to try and change it.  Instead, I tried to start from scratch, and it is really very easy to get a spiderweb chart with multiple series, so brewing your own is a valid option over using that forge asset.

See attached oml for an example.  I added a pie chart just to show that that doesn' work, so it's the left example you should follow ;-)

So you can fill datapoint list like for any other chart, and all you need is to make sure the higcharts more script is loaded, and add this in HighchartsJSON :

The chart bit already turns it into a spider chart, the xAxis bit makes sure the values lie on a line instead of between 2 lines.

Dorine

QDR_SpiderChart.oml

Correction : I assumed you need higcharts_more because that asset is doing it, but you don't.


Hi Dorine

I have these spider web charts now.

Could you maybe give me a tip on how to get the grid percentages at the right gridlines on the first chart? On the second chart they are correct. And why is 100% not visible?
And would you know why on the outer line, the values are not visible? Maybe the same reason why the 100% tick is not visible.
Both charts are based on the same chart with the same JSON, so why these differences.

This is the HighChartsJSON I use:

Thank you in advance, you have already helped me a great deal.
Kind regards, Ellen

Hi Ellen,

I'm not at a computer now, I'll have a look tonight.

Can you check what happens if you change yAxis max to a value higher than 100, or maybe don't set a max at all.

Dorine

Hi,

I had a quick look : 2 observations

as I suspected, when your max is 100, values of 100 datapointlabels are not shown, see this chart, 

where i made these changes : 

    yAxis: {       max: 115, endOnTick: false

If you don't make endOnTick false (default is true, making the max > 100 would add an extra outer spiderweb line

As for the placement of the y axis labels (red), you think they are in the wrong spot but for comparison, if you make it a simple radial again, you can see they are on the right spot then (radial distance from center point).  See below, the red number are exactly on the right spot, see above, they are on the same spot, but because it's a poligon instead of round guidelines, it looks wrong.  You could argue if this is a bug or a feature, I'm leaning towards bug.

One solution to this would be to show those red numbers on one of the axis, instead of between the axis, it is possible, see this example, but I haven't really figured out how to achieve this.  I would think something to do with distance and tickmarkPlacement, but can't make it work.

See also this, I'm done searching for now.

Good luck with it, and if you find it, please keep us posted.

Dorine


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.