Overview – Zooming & Panning in CanvasJS HTML5 & JavaScript Charts

Often Zooming and Panning are required Chart Interactions when plotting a chart with large data. By making zoomEnabled to true, you can zoom into area of interest. Once zoomed, you can switch between zooming and panning using the toolbar that appears on the chart. At any time during interactions, you can reset the chart by clicking the reset button.

Notes
  • When number of dataPoints are large the property is automatically Enabled.
  • This property only works for charts with axis.

Syntax

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 zoomEnabled: true, 
 .
 . 
});
chart.render();

Basic Zooming and Panning

In the next example we are providing large number of dataPoints using a random value generator. Try dragging your mouse across the chart to zoom inside charts.

Try it Yourself by Editing the Code below.


Zooming and Panning With dateTime Values

In a dateTime axis, zooming into certain sections will require axisX to change intervalType depending upon the zooming depth. For Example, Zooming in a default chart showing interval in months, would require axis to show interval in days. Chart automatically set the interval based on the range of value. If user sets intervalType manually, intervalType would remain same at all zooming levels.


In below example Zoom in and see interval change from years to months and then days as we zoom in further.

Try it Yourself by Editing the Code below.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 70

  1. Can we have an event on zoom that will retrieve the zoom level and some sort of info about the initial point and final point.

    The reason is I want to implement an overview feature like the one here:

    http://www.highcharts.com/stock/demo/

    You can see it in the bottom.

    My plan is to draw another chart, small one and find a way to overlay the currently visible indicator on it based on the information provided by the event i am requesting above. Hope this makes sense.

  2. Also Is there programmatic access to zoom and pan on the API? so we can implement zoom buttons for quick zooming, like 1 week, 1 month, etc?

  3. My application uses to pan and zoom.
    With the values of y no problem.
    The problem exists in the x values to be dates.
    Problem 1. The chart begins in the year 1905? and I not feeds this date.
    Problem 2. I can not perform panning. When PAN digit button will reset?.
    Attached the code.

    /////////////////////////////////////////////////////////////////////////

    for (var i = 0; i <= limit – 1; i++) {
    y = parseFloat(vpyactualn[i]);
    xpaso = vpyactualf[i];
    xpaso1 = xpaso.substring(0, 4);
    xpaso2 = xpaso.substring(4, 6);
    xpaso3 = xpaso.substring(6, 8);
    xpasoc = xpaso1.concat(xpaso2, xpaso3);
    dateTimex = new Date(xpaso1, xpaso2 – 1, xpaso3);

    dataPoints.push({
    x: dateTimex,
    y: y
    });
    }

    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);

    var chart = new CanvasJS.Chart("chartContainer",
    {
    zoomEnabled: true,
    title: {
    text: "Zoom And Observe AxisX "
    },
    axisX: {
    labelAngle: -30
    },
    axisY: {
    includeZero: false
    },
    legend: {
    horizontalAlign: "right",
    verticalAlign: "center"
    },
    data: data // random generator below

    });

    ////////////////////////////////////////////////////////////////////////

    Thanks in advance.

  4. The solution to the PROBLEM 1 is declared
    dateMinact = new date (‘2013 ‘, ’00’, ’01 ‘);
    …..
    AxisX {
             minimum: dateMinact,
             LabelAngle: -30
           }
    and works ok
    Thanks anyway
    PROBLEM 2 persists

    • Can you please create a jsfiddle that recreates the problem. Without having the data its difficult to find out the problem. Also please post this in forum. Simple questions are easier to answer as comment. For code related things forum is much easier.

  5. I am drawing a scatter chart, but my data is going out of the page on x-axis. I have specifies 5 datapoints but only 3 are visible on the screen. Is there some way to set the chart width. The div width is set to 100%.

    • Shelly,

      If you can create a jsfiddle demonstrating the same and post it in forum, I can have a look and suggest a solution.

  6. Do you have a muliti-touch enabled version of Zooming and Panning? I tried it with your samples but the touch was ignored. I am looking for charts that pan and zoom on Tablets/Phones/multi-touch devices that do NOT have a mouse attached.

    • Chris,

      Zooming and Panning is allowed on Tablets, Phones & other touch based devices. But “multi” touch is not supported yet. You can do the same with one finger.

  7. I am currently using “Zooming and Panning With dateTime Values”.
    Is it possible to also use a valueFormatString?
    If i simply add one it will always display the valueFormatString at every zoom level. I would like to keep interval changes but also want to use my own valueFormatString.

  8. In the example the zoom function minimum number of points one may zoom to seems to be limited. I’d like to be able to set it. Is there an externally accessible parameter to do so or would I have to change the code?

  9. When resetting from zoomed view, the whole page loaded again, however as I try the examples, it should not be loaded again. Can you guess why it happens?

  10. Hi, Anjali,

    my code is very complex. But I found (tried with jsfiddle) that if I place the chart’s div inside a element, resetting the zoomed chart makes the whole page load again.

    http://jsfiddle.net/sokLntxv/8/

    ( element is placed just to show the reloading – select second option and after resetting zoom, first option will be selected)

    Thanks in advance

    • Hi, Anjali,

      my code is very complex. But I found (tried with jsfiddle) that if I place the chart’s div inside a “form” element, resetting the zoomed chart makes the whole page load again.

      http://jsfiddle.net/sokLntxv/8/

      ( “select” element is placed just to show the reloading – select second option and after resetting zoom, first option will be selected)

      Thanks in advance

      • I confirm the problem, in my case the page load again even after i pressed the pan button or the refresh button. I’m using it inside an asp.net project and of course i have the form tag. Can you please let me know if this problem can be fixed?

  11. Is it possible to make multichart with movement&zooming dependence: when zoom one chart – the depended is also zoomed; when one is moved – the depended also moves (like to see temperature+humidity same time) ?

  12. i have a question about the Zooming:

    – after a few zooming gestures in the chart, is it possible to zoom out one/two step back.
    from what i have seen here it can only be refreshed to the beginning stage.

  13. Is it possible to leave only panning functionality for chart? I mean I made the chart to zoom on mouse wheel, so I don’t need this select-area-to-zoom functionality, but I do need panning.

    • Nikolai,
      Here is an example, which you can refer to set pan-mode as default and to hide the zoom/pan-button. And we can help you further if you can create a jsfiddle with your way of zoom on scrolling functionality.

      • how to make only panning functionality and disable zoom option in all plat form mobile,ipad and desktop

        • Venkat,

          There is a workaround for this. You can hide the zoom/pan button and set directly to pan-mode by auto-clicking the zoom-button onload. Here is an example.

          • function closeWardSelectionDialog() {
            //If the user closes the Ward selection dialog and there are no wards that were
            //last selected, select ‘City’ in the Top Calls panel.
            //Else, if there were wards previously selected which are now all unselected and
            //the user closes the Ward selection dialog (meaning no new data is retrieved),
            //set the arrayWard so that they get selected next time the Ward selection dialog opens
            if (lastSelectedWardsArray == null || (lastSelectedWardsArray != null && lastSelectedWardsArray.length == 0)) {
            if ($(‘#ward’).hasClass(“selected”)) {
            $(“#ward”).removeClass(“selected”);
            $(“#City”).addClass(“selected”);
            $(“#Info”).removeClass(“disabled”);
            }
            }
            else if ((lastSelectedWardsArray != null && lastSelectedWardsArray.length > 0) && (arrayWard != null && arrayWard.length == 0)) {
            //Ensure the lastSelectedWards items are checked
            arrayWard = lastSelectedWardsArray;
            }

            $(“#ward_selection_dialog”).dialog(‘close’);
            }

            function drawLowerGraph() {

            var limit = 10000; //increase number of dataPoints by increasing the limit
            var y = 0;
            var data = [];
            var dataSeries = { type: “line”, color: “#ffffff”, markerSize: “0” };
            var dataPoints = [];
            var timeFrameSelected = “”;
            var subjectSelected = “”;
            var locationSelected = “”;

            var timeFrameDisplayText = “”;
            var subjectDisplayText = “”;
            var locationDisplayText = “”;
            var graphLabelText = “”;

            timeFrameSelected = getTimeFrameSelected();
            subjectSelected = getSubjectSelected();
            locationSelected = getLocationSelected();

            if (timeFrameSelected == “30mins”) {
            timeFrameDisplayText = “Today”;
            }
            else if (timeFrameSelected == “today”) {
            timeFrameDisplayText = “Today”;
            }
            else if (timeFrameSelected == “yesterday”) {
            timeFrameDisplayText = “Yesterday”;
            }

            if (subjectSelected == “all”) {
            subjectDisplayText = “all calls”;
            }
            else if (subjectSelected == “info”) {
            subjectDisplayText = “information requests”;
            }
            else if (subjectSelected == “service”) {
            subjectDisplayText = “service requests”;
            }

            if (locationSelected == “city”) {
            locationDisplayText = “entire city”;
            }
            else if (lastSelectedWardsArray.length == 1) {
            locationDisplayText = lastSelectedWardsArray[0];
            }
            else if (lastSelectedWardsArray.length > 1) {
            locationDisplayText = “multiple wards”;
            }

            graphLabelText = timeFrameDisplayText + ‘, ‘ + subjectDisplayText + ‘, ‘ + locationDisplayText;
            $(“#chartLabel span”).text(graphLabelText);
            $(“#chartLabel”).show();

            //mobileChartLabel
            $(“#mobileChartLabel span”).text(graphLabelText);
            $(“#mobileChartLabel”).show();

            addRows = [
            [new Date(2016, 04, 18, 0, 0), 12], [new Date(2016, 04, 18, 0, 30), 10], [new Date(2016, 04, 18, 0, 40), 23], [new Date(2016, 04, 18, 0, 50), 17],
            [new Date(2016, 04, 18, 1, 10), 12], [new Date(2016, 04, 18, 1, 30), 10], [new Date(2016, 04, 18, 1, 40), 23], [new Date(2016, 04, 18, 1, 50), 17],
            [new Date(2016, 04, 18, 2, 0), 18], [new Date(2016, 04, 18, 2, 10), 3], [new Date(2016, 04, 18, 2, 20), 6], [new Date(2016, 04, 18, 2, 50), 8],
            [new Date(2016, 04, 18, 3, 0), 18], [new Date(2016, 04, 18, 3, 10), 3], [new Date(2016, 04, 18, 3, 20), 6], [new Date(2016, 04, 18, 3, 50), 8],
            [new Date(2016, 04, 18, 4, 0), 18], [new Date(2016, 04, 18, 4, 10), 3], [new Date(2016, 04, 18, 4, 20), 6], [new Date(2016, 04, 18, 4, 50), 8],
            [new Date(2016, 04, 18, 5, 0), 18], [new Date(2016, 04, 18, 5, 10), 3], [new Date(2016, 04, 18, 5, 20), 6], [new Date(2016, 04, 18, 5, 50), 8]
            ];

            // for (var i = 0; i < addRows.length; i += 1) {
            // dataPoints.push({
            // x: addRows[i][0],
            // y: addRows[i][1]
            // });

            // }

            for (var i = 0; i < callCountLineGraphItems.length; i += 1) {
            dataPoints.push({
            x: callCountLineGraphItems[i][0],
            y: callCountLineGraphItems[i][1]
            });
            }

            dataSeries.dataPoints = dataPoints;
            data.push(dataSeries);

            //Better to construct options first and then pass it as a parameter
            var options = {
            zoomEnabled: true,
            //animationEnabled: true,
            backgroundColor: "#3B5998",
            title: {
            fontColor: "white",
            fontFamily: "Calibri bold",
            text: "",
            fontSize: 22,
            horizontalAlign: "left",
            margin: 10
            // padding: 12
            },
            axisX: {
            margin: 0,
            viewportMinimum: 0,
            viewportMaximum: 0,
            lineColor: "white",
            labelFontFamily: "Calibri",
            labelFontSize: 12,
            tickLength: 0,
            interval: 1,
            intervalType: "hour",
            valueFormatString: "H:00",
            labelFontColor: "white",
            tickColor: "#3B5998",
            tickLength: 6
            },
            axisY: {
            gridThickness: 0,
            lineThickness: 1,
            lineColor: "#3B5998",
            margin: 0,
            includeZero: true,
            labelFontColor: "white",
            labelFontFamily: "Calibri",
            tickLength: 0,
            labelFontSize: 12
            },
            responsive: true,

            toolTip: {
            backgroundColor: "#3B5998",
            fontColor: "white",
            fontStyle: "normal",
            fontSize: 20,
            fontFamily: "calibri",
            content: "{x} – {y}",
            borderThickness: 0
            },
            data: data
            };
            for (var i = 0; i = “12”) {
            options.axisX.interval = 2;
            break;
            }
            }
            var ToDay = new Date();
            var maxY = Math.max.apply(Math, dataPoints.map(function (o) { return o.y; }));
            var maxX = Math.max.apply(Math, dataPoints.map(function (o) { return o.x; }));
            var maxd = new Date(maxX)

            if (ToDay.getDate() > maxd.getDate()) {
            var maxviewport = maxd.setHours(12);
            maxviewport = maxd.setMinutes(00);
            maxviewport = maxd.setSeconds(00);
            var Xmax = new Date(maxviewport);
            options.axisX.viewportMaximum = Xmax;
            } else {
            var maxview = ToDay.setHours(10);
            maxview = ToDay.setMinutes(00);
            maxview = ToDay.setSeconds(00);
            maxview = ToDay.setMilliseconds(000);
            var Xmax = new Date(maxview);
            options.axisX.viewportMaximum = Xmax;
            }
            if (maxY > 0 && maxY 11 && maxY <= 20) {
            options.axisY.interval = 5;

            } else {
            options.axisY.interval = 10;

            }

            $("#mobileChart").CanvasJSChart(options);
            var parentElement = document.getElementsByClassName("canvasjs-chart-toolbar");
            var childElement = document.getElementsByTagName("button");
            if (childElement[0].getAttribute("state") === "pan") {
            childElement[0].click();
            }

            $("#chart").CanvasJSChart(options);
            var parentElement = document.getElementsByClassName("canvasjs-chart-toolbar");
            var childElement = document.getElementsByTagName("button");
            if (childElement[0].getAttribute("state") === "pan") {
            childElement[0].click();
            }
            }
            i'm calling chart container for ipad and desktop and mobile chart for mobile but when i click some button in mobile mode it changes mode to zoom

  14. how do i include check-box in the chart so that when a particular option is clicked the graph displays only that value.

    • Abhilash,

      As of now CanvasJS don’t have check-box in the chart. But you can obtain the similar functionality of showing particular dataSeries by itemClick method of legend as shown in this page

  15. window.onload = function () {

    var chart1 = new CanvasJS.Chart(“chartContainer”,
    {
    zoomEnabled: true,
    title:{
    text: “Zoom And Observe AxisX Labels”
    },
    axisX :{
    labelAngle: -30
    },
    axisY :{
    includeZero: false
    },
    data: data, // random generator below

    });

    chart1.render();
    }

    var data = [];
    <%
    for (var i=0; i
    var dataSeries = { type: “line” };
    var dataPoints = [];

    // var pointdata =””;

    <%
    for (var n=0; n

    dataPoints.push({

    x: ,
    y:
    });

    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);

    I am using dynamic chart but its shows nothing below is the source of the above code.

    window.onload = function () {

    var chart1 = new CanvasJS.Chart(“chartContainer1”,
    {
    zoomEnabled: true,
    title:{
    text: “Zoom And Observe AxisX Labels”
    },
    axisX :{
    labelAngle: -30
    },
    axisY :{
    includeZero: false
    },
    data: data, // random generator below

    });

    chart1.render();
    }

    var data = [];

    var dataSeries = { type: “line” };
    var dataPoints = [];

    // var pointdata =”[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]”;

    dataPoints.push({

    x: 2016-03-30 07:04:26,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:28,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:30,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:32,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:34,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:36,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:38,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:40,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:42,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:44,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:46,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:48,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:50,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:52,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:54,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:56,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:58,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:00,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:02,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:04,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:06,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:08,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:10,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:12,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:14,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:16,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:18,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:20,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:22,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:24,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:26,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:28,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:30,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:32,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:34,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:36,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:38,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:40,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:42,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:44,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:46,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:48,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:50,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:52,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:54,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:56,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:58,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:00,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:02,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:04,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:06,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:08,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:10,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:12,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:14,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:16,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:18,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:20,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:22,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:24,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:26,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:28,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:30,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:32,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:34,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:36,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:38,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:40,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:42,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:44,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:46,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:48,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:50,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:52,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:54,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:56,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:58,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:00,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:02,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:04,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:06,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:08,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:10,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:12,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:14,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:16,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:18,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:20,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:22,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:24,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:26,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:28,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:30,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:32,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:34,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:36,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:38,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:40,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:42,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:44,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:46,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:48,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:50,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:52,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:54,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:56,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:58,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:00,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:02,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:04,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:06,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:08,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:10,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:12,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:14,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:16,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:18,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:20,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:22,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:24,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:26,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:28,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:30,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:32,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:34,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:36,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:38,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:40,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:42,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:44,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:46,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:48,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:50,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:52,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:54,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:56,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:58,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:00,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:02,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:04,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:06,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:08,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:10,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:12,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:14,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:16,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:18,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:20,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:22,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:24,
    y: 0.0
    });

    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);

    var dataSeries = { type: “line” };
    var dataPoints = [];

    // var pointdata =”[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]”;

    dataPoints.push({

    x: 2016-03-30 07:04:26,
    y: 26.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:28,
    y: 28.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:30,
    y: 30.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:32,
    y: 32.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:34,
    y: 34.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:36,
    y: 36.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:38,
    y: 38.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:40,
    y: 40.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:42,
    y: 42.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:44,
    y: 44.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:46,
    y: 46.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:48,
    y: 48.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:50,
    y: 50.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:52,
    y: 52.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:54,
    y: 54.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:56,
    y: 56.0
    });

    dataPoints.push({

    x: 2016-03-30 07:04:58,
    y: 58.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:00,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:02,
    y: 2.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:04,
    y: 4.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:06,
    y: 6.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:08,
    y: 8.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:10,
    y: 10.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:12,
    y: 12.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:14,
    y: 14.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:16,
    y: 16.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:18,
    y: 18.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:20,
    y: 20.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:22,
    y: 22.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:24,
    y: 24.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:26,
    y: 26.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:28,
    y: 28.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:30,
    y: 30.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:32,
    y: 32.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:34,
    y: 34.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:36,
    y: 36.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:38,
    y: 38.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:40,
    y: 40.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:42,
    y: 42.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:44,
    y: 44.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:46,
    y: 46.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:48,
    y: 48.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:50,
    y: 50.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:52,
    y: 52.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:54,
    y: 54.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:56,
    y: 56.0
    });

    dataPoints.push({

    x: 2016-03-30 07:05:58,
    y: 58.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:00,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:02,
    y: 2.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:04,
    y: 4.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:06,
    y: 6.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:08,
    y: 8.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:10,
    y: 10.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:12,
    y: 12.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:14,
    y: 14.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:16,
    y: 16.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:18,
    y: 18.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:20,
    y: 20.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:22,
    y: 22.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:24,
    y: 24.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:26,
    y: 26.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:28,
    y: 28.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:30,
    y: 30.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:32,
    y: 32.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:34,
    y: 34.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:36,
    y: 36.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:38,
    y: 38.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:40,
    y: 40.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:42,
    y: 42.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:44,
    y: 44.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:46,
    y: 46.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:48,
    y: 48.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:50,
    y: 50.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:52,
    y: 52.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:54,
    y: 54.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:56,
    y: 56.0
    });

    dataPoints.push({

    x: 2016-03-30 07:06:58,
    y: 58.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:00,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:02,
    y: 2.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:04,
    y: 4.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:06,
    y: 6.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:08,
    y: 8.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:10,
    y: 10.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:12,
    y: 12.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:14,
    y: 14.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:16,
    y: 16.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:18,
    y: 18.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:20,
    y: 20.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:22,
    y: 22.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:24,
    y: 24.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:26,
    y: 26.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:28,
    y: 28.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:30,
    y: 30.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:32,
    y: 32.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:34,
    y: 34.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:36,
    y: 36.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:38,
    y: 38.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:40,
    y: 40.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:42,
    y: 42.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:44,
    y: 44.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:46,
    y: 46.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:48,
    y: 48.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:50,
    y: 50.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:52,
    y: 52.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:54,
    y: 54.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:56,
    y: 56.0
    });

    dataPoints.push({

    x: 2016-03-30 07:07:58,
    y: 58.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:00,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:02,
    y: 2.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:04,
    y: 4.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:06,
    y: 6.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:08,
    y: 8.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:10,
    y: 10.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:12,
    y: 12.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:14,
    y: 14.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:16,
    y: 16.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:18,
    y: 18.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:20,
    y: 20.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:22,
    y: 22.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:24,
    y: 24.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:26,
    y: 26.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:28,
    y: 28.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:30,
    y: 30.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:32,
    y: 32.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:34,
    y: 34.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:36,
    y: 36.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:38,
    y: 38.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:40,
    y: 40.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:42,
    y: 42.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:44,
    y: 44.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:46,
    y: 46.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:48,
    y: 48.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:50,
    y: 50.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:52,
    y: 52.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:54,
    y: 54.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:56,
    y: 56.0
    });

    dataPoints.push({

    x: 2016-03-30 07:08:58,
    y: 58.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:00,
    y: 0.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:02,
    y: 2.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:04,
    y: 4.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:06,
    y: 6.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:08,
    y: 8.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:10,
    y: 10.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:12,
    y: 12.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:14,
    y: 14.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:16,
    y: 16.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:18,
    y: 18.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:20,
    y: 20.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:22,
    y: 22.0
    });

    dataPoints.push({

    x: 2016-03-30 07:09:24,
    y: 24.0
    });

    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);

  16. Dear Sir,

    Display graph values from database.

    I want to display graph according to database value .

    Please help i really need it.

  17. I am having problems with charts loading on Ipad and Iphones when there is a large number of datapoints. Since, it is not possible to display the detail anyway, is it possible for the chart to request a new dataset as the user zooms in for more detail? That way I can limit the return data to, say, 1000 points.

    I hope this makes sense?

    • Yes you can request dataSet once user have zoomed into a particular region. Here are the steps

      1) For initial rendering pass sampled dataPoints to chart.
      2) Once user zoom or pan into a region you can know viewportMininum and viewportMaximum using rangeChanging event.
      3) Then within rangeChanging event handler use ajax request to populate chart data for selected viewport-range. Here is an example to retrieve data and assigning to the chart.

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.