Generated HighCharts table
I really need help with this.
Based on this question , I am trying to create a table from High-Chart.
In this Fiddle, the table is generated ok, but I want the data values in text, not numeric format.
I think the format should be changed on this line, but I'm not sure ...
Highcharts.numberFormat(series[i].data[category_index].y, valueDecimals) + valueSuffix,
Can this be achieved?
source to share
The reason why you cannot replace data values with text and display it is because you are defining data types as decimal and using Highcharts.numberFormat
y values to be decimal. Since you are trying to insert text, it cannot format the string as decimal, so it is zero. Now, you can't just take that call out Highcharts.numberFormat
and get the job done. The HighCharts data series requires a numeric y value. So, to do what you want, we use the undocumented point property Note
.
Here is my attempt. If you just want to use HighCharts to create a table in SVG / VML, you can do the following. Create a data series like this:
{
name: 'Tokyo',
data: [{
y: 7.0,
Note: 'note 1'},
{
y: 6.9,
Note: 'note 2'},
{
y: 9.5,
Note: 'note 3'},
{
y: 14.5,
Note: 'note 4'},
{
y: 18.2,
Note: 'note 5'},
{
y: 21.5,
Note: 'note 6'},
{
y: 25.2,
Note: 'note 7'},
{
y: 26.5,
Note: 'note 8'},
{
y: 23.3,
Note: 'note 9'},
{
y: 18.3,
Note: 'note 10'},
{
y: 13.9,
Note: 'note 11'},
{
y: 9.6,
Note: 'note 12'}
],
visible: false}
Now, instead of looping over the values y
, you will iterate over the elements the Note
same way as before, only deleting the numeric file:
$.each(series, function(i) {
renderer.text(series[i].data[category_index].Note, cellLeft + colWidth - cellPadding, tableTop + (i + 2) * rowHeight - cellPadding).attr({
align: 'right'
}).add();
});
Here is a jsFiddle (only one series updated to use the syntax Note
, but you get the idea).
source to share