highcharts; add arbitrary data which lasts when rendered

Question

let's say I am generating chart json that might look something like this:

return jsonify({
  chart: {
    post_url: '/some/url/'
    type: column
  },
  title: {
    text: this is a chart
  },
  tooltip: {
    shared: true
  },
  xAxis: {
    categories: [x[0].strftime('%b %y') for x in arr]
  },
  plotOptions: {
    column: {
      stacking: normal
    }
  }
  series: [{
    data: [[x.thing for x in month].count(True) for month in arr]
  }, {
    data: [[x.thing for x in month].count(False) for month in arr]
  }]
})

In setOptions, I do the following.

Highcharts.setOptions({
        plotOptions: {
          series: {
            cursor: 'pointer',
            point: {
              events: {
                click: function(el) {
                  $.post(this.chart.post_url + this.category, function(data) {
                    console.log(data);
                  });
                }
              }
            }
          }
        }
      });

However, this does not allow me to click and go to the post url, saying post_url is not defined. So I imagine that data is lost when the chart is rendered.

What's a way around this?

Answer 1

The this in a point.events.click referres to a point object and not a chart object. You can walk backwards to the chart configuration using this.series.chart.userOptions.chart.post_url like so:

point: {
    events: {
         click: function() {
              alert(this.series.chart.userOptions.chart.post_url);
          }
    }
}

Here's an example fiddle.

Answer 2

If I understand correctly you want to have the series.points go to a URL when you click on them? You are missing an ending comma after your post_url definition and quotes around the type value. That being said I would set the URL in the series options and not the chart options. Then you might need to set it like:

  series: [{
    post_url: '/some/url/',
    data: [[x.thing for x in month].count(True) for month in arr]
  }, {
    post_url: '/some/url/',
    data: [[x.thing for x in month].count(False) for month in arr]
  }]

Then in the click event:

  events: {
    click: function(el) {
      $.post(this.post_url + this.category, function(data) {
        console.log(data);
      });
    }

Demo.

If you still want to use the chart.post_url method you need to fix your typos. Demo.