Search code examples
javascripthighchartshighslide

Highslide HTML expand method with conditional statement

I have a Highchart in which we can click on the points and then some information is shown using the Highslide html expand method. Here I give user an option to post some data. 

point: {
events: {
    click: function (e) {
        hs.htmlExpand(null, {
            pageOrigin: {
                x: e.pageX || e.clientX,
                y: e.pageY || e.clientY
            },
            headingText: this.series.name,
            maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
                this.y + ' visits ' + '<div>'+'<button onclick="posting('+this.y+')">'+'send report' +'</button>'+'</div>',
            width: 200
        });
    }
}

}

I want only admin user can see the button to send report and rest of the users should not see that option. for an example

  if(this.y != null){

                maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
                    this.y + ' visits ' + '<div>'+'<button onclick="posting('+this.y+')">'+'send report' +'</button>'+'</div>'

} else{

  SOMETHING ELSE.....

}

Here is the the working fiddle link. I don't have any data setup for admin see if you can check if y axis value is not null then show send report button else don't show it or come up with some condition.

Solution

  • The easy answer is yes.

    You can define conditional content.

    point: {
  events: {
    click: function (e) {
      var conditionalContent = condition == met ? 'conditional content' : '';
      maincontentText: 'normal content ' + conditionalContent
    }
  }
}

    example:

    Click on the point for the date March 19 to see the conditional content.

    The issue of defining and checking for your condition may be trickier - you're talking about permissions management, which can be a complicated ugly mess some times, depending on how strict and secure you need it to be.