
@{
    ViewBag.Title = "Synching Multiple Charts";
}

<div id="chartContainer1" style="height: 360px; width: 100%;"></div>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

<script type="text/javascript">

    $(function () {
        //-------- Chart 1 ---------------
        var chart1 = new CanvasJS.Chart("chartContainer1", {
            zoomEnabled: true,
            zoomType: "x", // change it to "xy" to enable zooming on both axes
            title: {
                text: "Chart1 - Try Zooming / Panning"
            },
            data: [{
                type: "line",

                dataPoints: @Html.Raw(ViewBag.DataPoints1),
            }],
            rangeChanged: syncHandler
        });
        chart1.render();

        //-------- Chart 2 ---------------
        var chart2 = new CanvasJS.Chart("chartContainer2", {
            zoomEnabled: true,
            zoomType: "x", // change it to "xy" to enable zooming on both axes
            title: {
                text: "Chart2 - Try Zooming / Panning"
            },
            data: [{
                type: "line",

                dataPoints: @Html.Raw(ViewBag.DataPoints2),
            }],
            rangeChanged: syncHandler
        });

        chart2.render();

        //--------------------Sync Chart-------------------
        var charts = [chart1, chart2]; // add all charts (with axes) to be synced

        function syncHandler(e) {

            for (var i = 0; i < charts.length; i++) {
                var chart = charts[i];

                if (!chart.options.axisX) chart.options.axisX = {};
                if (!chart.options.axisY) chart.options.axisY = {};

                if (e.trigger === "reset") {

                    chart.options.axisX.viewportMinimum = chart.options.axisX.viewportMaximum = null;
                    chart.options.axisY.viewportMinimum = chart.options.axisY.viewportMaximum = null;
                    chart.render();
                } else if (chart !== e.chart) {

                    chart.options.axisX.viewportMinimum = e.axisX[0].viewportMinimum;
                    chart.options.axisX.viewportMaximum = e.axisX[0].viewportMaximum;

                    chart.options.axisY.viewportMinimum = e.axisY[0].viewportMinimum;
                    chart.options.axisY.viewportMaximum = e.axisY[0].viewportMaximum;
                    chart.render();
                }



            }
        }
    });
</script>