Highcharts – Spider charts are new in JS 5.6. They are very useful for an overview but their creation is a little bit tricky – therefore here are some useful hints for help.

  1. To show properly different values on different “rays” of the spider chart you need DB output in suitable format. Best is simple table showing in one column name of the value (let’s name it “name”) and in the second column its value (column “value”).
  2. If you have such an output you then define chart configuration this way:
    • categories level – “name”
    • series level – empty or some suitable name
    • measures – “value”
  3. If you want to show more spider charts with the same content for example for different customers you simply add another column to the DB output table – let’s call it “customer” and use this column “customer”:
    • for defining group in report
    • in series level
  4. To show more spider charts in “one line” define columns in report/ subreport properties.
  5. You may want to modify tooltip to show all the values from one spider chart in one tooltip. This requires to define “tooltip.useHTML” advanced property as “Boolean.TRUE” and “tooltip.formatter” advanced property for example this way (everything is hardcoded so don’t need to modify any CSS file – not nice but simple especially in case you have to deploy to customer in simple way – then you just deploy new report package):”function() {
    var n;
    n = this.points[0].series.name;
    if (n.toString().length>20) {n= n.slice(0,19)+'<br>’+n.slice(19);}
    var s;
    s='<span style=\”font-weight: bold; font-size: 11px;\”>’+n+'</span><br><br><div style=\”display: table;\”>’;
    this.points[0].series.data.forEach( function(point) {
    s=s +'<div style=\”display: table-row;\”><div style=\”display: table-cell;\”><span style=\”font-weight: bold; font-size: 10px; padding-right: 5px;\”>’+ point.category+’:</span></div><div style=\”display: table-cell; text-align: right; width: 50%;\”><span style=\”padding-left: 5px; font-size: 10px;\”>’ + point.y.toFixed(2) +’ %</span></div></div>’;
    });
    s=s+'</div>’;
    return s; }”
  6. With modified tooltip it is also useful to define position to show tooltip – add “tooltip.positioner” advanced property like this: “function () { return { x: 0, y: 0 }; }”