Question

I'm trying to fire a function after a click on a bar in my chart (Highstock vertical bar chart), this is the documentation:

http://api.highcharts.com/highstock#chart.events.click

click: Function
Fires when clicking on the plot background. The this keyword refers to the chart object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts.

Information on the clicked spot can be found through event.xAxis and event.yAxis, which are arrays containing the axes of each dimension and each axis' value at the clicked spot. The primary axes are event.xAxis[0] and event.yAxis[0]. Remember the unit of a datetime axis is milliseconds since 1970-01-01 00:00:00.

click: function(e) {
    console.log(
        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.xAxis[0].value), 
        e.yAxis[0].value
    )
}

this is my chart configuration:

plotOptions: {
    series: {
        animation: enableAnimation,
            cursor: 'pointer',
            point: {
            events: {
            click: function(event) {
                log("Click!")                       
                log(event.yAxis[0].value);
                log(event.xAxis[0].value);
            }
        }
    }
}

the problem is that the 2th and 3th log() was never executed because the "event" object doesn't contain the yAxis or xAxis values, I have written a function for explore the object's properties:

function exploreObj(param, offset)
            {
                log("%% "+param);
                for (var property in param)
                {

                    log(offset + property+": "+param[property]);
                    //exploreObj(property,offset+"-");
                }
            }

any suggestion? how I can access the values for the clicked bar?

Was it helpful?

Solution 2

Solved using this approach:

var start_t = 0;
                        var end_t = 0;

                        var point = event.point;
                        var points = event.point.series.points;
                        var index = points.indexOf(point);
                        var index_next = index+1;
                        start_t = point.x;
                        if(index_next==points.length)
                        {
                            index_next=points.length-1;
                            end_t = points[points.length - 1].x;
                        }
                        else
                        {
                            //Is not the last
                            var next_point = points[index_next]
                            end_t = next_point.x;
                        }

                        var period =
                        {
                            from: start_t,
                            to: end_t
                        };
...

OTHER TIPS

In the point, it should be this.x / this.y value not event.

http://api.highcharts.com/highstock#chart.events.click

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top