Question

I really need help on this.

Based on this question I am trying to generate table from High-charts.

In this Fiddle table is generated ok, but I need data values to be in text, not in number format.

I think format need to be changed at this line, but I am not sure …

Highcharts.numberFormat(series[i].data[category_index].y, valueDecimals) + valueSuffix, 

Is it possible to achieve this?

Answer 1

The reason why you could not replace the data values with text and have it show up are because you are defining the data types as decimal and using the Highcharts.numberFormat to make the y values into a decimal. Since you try to put in text it cannot format the string as a decimal so it is null. Now, you cannot simply take out that Highcharts.numberFormat call and have this work. A HighCharts data series requires a numeric y value. So, to do what you want we use an undocumented point property called Note.

Here is my attempt.
If what you want is to just 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 on the y values you will loop over the Note items just like you had before only with the numeric stuff removed:

$.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 (with just one series updated to use the Note syntax but you get the idea).