CODEWITHSUNDEEP
phpjavascripthighcharts
Mark
Mark

Reputation: 239

Have some bars not a url link on highcharts

I have a highchart like this one: fiddle demo chart It is being generated on the server in PHP with data but I don't want it to have a URL if the count of the data is zero (as there is nothing to see).

How can I tell the chart to disable the link on these bars only?

if($value['category'] > 0){
        $chartActive .= $comma."{y:".$value['category'].", url: '/section/of/site/index.php'}";
    }else{
        $chartActive .= $comma."{y:0, url: javascript:void(0)}";
    }

This will then be added to the chart like this:

plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#333'
                }
            },
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Active',
            data: [<?php echo $chartActive; ?>]
        },

As you can see the url is defined in the series part of plotOptions so it always exists, if I do it the way I have it now the link works but goes to mysite.com/undefined

Any advice would be appreciated.

Mark

Upvotes: 2

Views: 1125

Answers (1)

escouser
escouser

Reputation: 1943

You could test whether the point has a value in the click event before setting the url. However, any empty points will still have the pointer cursor, I haven't found a way round it yet.


series: {
    cursor: 'pointer',
    point: {
        events: {
            click: function() {
// if you've more than one series then you'll have to sum up the value for the stack
                if (this.y != 0) {  
                    location.href = this.options.url;
                }
            }
        }
    }
}

Upvotes: 1

Related Questions