To show difference between two bars in high charts?

Question

I want to show difference values in a new line between the two bar charts in high chart plugins, I've create simple bar chart in high charts, but I need to show difference between two bars in the new line. I'm explaining this in below image, please refer following image.

please help me to fix this , Image 2, i want to show that information in below format/design, is it possible in high charts? Image 2

Answer 1

I've got as far as extracting the data from the table to calculate the differences. However, as the example has some negative differences eg -1, it will depend what graph you would like to put this information on as it would need to have a negative y axis.

The following jQuery code will exact all values, find the difference between the first and second and then add this to an array called diffChart.

var graphs = $('#datatable tbody tr');

var diffChart = [];

for (var i = 0, len = graphs.length; i < len; i++) {
    var target = $('#datatable tbody tr').eq(i);
    var bar1 = target.find('td').eq(0).text();
  var bar2 = target.find('td').eq(1).text();

  var diff = Number(bar1) - Number(bar2);

  diffChart.push(diff);

}

You can view an example of the console log output in this jsfiddle

Sorry I couldn't be of much help past this.