Draw a chart using highchart.js

Question

I am very new to data visulizations. Currently we are having a requirement to draw a chart similar to below using HighChart.js

See jsfiddle: http://jsfiddle.net/rgpz2ru5/22/ for what I tried so far. I am successfully able to draw chart but facing issue while drawing lines between the datalabel and point (just shown in above image)? Can you please help?

See below code to draw a chart:

 $('#container').highcharts({
    chart: {
      type: 'scatter',
    },
    xAxis: {
      visible: false
    },
    yAxis: {
      title: {
        text: ''
      },
      labels: {
        formatter: function() {
          return null
        }
      }
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          inside: false,
            formatter: function(){
            console.log("X"+this.x)
            console.log("this.x%2"+this.x%2)
          if(this.x%2 == 0){
          console.log("in if")
          return "<div style='position: relative;height:70px; border-left:solid thin #ff0000;margin-left:10px'><span style='position: absolute;bottom: 0;right: 0;'>hello</span></div>";
          }else{
          console.log("in else")
          return "<span style='color:black'>"+this.key+"</span><div style='height:70px; border-left:solid thin #ff0000;margin-left:10px'/>";
          }
          },
          useHTML:true

        }
      },scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: false,
                            lineColor: "#ffb74d"
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: '{point.x} cm, {point.y} kg'
                }
            }
    },

    series: [{
      data: [{
        x: 1,
        y: 1,
         dataLabels: {
          y: -80

        },
        marker: {
          radius: 3
        },
        name: 'SDS',
        color: "#ffb74d"
      }, {
        x: 2,
        y: 1,
         dataLabels: {
          y: 80
        },
        marker: {
          radius: 5
        },
        name: 'MIP',
        color:"#ffe0b2"
      }, {
        x: 3,
        y: 1,
         dataLabels: {
          y: -80,
          distance : 50,
                    softConnector : false,
                    connectorColor : '#D0D0D0',
        },
        marker: {
          radius: 7
        },
        name: 'MDP',
        color:"#ff9800"
      },{
        x: 4,
        y: 1,
         dataLabels: {
          y: 80
        },
        marker: {
          radius: 9
        },
        name: 'RAD',
        color:"#ffb74d"
      },{
        x: 5,
        y: 1,
         dataLabels: {
          y: -80
        },
        marker: {
          radius: 3
        },
        name: 'SDS',
        color: "#ffb74d"
      }, {
        x: 6,
        y: 1,
         dataLabels: {
          y: 80
        },
        marker: {
          radius: 5
        },
        name: 'MIP',
        color:"#ffe0b2"
      }, {
        x: 7,
        y: 1,
         dataLabels: {
          y: -80
        },
        marker: {
          radius: 7
        },
        name: 'MDP',
        color:"#ff9800"
      },{
        x: 8,
        y: 1,
         dataLabels: {
          y: 80
        },
        marker: {
          radius: 9
        },
        name: 'RAD',
        color:"#ffb74d"
      },{
        x: 9,
        y: 1,
         dataLabels: {
          y: -80
        },
        marker: {
          radius: 3
        },
        name: 'SDS',
        color: "#ffb74d"
      }, {
        x: 10,
        y: 1,
         dataLabels: {
          y: 80
        },
        marker: {
          radius: 5
        },
        name: 'MIP',
        color:"#ffe0b2"
      }, {
        x: 11,
        y: 1,
         dataLabels: {
          y: -80
        },
        marker: {
          radius: 7
        },
        name: 'MDP',
        color:"#ff9800"
      },{
        x: 12,
        y: 1,
         dataLabels: {
          y: 80
        },
        marker: {
          radius: 9
        },
        name: 'RAD',
        color:"#ffb74d"
      }]
    }]

  }); 

Can you please help?

Answer 1

Your chart seems to be of a specific kind. I personally have not seen any such visualizations before. Also, having worked with HighCharts, I doubt if any type of highchart can be transformed as yours.

However, on the first look on your figure the following idea appeared in my mind with angular framework.

You can achieve this kind of visualization using basic html and css.

Assuming you are aware with Angular terminology. I suggest having a list of all your values. Loop them in a simple div as follows:

<div ng-repeat = "c in pointsList" > </div>

Next you can use ng-style or ng-class to add dynamic css to your each div.

Seeing your figure, I assume you only following css properties: 1. border-radius 2. background-color 3. width 4. height

Seems like you have fixed categories for each type of bubbles. So you can make few fixed classes in your css and apply them dynamically on the basis of your type of point. Basically, it would look like:

<div ng-repeat = "c in pointsList" ng-class = "{'css1' : c.type1, 'css2' : c.type2}" > </div>

Along with this you will need to apply display: inline-block to bring all divs in a line.

I know, its too naive solution, but if you have limited requirements of such chart, this can help you achieve it with minimal adjustments.

Answer 2

To make similar chart you can use bubble chart: http://jsfiddle.net/rgpz2ru5/

Or standard scatter chart: http://jsfiddle.net/rgpz2ru5/1/

You can change marker size of scatter using marker.radius parameter:

    marker: {
      radius: 5,
      states: {
        hover: {
          lineColor: "#ffb74d"
        }
      }
    },

You can add your labels using chart.renderer.path and chart.renderer.label: http://api.highcharts.com/highcharts/Renderer.path http://api.highcharts.com/highcharts/Renderer.label

  var drawLabels = function(chart) {
    $('.cLabels').remove();
    var series = chart.series,
      renderer = chart.renderer,
      plotTop = chart.plotTop,
      plotLeft = chart.plotLeft;
    Highcharts.each(series, function(s) {
      Highcharts.each(s.data, function(p) {
        renderer.path(['M', p.plotX + plotLeft, p.plotY + plotTop, 'L', p.plotX + plotLeft, p.plotY + plotTop - 30]).attr({
          stroke: 'black',
          'stroke-width': 1
        }).addClass('cLabels').add();
        renderer.label(p.name, p.plotX + plotLeft, p.plotY + plotTop - 50).attr({
          'text-anchor': 'middle',
          padding: 0
        }).addClass('cLabels').add();
      });
    });
  }

Here you can see an example how it can work: http://jsfiddle.net/rgpz2ru5/29/