score:0

there are two possible solutions:

the easiest option would be to show/hide and zoom with extra buttons. so you would add some buttons to your page and execute a function like:

//edit made a mistake selecting the chart:

you should create your chart and add it to the array when you are creating it. for example:

var charts = new array(); 
var chart = new highcharts.stockchart(opts);
charts.push(chart);

then for the function:

//set xaxis extremes (zoom)
for (var i = 0; i < charts.length; i++) {
        charts[i].xaxis[0].setextremes(startdate, enddate);
}

to change the zoom. showing and hiding of a series is also pretty simple:

highstock options reference

so you could just call charts[i].series[0].hide(); to hide the first series

another possibility would be to use the highcharts events to start a similar function when a user clicks on the chart.

for example on the legend: highstock options reference

and for the zoom:

xaxis : {
     events : {
        aftersetextremes : aftersetextremes
    },
},

score:6

please familiar with example which synchronizes three charts and have unzoom button.

$(function() {
var chart1;
    var chart2;
    var chart3;
    var controllingchart;

    var defaulttickinterval = 5;
    var currenttickinterval = defaulttickinterval;

    $(document).ready(function() {
        function unzoom() {
             chart1.options.chart.iszoomed = false;
             chart2.options.chart.iszoomed = false;
             chart3.options.chart.iszoomed = false;

            chart1.xaxis[0].setextremes(null, null);
            chart2.xaxis[0].setextremes(null, null);
            chart3.xaxis[0].setextremes(null, null);
        }

        //catch mousemove event and have all 3 charts' crosshairs move along indicated values on x axis

        function syncronizecrosshairs(chart) {
            var container = $(chart.container),
                offset = container.offset(),
                x, y, isinside, report;

            container.mousemove(function(evt) {

                x = evt.clientx - chart.plotleft - offset.left;
                y = evt.clienty - chart.plottop - offset.top;
                var xaxis = chart.xaxis[0];
                //remove old plot line and draw new plot line (crosshair) for this chart
                var xaxis1 = chart1.xaxis[0];
                xaxis1.removeplotline("myplotlineid");
                xaxis1.addplotline({
                    value: chart.xaxis[0].translate(x, true),
                    width: 1,
                    color: 'red',
                    //dashstyle: 'dash',                   
                    id: "myplotlineid"
                });
                //remove old crosshair and draw new crosshair on chart2
                var xaxis2 = chart2.xaxis[0];
                xaxis2.removeplotline("myplotlineid");
                xaxis2.addplotline({
                    value: chart.xaxis[0].translate(x, true),
                    width: 1,
                    color: 'red',
                    //dashstyle: 'dash',                   
                    id: "myplotlineid"
                });

                var xaxis3 = chart3.xaxis[0];
                xaxis3.removeplotline("myplotlineid");
                xaxis3.addplotline({
                    value: chart.xaxis[0].translate(x, true),
                    width: 1,
                    color: 'red',
                    //dashstyle: 'dash',                   
                    id: "myplotlineid"
                });

                //if you have other charts that need to be syncronized - update their crosshair (plot line) in the same way in this function.                   
            });
        }

         //compute a reasonable tick interval given the zoom range -
    //have to compute this since we set the tickintervals in order
    //to get predictable synchronization between 3 charts with
    //different data.
    function computetickinterval(xmin, xmax) {
        var zoomrange = xmax - xmin;

        if (zoomrange <= 2)
            currenttickinterval = 0.5;
        if (zoomrange < 20)
            currenttickinterval = 1;
        else if (zoomrange < 100)
            currenttickinterval = 5;
    }

    //explicitly set the tickinterval for the 3 charts - based on
    //selected range
    function settickinterval(event) {
        var xmin = event.xaxis[0].min;
        var xmax = event.xaxis[0].max;
        computetickinterval(xmin, xmax);

        chart1.xaxis[0].options.tickinterval = currenttickinterval;
        chart1.xaxis[0].isdirty = true;
        chart2.xaxis[0].options.tickinterval = currenttickinterval;
        chart2.xaxis[0].isdirty = true;
        chart3.xaxis[0].options.tickinterval = currenttickinterval;
        chart3.xaxis[0].isdirty = true;
    }

    //reset the extremes and the tickinterval to default values
    function unzoom() {
        chart1.xaxis[0].options.tickinterval = defaulttickinterval;
        chart1.xaxis[0].isdirty = true;
        chart2.xaxis[0].options.tickinterval = defaulttickinterval;
        chart2.xaxis[0].isdirty = true;
        chart3.xaxis[0].options.tickinterval = defaulttickinterval;
        chart3.xaxis[0].isdirty = true;

        chart1.xaxis[0].setextremes(null, null);
        chart2.xaxis[0].setextremes(null, null);
        chart3.xaxis[0].setextremes(null, null);
    }

            $(document).ready(function() {


                $('#btn').click(function(){
                    unzoom();
                });

                var myplotlineid = "myplotline";
                chart1 = new highcharts.chart({
                    chart: {
                        renderto: 'container',
                        type: 'line',
                        zoomtype: 'x',
                        //x axis only
                        bordercolor: '#003399',
                        //'#022455',
                        borderwidth: 1,
                        iszoomed:false
                    },
                    title: {
                        text: 'height versus weight'
                    },
                    subtitle: {
                        text: 'source: notional test data'
                    },
                    xaxis: {
                        title: {
                            enabled: true,
                            text: 'height (cm)'
                        },
                        tickinterval:5,
                        startontick: true,
                        endontick: true,
                        showlastlabel: true,
                        events:{

                            aftersetextremes:function(){

                                 if (!this.chart.options.chart.iszoomed)
                                 {                                         
                                    var xmin = this.chart.xaxis[0].min;
                                    var xmax = this.chart.xaxis[0].max;

                                    var zmrange = computetickinterval(xmin, xmax);
                                    chart1.xaxis[0].options.tickinterval =zmrange;
                                    chart1.xaxis[0].isdirty = true;
                                    chart2.xaxis[0].options.tickinterval = zmrange;
                                    chart2.xaxis[0].isdirty = true;
                                    chart3.xaxis[0].options.tickinterval = zmrange;
                                    chart3.xaxis[0].isdirty = true;

                                   chart2.options.chart.iszoomed = true;
                                   chart3.options.chart.iszoomed = true;
                                   chart2.xaxis[0].setextremes(xmin, xmax, true);

                                    chart3.xaxis[0].setextremes(xmin, xmax, true);
                                      chart2.options.chart.iszoomed = false;
                                   chart3.options.chart.iszoomed = false;
                                }
                            }


                        }
                    },
                    yaxis: {
                        title: {
                            text: 'weight (kg)'
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            return '' + this.x + ' km, ' + this.y + ' km';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'left',
                        verticalalign: 'top',
                        x: 100,
                        y: 70,
                        floating: true,
                        backgroundcolor: '#ffffff',
                        borderwidth: 1
                    },
                    plotoptions: {
                        scatter: {
                            marker: {
                                radius: 5,
                                states: {
                                    hover: {
                                        enabled: true,
                                        linecolor: 'rgb(100,100,100)'
                                    }
                                }
                            },
                            states: {
                                hover: {
                                    marker: {
                                        enabled: false
                                    }
                                }
                            }
                        }
                    },
                    series: [{
                        name: 'group 1',
                        color: 'rgba(223, 83, 83, .5)',
                        data: [[146.2, 51.6], [147.5, 59.0], [148.5, 49.2], [151.0, 63.0], [155.8, 53.6],
                                                                                [157.0, 59.0], [159.1, 47.6], [161.0, 69.8], [166.2, 66.8], [168.2, 75.2],
                                                                                [172.5, 55.2], [174.9, 54.2], [176.9, 62.5], [180.4, 42.0], [190.0, 50.0]]

                        },
                    {
                        name: 'dummy_data',
                        //put this in so that x axis is consistent between 3 charts to begin with
                        color: 'rgba(119, 152, 191, .5)',
                        showinlegend: false,
                        data: [[145.0, 0.0], [200.0, 0.0]]}]

                }, function(chart) { //add this function to the chart definition to get synchronized crosshairs
                    syncronizecrosshairs(chart);
                });

                chart2 = new highcharts.chart({
                    chart: {
                        renderto: 'container2',
                        type: 'line',
                        zoomtype: 'x',
                        //x axis only
                        bordercolor: '#003399',
                        //'#022455',
                        borderwidth: 1,
                        iszoomed:false
                        /*events: {
                            selection: function(event) { //this function should zoom chart1, chart2, chart3 according to selected range
                                controllingchart = "chart2";
                                settickinterval(event);
                            }
                        }*/
                    },
                    title: {
                        text: 'height versus weight'
                    },
                    subtitle: {
                        text: 'source: notional test data'
                    },
                    xaxis: {
                        title: {
                            enabled: true,
                            text: 'height (cm)'
                        },
                        tickinterval:5,
                        startontick: true,
                        endontick: true,
                        showlastlabel: true,
                        events: {
                            aftersetextremes: function() {
                                if (!this.chart.options.chart.iszoomed) 
                                {
                                    var xmin = this.chart.xaxis[0].min;
                                    var xmax = this.chart.xaxis[0].max;
                                    var zmrange = computetickinterval(xmin, xmax);
                                    chart1.xaxis[0].options.tickinterval =zmrange;
                                    chart1.xaxis[0].isdirty = true;
                                    chart2.xaxis[0].options.tickinterval = zmrange;
                                    chart2.xaxis[0].isdirty = true;
                                    chart3.xaxis[0].options.tickinterval = zmrange;
                                    chart3.xaxis[0].isdirty = true;


                                   chart1.options.chart.iszoomed = true;
                                   chart3.options.chart.iszoomed = true;
                                    chart1.xaxis[0].setextremes(xmin, xmax, true);

                                    chart3.xaxis[0].setextremes(xmin, xmax, true);
                                     chart1.options.chart.iszoomed = false;
                                   chart3.options.chart.iszoomed = false;

                                }
                            }
                        }
                    },
                    yaxis: {
                        title: {
                            text: 'weight (kg)'
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            return '' + this.x + ' km, ' + this.y + ' km';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'left',
                        verticalalign: 'top',
                        x: 100,
                        y: 70,
                        floating: true,
                        backgroundcolor: '#ffffff',
                        borderwidth: 1
                    },
                    plotoptions: {
                        scatter: {
                            marker: {
                                radius: 5,
                                states: {
                                    hover: {
                                        enabled: true,
                                        linecolor: 'rgb(100,100,100)'
                                    }
                                }
                            },
                            states: {
                                hover: {
                                    marker: {
                                        enabled: false
                                    }
                                }
                            }
                        }
                    },
                    series: [{
                        name: 'dummy_data',
                        color: 'rgba(223, 83, 83, .5)',
                        showinlegend: false,
                        data: [[145.0, 0.0], [200.0, 0.0]]},
                    {
                        name: 'group 2',
                        color: 'rgba(119, 152, 191, .5)',
                        data: [[151.0, 65.6], [166.3, 71.8], [167.5, 80.7], [168.5, 72.6], [172.2, 78.8],
                                                                                                    [174.5, 74.8], [175.0, 86.4], [181.5, 78.4], [182.0, 62.0], [184.0, 81.6],
                                                                                                    [185.0, 76.6], [186.8, 83.6], [186.0, 90.0], [188.0, 74.6], [190.0, 71.0],
                                                                                                    [192.0, 79.6], [193.7, 93.8], [196.5, 70.0], [199.0, 72.4]]}]
                }, function(chart) { //add this function to the chart definition to get synchronized crosshairs
                    //this function needs to be added to each syncronized chart 
                    syncronizecrosshairs(chart);

                });

                chart3 = new highcharts.chart({
                    chart: {
                        renderto: 'container3',
                        type: 'line',
                        zoomtype: 'x',
                        //x axis only
                        bordercolor: '#003399',
                        //'#022455',
                        borderwidth: 1,
                        iszoomed:false
                        /*events: {
                            selection: function(event) { //this function should zoom chart1, chart2, chart3
                                controllingchart = "chart3";
                                settickinterval(event);
                            }
                        }*/
                    },
                    title: {
                        text: 'height versus weight'
                    },
                    subtitle: {
                        text: 'source: notional test data'
                    },
                    xaxis: {
                        title: {
                            enabled: true,
                            text: 'height (cm)'
                        },
                        tickinterval:5,
                        startontick: true,
                        endontick: true,
                        showlastlabel: true,
                        events: {
                             aftersetextremes: function() {
                                 if (!this.chart.options.chart.iszoomed) {
                                    var xmin = this.chart.xaxis[0].min;
                                    var xmax = this.chart.xaxis[0].max;
                                    var zmrange = computetickinterval(xmin, xmax);
                                    chart1.xaxis[0].options.tickinterval =zmrange;
                                    chart1.xaxis[0].isdirty = true;
                                    chart2.xaxis[0].options.tickinterval = zmrange;
                                    chart2.xaxis[0].isdirty = true;
                                    chart3.xaxis[0].options.tickinterval = zmrange;
                                    chart3.xaxis[0].isdirty = true; 

                                   chart1.options.chart.iszoomed = true;
                                   chart2.options.chart.iszoomed = true;
                                   chart1.xaxis[0].setextremes(xmin, xmax, true);

                                   chart2.xaxis[0].setextremes(xmin, xmax, true);
                                     chart1.options.chart.iszoomed = false;
                                   chart2.options.chart.iszoomed = false;

                                }
                    }
                            }
                    },
                    yaxis: {
                        title: {
                            text: 'weight (kg)'
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            return '' + this.x + ' km, ' + this.y + ' km';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'left',
                        verticalalign: 'top',
                        x: 100,
                        y: 70,
                        floating: true,
                        backgroundcolor: '#ffffff',
                        borderwidth: 1
                    },
                    plotoptions: {
                        scatter: {
                            marker: {
                                radius: 5,
                                states: {
                                    hover: {
                                        enabled: true,
                                        linecolor: 'rgb(100,100,100)'
                                    }
                                }
                            },
                            states: {
                                hover: {
                                    marker: {
                                        enabled: false
                                    }
                                }
                            }
                        }
                    },
                    series: [{
                        name: 'dummy_data',
                        //i put this in to try to get the charts to have the same range on the x axis
                        color: 'rgba(223, 83, 83, .5)',
                        showinlegend: false,
                        data: [[145.0, 0.0], [200.0, 0.0]]},
                    {
                        name: 'group 3',
                        color: 'rgba(119, 152, 191, .5)',
                        data: [[153.0, 65.6], [156.3, 71.8], [167.5, 80.7], [169.5, 72.6], [171.2, 78.8],
                                                                                                    [172.5, 74.8], [177.0, 86.4], [181.5, 78.4], [183.0, 62.0], [184.0, 81.6],
                                                                                                    [185.0, 76.6], [186.2, 83.6], [187.0, 90.0], [188.7, 74.6], [190.0, 71.0],
                                                                                                    [192.0, 79.6], [195.7, 93.8], [196.5, 70.0], [199.4, 72.4]]}]
                }, function(chart) { //add this function to the chart definition to get synchronized crosshairs
                    //this function needs to be added to each syncronized chart 
                    syncronizecrosshairs(chart);

                });


            });

    });

});

http://jsfiddle.net/gv7tg/27/


Related Query

More Query from same tag