CODEWITHSUNDEEP
javascripthighcharts
cmircovich
cmircovich

Reputation: 275

Highcharts - Multiple Y axis

So I have multiple highcharts graphs on a single page. Some of these graphs (line) contain multiple series on one graph. The problem I'm having is being able to select multiple points for one or both of the series.

Here is some sample code on what I'm attempting to do, but it gives me problems...

function hc_json(series, hc_id) {
    $('#' + hc_id).highcharts('StockChart', {
        chart: {
            events: {           //Sets an event listener for the chart
                /*
                 *  If an event is registered it checks if the external zoom/selects are checked. 
                 *  If select is checked it gets the data points that were within the range at sets 
                 *  them as selected. 
                 */
                selection: function(event) {
                    var mode = $('input[name=mode]:checked', '#' + hc_id  + '_control').val();
                    if (mode != hc_id + '_zoom') {

                        for (var i = 0; i < this.series.length; i++)
                        {
                            console.log("Series: ", this.series);
                            console.log("Series length: ", this.series.length);
                            var points = this.series[i].points;   // visible points
                            var xs = event.xAxis[0]; //There seems to be no min/max forxAxis[1]
                            $.each(points, function (i,p) {
                                if (p.x >= xs.min && p.x <= xs.max) {
                                    console.log("Point:", p.x, "is selected");
                                    p.select(true, true);
                                }
                            });
                            //return false;
                        }
                        return false;
                    }
                },
            },

So for instance, I want to be able to select points on the chart for one of the series, but I want to be able to distinguish which series I want to select. I read up on some "visible" series but have yet to figure out how to make a series visible or not.

Upvotes: 3

Views: 251

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

Please take look at this solution :

 chart: {
        events: {
            selection: function(event) {
                var chart = this,
                    min = event.xAxis[0].min,
                    max = event.xAxis[0].max,
                    txt = '';
                if (event.xAxis) {

                    $.each(chart.series,function(i,serie){
                        $.each(serie.data,function(j,point){
                            if(point.x >=min && point.x <=max) {
                                txt += '<br>serie: ' + serie.name + ' point: '+ point.y;
                                point.select(true,true);
                            }
                        });
                    });

                    $report.html(txt);
                }
            }
        },
        zoomType: 'x'
    },

http://jsfiddle.net/cNRx5/2/

Upvotes: 1

Related Questions