CODEWITHSUNDEEP
angularjshighcharts
DuFuS
DuFuS

Reputation: 371

Spiderweb chart with different axis ranges (parallel-coordinates)

I have angular service which provides highcharts config for highcharts-ng. I prepare data for this service in controller and than call service with data as parameter. All work. But if my range is for example something like this [15,130,0.2] my spiderweb chart is little bit squeezed. So I would like to do different axis scales and I have found solution by using parallel-coordinates.js.

And I have problem to make it works. First picture is what I have and second is what I would like to achieve.

What I have : https://jsfiddle.net/DuFuS/en51rbxc/

What I want: http://jsfiddle.net/DuFuS/tbzfhou5/

What I have What I want

Upvotes: 1

Views: 185

Answers (1)

daniel_s
daniel_s

Reputation: 3732

First of all (and the most important thing), you're using very old version of highcharts-ng package, and that's why parallel-coordinates.js module isn't working properly.

This module create additional axes basing on the amount of data passed to the chart constructor, but in this version of package, data is unfortunately an empty object on chart init, so the parallel-coordinates.js module doesn't add any additional axis at all.

Next things which causes the problems are typos in configuration here:

chart: {
  parallerlCoordinates: true,
  parallerAxes: {
...

Should be parallelCoordinates and parallelAxes.

In order to make your chart works, please update the version of highcharts-ng package to 1.2.1, then rebuild your configuration object (because the structure had changed with new version), like below:

return {
      chart: {
        parallelCoordinates: true,
        parallelAxes: {
          gridLineWidth: 0,
          lineWidth: 2,
          showFirstLabel: false,
          showLastLabel: true
        },
        polar: true,
        type: 'line'
      },
      xAxis: {
        categories: data.categories,
        tickmarkPlacement: 'on',
        lineWidth: 0
      },
      yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0
      },
      series: data.series
    };

After all changes, chart will look as you expected.

Live example: https://jsfiddle.net/rza5uk67/

Package docs: https://github.com/pablojim/highcharts-ng

Upvotes: 1

Related Questions