Question

I have some trouble with the scaling of my Highcharts Tornado diagram. The original chart looks like the following: http://jsfiddle.net/XMR8g/2/ (Version 1)

The problem is that some bars are very small and unfortunately the logarithmic scaling from Highcharts isn't possible, because there are null values. The first solution I came up with was to add a small amount of the max_value to all bars. You can see the results here: http://jsfiddle.net/XMR8g/2/ (Version 2)

The problem now is, that the bars seems to have the same values because they share the same size. Which is not true.

So I came up with the solution to apply the logarithm to each value. See the following for the results: http://jsfiddle.net/K4uxY/1/. But the results looks even worse than the previous approaches.

Hope someone can help me.

Regards.

Version 1:

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container',
    type: 'column', 
    height: 500
},
yAxis: {
    min: -4281.14990234375, 
    max: 5336.2900390625,

},
plotOptions:  {
    series: {stacking: "normal" }
},

series: [ {
    'data': [2600.389892578125, 615.5499877929688, 204.72999572753906, 137.38999938964844, 114.7300033569336, 108.05000305175781, 96.94999694824219, 92.55000305175781, 85.56999969482422, 79.62999725341797, 76.2699966430664, 68.61000061035156, 65.25, 64.05000305175781, 5336.2900390625, 4113.27978515625, 989.5499877929688, 820.989990234375, 536.3400268554688, 465.8999938964844, 231.1699981689453, 204.52000427246094, 131.8800048828125, 129.82000732421875, 82.26000213623047, 76.9800033569336, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 'name': 'A'},
         {'data': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -88.62999725341797, -64.87999725341797, -2268.340087890625, -1032.75, -19.889999389648438, -9.5600004196167, -467.57000732421875, -275.7900085449219, -4281.14990234375, -3208.489990234375, -94.29000091552734, -105.8499984741211, -101.26000213623047, -107.47000122070312, -108.7300033569336, -109.12000274658203, -122.87000274658203, -134.0399932861328, -144.75, -157.50999450683594, -174.2100067138672, -186.27999877929688, -220.8699951171875, -221.0, -720.4400024414062, -2600.389892578125], 'name': 'B'}      
]
});

Version 2:

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container',
    type: 'column', 
    height: 500
},
yAxis: {
    min: -4281.14990234375, 
    max: 5336.2900390625,

},
plotOptions:  {
    series: {stacking: "normal" }
},

series: [ {
   'data': [2600.389892578125, 615.5499877929688, 266, 266, 266, 266, 266, 266, 266, 266, 266, 266, 266, 266, 5336.2900390625, 4113.27978515625, 989.5499877929688, 820.989990234375, 536.3400268554688, 465.8999938964844, 266, 266, 266, 266, 266, 266, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 'name': 'A'},
         {'data': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -266, -266, -2268.340087890625, -1032.75, -266, -266, -467.57000732421875, -275.7900085449219, -4281.14990234375, -3208.489990234375, -266, -266, -266, -266, -266, -266, -266, -266, -266, -266, -266, -266, -266, -266, -720.4400024414062, -2600.389892578125], 'name': 'B'}     
]

 });

Version 3:

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container',
    type: 'column', 
    height: 500
},
yAxis: {
    min: -3.6315604347067567, 
    max: 3.727239426407209,

},
plotOptions:  {
    series: {stacking: "normal" }
},

series: [ {
        'name': 'A', 'data': [3.4150384693171127, 2.7892633270335927, 2.311181477369831,     2.137955121603018, 2.0596770062919614, 2.0336247834854477, 1.9865477997441559, 1.9663764374094148, 1.9323215304404306, 1.9010767007466558, 1.8823537272737567, 1.8363874231898756, 1.8145805160103186, 1.8065191547733128, 3.727239426407209, 3.614188251210332, 2.9954377377787025, 2.914337862098153, 2.7294402094071883, 2.668292704758753, 2.3639314695618703, 2.310735793126992, 2.1201789545507217, 2.113341629297244, 1.9151887164514578, 1.8863779256972275, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]},
   {'name': 'B', 'data': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -1.9475807358458384, -1.812110822817997, -3.3557081680434635, -3.0139952036486233, -1.2986347697975213, -0.98045791133857, -2.6698466451943546, -2.440578528292305, -3.6315604347067567, -3.506300688728422, -1.9744656399541103, -2.0246908560948658, -2.0054379322129106, -2.0312872538099525, -2.03634940144026, -2.037904368243721, -2.089445867981862, -2.127234397410059, -2.1606185723994735, -2.1973081163570742, -2.241073097490231, -2.2701662264147378, -2.3441367215748565, -2.34439227368511, -2.8575978190242903, -3.4150384693171127]}  
]       
 });
Was it helpful?

Solution

finally I solved the problem. I applied a data transformation using the inverse logistic function [2]. Code and result below [1]:

[1] http://jsfiddle.net/T92Sd/

[2] http://en.wikipedia.org/wiki/Logit

Thanks for your help. Highcharts is a great library and I appreciate the support.

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container',
    type: 'column', 
    height: 500
},
yAxis: {
    min: -4281.14990234375, 
    max: 5336.2900390625,

},
plotOptions:  {
    series: {stacking: "normal" }
},

series: [ {
    'data': [2631.9092894264063, 1785.5669689716533, 1270.0781048247993, 1085.2124332737794, 1000.6742792326213, 972.3206489626264, 920.7447597140194, 898.4944946673845, 860.6963991825924, 825.7312717412995, 804.634184437911, 752.3243819784345, 727.2252174088428, 717.8965689081933, 5336.2900390625, 3166.253240850101, 2024.1998259877369, 1928.11516967453, 1719.1589562920844, 1652.1585568130695, 1326.1096947044553, 1269.6045364532465, 1066.090259917646, 1058.7243811334858, 841.559580709395, 809.178314767865, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
, 'name': 'A'}, {'data': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -877.6708335146011,           -724.3702382118665, -2525.3910224917877, -2046.706805211158, -266, 0, -1653.851817652529,    -1407.5706328567137, -3245.297081787864, -2827.3843434905775, -907.4291108474731, -962.5681878237424, -941.4965679699812, -969.7704554276261, -975.2918240885617, -976.9868707576072, -1032.9302384841885, -1073.6846958755204, -1109.5375138142174, -1148.8047721144937, -1195.4983818290582, -1226.4720547850725, -1305.0859632701502, -1305.3573861057855, -1862.730331913789, -2631.9092894264063]
, 'name': 'B'}]      
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top