CODEWITHSUNDEEP
javascripthighcharts
Greg Morris
Greg Morris

Reputation: 189

Using HighCharts seriesMapping in data module to read a Total column

I'm using the data module for HighCharts. I'm trying to provide an additional column of data with the total for each series, then show that total in the Tooltip, for example "At Least Weekly: 10 (n=190)".

Note: The total is NOT necessarily the sum of the points which is why I am providing it as a separate column in the data vs. using point.total or sum().

From the documentation, it looks like I can use the seriesMapping object which allows custom assignment of the columns to specific point options. However, I can only get the Total to show up for one of the points.

For example, how do I get "(n=190)" for both "Every Day" and "At Least Weekly" for the "WiFi Hotspot" series? Right now it only shows for "At Least Weekly". It shows "Every Day: 21 (n=undefined)" for the other category.

Any help will be much appreciated, thanks!

Here are my data...

<pre id="data">Categories,At Least Weekly,Every Day
WiFi Hotspot,10,21,190
myConnect.com Website,18,15,200
MMI Connect App,15,15,191
External Voice Recognition,18,12,300
</pre>

Here is my HighCharts definition...

Highcharts.chart('container', {
    credits: {
        enabled: false
    },
    chart: {
        type: "bar"
    },
     title: {
        text: "Feature Usage"
    },
        tooltip: {
            formatter: function () {
                return this.series.name + ': ' + this.y + ' (n=' + this.point.mytotal + ')';                
            }   
        },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: "Percent"
        }
    },
    data: {
      csv: document.getElementById('data').innerHTML,
            seriesMapping: [{
                mytotal: 3  // total is in column 3
            }]
    },          
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    }
});

Here it is in jsfiddle... https://jsfiddle.net/gregality/6eens9bv/

Upvotes: 1

Views: 818

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

You have 2 series, so you need 2 mappings:

seriesMapping: [{
    x:0,
    y:1,
    mytotal: 3
},{
    x:0,
    y:2,
    mytotal: 3
}]

Whereas with 1 series the default mappings of x:0 and y:1 apply. If you add a 2nd mapping you need to explicitly state all the mappings.

Also, your CSV was mallformed. You were missing the header for your 4th column.

https://jsfiddle.net/6eens9bv/4/

Upvotes: 4

Related Questions