Spider / Radar chart

The need was for a ‘Spider Chart’ that plots variables with limits along different axis and dynamically connects the values and limits of the different variables showing bands.

We implemented the custom symbol RadarChart with the usage of the AMcharts library (at https://www.amcharts.com/ you will find free and licensed libraries)

Spider 001.jpg

We made a choice to calculate in percentage using a maximum and minimum value for each variable in order to make a better comparison.

We will not go in details here about that since this is a blog for the technical solution of the symbol.

If you want to know more details regarding this then please contact me directly.

Radar Icon.jpg

 

The Pi AF structure needed in order for the symbol to work:

The symbol needs an attribute with a value and two child attributes called:

‘Limit Hi’ OR ‘Limit Hoch’ AND ‘Limit Lo’ OR ‘Limit Tief’ (so we made it for English and German)

Of course you will be able to adapt the code if you need other specific names to act upon.

AF 001.jpg AF 002.jpg

When adding several attributes to an element with the above described needed child attributes you will be able to drag and drop the complete element om the display and the values will be plot.

Child elements will not work that way. Here you will have to drag and drop the attribute and its related Hi and Low attributes to the chart before this will be displayed in the chart.

 

Configure Symbol options:

 

Radar 001.JPG

 

The ‘Text Size’ will adjust the text size of the labels of the different axis.

Check ‘Show Title’ to show a Title above the chart based on the label text and units text.

The Units will be placed in brackets: Label (Units).

Colors:

Here you will be able to select the different colors for the text, background, grid and line color between the values that are plotted.

Fill:

‘Opacity Hi’ will set the opacity for the Hi band with the additional selected color.

‘Opacity Lo’ will set the opacity for the Lo band with the additional selected color.

Range:

Here you will be able to select several options for displaying the range and axis:

Selecting ‘Use Custom Y Axis Range’ will take the values ‘Minimum Value’ and ‘Maximum Value’ to plot the chart.

‘Show axis labels’ will show values alongside the axis.

 

Attached you will find the JavaScript code,  icon and other needed files we created at the CGI PI Centre Of Excellense.

For any questions or remarks please contact us.

 

CGI.jpg