CODEWITHSUNDEEP
javascriptchartshighchartshidezero
thiago
thiago

Reputation: 101

Highcharts -- Hide zero values without using 'null'

I would like to demonstrate what I'm trying to achieve using two charts.

This donut chart (http://jsfiddle.net/b749uoto/) has two zero values: One for 'Sony Ericsson' and another one for 'Nintendo'. The code beautifully hides those values. Not even the labels show up.

Code responsible for hiding zero values on the donut chart:

dataLabels: {
    formatter: function () {
    // display only if larger than 1
        return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%'  : null;
    }
}

Now, this 3d bar chart (http://jsfiddle.net/arqL4ch2/1/) has the same data as the donut chart above but both zero values are being displayed. I always get a first impression from this chart that 'Sony Ericsson' and 'Nintendo' have values different than zero.

I would like to hide these two companies from the 3d bar chart (data and labels) without applying 'null' values, because by doing that a huge empty space between companies is created.

I tried some suggestions I searched but it didn't work. I am not a javascript master.

Is this possible? Thanks.

EDIT 1: I deleted a paragraph above where I mention I'm using PHP to get the chart data, in order to avoid getting PHP or SQL-specific answers. I just want the same behavior on chart 1 to be applied on chart 2. I strongly believe that the answer relies on some Javascript-fu, and I don't have that.

EDIT 2: The code being displayed for both charts was too long. I removed it and left only the 'hide zero values' part from the donut chart.

Upvotes: 3

Views: 7332

Answers (2)

Farhan
Farhan

Reputation: 1505

Not showing the 0 value dataLables for pieChart/DonutChart. use formatter here are the docs

dataLabels: {
   enabled: true,
   formatter: function(){ // your condition/check
      if(this.y !== 0){
      return this.point.name + ' ' + this.y + '%'; 
      // returning name of label and percentage
      }
    }
}

Upvotes: 0

wergeld
wergeld

Reputation: 14462

If you are only going to get one value per category you can check it in your PHP code and if its value is zero not add it to your series data array. Without seeing your code that generates your data I cannot be more specific. If you are using a SQL query to get the values can you have it only return non-zero entries? Something like this psuedocode:

SELECT vendor, deviceCount
FROM devices
WHERE deviceCount > 0

I did some testing and you can do it from within the chart itself - just not without modifying some code. Use the chart.events.load hook:

    events: {
        load: function () {
            var theChart = this;
            var theSeries = this.series;
            var removeIndex = [];
            var weight = 0;
            for (var key in theSeries) {
                var aSeries = theSeries[key];
                if (aSeries.data[0].y == 0) {
                    removeIndex.push(parseInt(key));
                }
            }
            for (var i in removeIndex) {
                var iRemove = removeIndex[i] - weight;
                theChart.series[iRemove].remove();
                weight = weight + 1;
            }
        }
    }

The tricky part is the weight item. When you remove an indexed item the total index shrinks.

The bulk of this is just a loop. This is a very verbose set of code and you can collapse it down to be much smaller. This code loops through each series in your chart and it is assuming you only have one point per series. It then checks if the value of that single point is 0. If it is we add the index of that series to removeIndex array. The next loop going through the removeIndex array and actually removes the series. Live demo.

Upvotes: 2

Related Questions