Tall charts with data
There is an example for tall cards:
http://jsfiddle.net/highcharts/z9zXM/
However, I could not flip the x-axis and y-axis in the table. I want to say what I want:
Tokyo Jan Feb ..
New York
Berlin
London
Also I want to find this table in the middle below the diagram.
Any ideas?
0
source to share
1 answer
This is how the loops should be:
// draw category labels
$.each(series, function(serie_index, serie) {
renderer.text(
serie.name,
cellLeft + cellPadding,
tableTop + (serie_index + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold'
})
.add();
});
$.each(chart.xAxis[0].categories, function(category_index, category) {
cellLeft += colWidth;
// Apply the cell text
renderer.text(
category,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
)
.attr({
align: 'right'
})
.css({
fontWeight: 'bold'
})
.add();
$.each(series, function(i) {
renderer.text(
Highcharts.numberFormat(series[i].data[category_index].y, valueDecimals) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.attr({
align: 'right'
})
.add();
});
});
Here is the link: http://jsfiddle.net/pJ3qL/1/
Then you have to draw the table borders again inside the loops;)
+1
source to share