0

I am currently using Highcharts library for displaying data in graphical format. In current scenario i need to show column chart(current values) with a line showing the average values for the corresponding column. also i need to show upward and downward arrows depending if the actual value is greater than the average value and downwards arrow otherwise. i have average and actual values in 2 different series.

most of the things i have done however i am not able to get the values of actual vs average in the plotoption section of the highchart. once i have these values, i can decide and show correct arrow over the column.

can someone help?

plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    shared:true,
                    formatter: function(args) {
        //trying to put condition here for the upward and downward arrow.                                 
        return '<div ><div class="tolerenceDown" ></div></div>';            
                    },

https://jsfiddle.net/sanket_bhalerao/fupggsy2/6/

Ketu
  • 1,608
  • 2
  • 14
  • 30
  • How are you initially calculating the average? Are there multiple values that sum up to make the values for 1 column? – wmash Jun 17 '16 at 14:28
  • just like current values i wll get the average values from backend. – Ketu Jun 17 '16 at 14:30
  • i tried [this](http://stackoverflow.com/a/24178041/5691018) solution but it didnt work for me ,fiddle for same http://jsfiddle.net/89zyx/3/ – Ketu Jun 17 '16 at 14:33
  • So do you not need help with the averages, do you just need help with the arrows? – wmash Jun 17 '16 at 14:37
  • yes, more accurately checking if average series value vs actual series value. – Ketu Jun 17 '16 at 14:40
  • I have had a look around the Highcharts API and came across this jsFiddleL http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/axis-setcompare/, where you can compare the value of series. This comes from this API reference: http://api.highcharts.com/highstock#Axis.setCompare. Unfortunately I am unable to get it working but here's a few sources to look at :) – wmash Jun 17 '16 at 15:06
  • From this, you'll be able to write an `if` condition in the tooltip and display certain arrows (I suggest `.png`'s) as required – wmash Jun 17 '16 at 15:07
  • 2
    I have editted the fiddle to show you how to get access to corresponding average value, you can perform your calculations easily now. [Here](https://jsfiddle.net/fupggsy2/8/) is the fiddle. – Rahul Sharma Jun 17 '16 at 15:48

0 Answers0