Julio Pinheiro Julio Pinheiro - 2 months ago 9
Javascript Question

HIGHCHARTS - Value of Columns Based on previous Column Value

I got some issue using Highcharts.

I need to draw the height of third column "C" based on values of the column "B"
(As default the draw of height at column "C" is based on Column "A")
I created a simple example here

$('#container').each(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: this,
type: 'column',
margin: 0,
spacingTop: 0
},
title: {
text: ''
},
xAxis: {
categories: [
'A',
'B',
'C'
], title: {
text: null
},
labels: {
style: {
fontSize: '9px',
font: '9px Arial, Helvetica'
},
enabled: false
}
},
yAxis: {
endOnTick: false,
maxPadding: 0.1,
gridLineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
}, tooltip: {
pointFormat: ' <b>{point.val}</b> ',
shared: true
},
legend: {
enabled: true
},
plotOptions: {
bar: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: {
slicedOffset: 0,
shadow: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '%';
}
}
}
},
legend: {
itemStyle: {
fontSize: '8px',
font: '8px Arial, Helvetica'
},
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
{ y:100, val: 2111, color: '#199ED8' },
{ y: Math.round(748 / 2111 * 100), val: 748, color: '#6CF' },
{ y: Math.round(433 / 748 * 100), val: 433, color: '#6FF' }
],
connectNulls: true,
pointWidth: 58
}], exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}
});
});

Answer

I'm working with Julio in this case, and we Solve it. Resolution: http://jsfiddle.net/JVNjs/1203/

 $('#container').each(function () {
    var publico = 2111;
    var abordados = 748;
    chart = new Highcharts.Chart({
        chart: {
            renderTo: this,
            type: 'column',
            margin: 0,
            spacingTop: 0
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: [
            'Público',
            'Abordados',
            'Conversão'
            ], title: {
                text: null
            },
            labels: {
                style: {
                    fontSize: '9px',
                    font: '9px Arial, Helvetica'
                },
                enabled: false
            }
        },
        yAxis: {
            endOnTick: false,
            maxPadding: 0.1,
            gridLineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            min: 0,
            title: {
                text: ''
            },
            labels: {
                enabled: false
            }
        }, tooltip: {
            pointFormat: ' <b>{point.y}</b> ',
            shared: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            bar: {
                slicedOffset: 0,
                size: '100%',
                dataLabels: {
                    enabled: false
                }
            },
            series: {
                slicedOffset: 0,
                shadow: false,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        if(this.x == 'Conversão'){
                            return Math.round(this.y / abordados * 100, 0) + '%';
                        }else{
                            return Math.round(this.y / publico * 100, 0) + '%';
                        }
                    }
                }
            }
        },
        legend: {
            itemStyle: {
                fontSize: '8px',
                font: '8px Arial, Helvetica'
            },
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            data: [
                { y:publico, color: '#199ED8' },
                { y:abordados, color: '#6CF' },
                { y:433, color: '#6FF' }
            ],
            connectNulls: true,
            pointWidth: 58
        }], exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                }
            }
        }
    });
});