CODEWITHSUNDEEP
javascriptjqueryhighcharts
James
James

Reputation: 557

how to make series in highcharts toggle between cursors

Hi I am quite new to highcharts and jquery in general and I was wondering if there was anyway to switch between cursors on series points in datatables.

For example, for my application I dont want users to click on some of the series, but I do want them to click on others

Here is a fiddle someone posted and I was wondering if I could make a function just like in the "click" that would toggle between pointers if a parameter in "this.options" was set

http://jsfiddle.net/287JP/2/

$(function () {
         $('#container').highcharts({
             chart: {},
             xAxis: {
                 minPadding: 0.05,
                 maxPadding: 0.05
             },

             series: [{
                 data: [{
                     x: 0,
                     y: 29.9,
                     url: 'http://www.google.com'
                 }, {
                     x: 1,
                     y: 71.5,
                     url: 'http://www.yahoo.com'
                 }]
             }],


             plotOptions: {
                 series: {
                     cursor: 'pointer',
                     point: {
                         events: {
                             click: function () {
                                 var url = this.options.url;
                                 window.open(url);
                             }
                         }
                     },
                 }
             },
         });
     });

Is there anyway to do something like

cursor: function() {
  if(this.options.clickable) {
    'pointer'
  } else {
    'default'
  }
}

Thank you

Upvotes: 0

Views: 200

Answers (2)

wergeld
wergeld

Reputation: 14442

This is possibly via modifying the properties of the chart after created (in a callback for example). See this post. You would do something like:

$.each(chart.series[0].data,function(i,point){
    if(point.options.cursorEnabled){ 
        point.graphic.attr({
            cursor:'pointer'
        });
    }
});

Upvotes: 2

MoustafaAAtta
MoustafaAAtta

Reputation: 1081

You can add clickable to options then in the click event check its value. If it's false, then execute return false. That will cancel the event. Here's your updated code

$(function () {
     $('#container').highcharts({
         chart: {},
         xAxis: {
             minPadding: 0.05,
             maxPadding: 0.05
         },

         series: [{
             data: [{
                 x: 0,
                 y: 29.9,
                 url: 'http://www.google.com',
                 clickable: true
             }, {
                 x: 1,
                 y: 71.5,
                 url: 'http://www.yahoo.com',
                 clickable: false
             }]
         }],


         plotOptions: {
             series: {
                 cursor: 'pointer',
                 point: {
                     events: {
                         click: function () {
                             if(!this.options.clickable)
                                 return false;
                             var url = this.options.url;
                             window.open(url);
                         }
                     }
                 },
             }
         },
     });
 });

Upvotes: 2

Related Questions