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.
Notesvar chart = new CanvasJS.Chart("container",
{
.
.
zoomEnabled: true,
.
.
});
chart.render();
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.
In the above example, you can observe the toolbar with default color & border thickness being applied to zoom / pan, reset buttons. You can customize the look & feel of toolbar to match with your webpage theme using toolbar options. Please refer to Chart Toolbar for more information on the same.
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.
70 Comments
Can we add a zoom back one step button, like the reset button?
Besir, as of not that feature is not available.
In any way, can I modify the library to make it so?
As far as I can see there is no easy workaround here…
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.
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?
As of now there isn’t a way to access this data. But am considering API access for future versions.
Is this available yet?
Sorry, this feature is not available yet.
And now?
We have just released v1.8.0 Beta which supports Syncing Multiple Chart Ranges, Vertical Zooming & Controlling Pie/Doughnut Radius. Please refer to the release blog for more information.
How about zooming in on the Y axis as well ?
Currently i can only zoom in – in the X axis
Antwnis, Zooming on Y Axis isn’t available yet.
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.
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.
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.
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.
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.
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?
In v1.5 we have increased the limit. Please download the early build from here.
Is there api access to pan/zoom yet? I’d like to zoom to specified x indexes.
As of now we don’t have API access to pan/zoom.
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?
Adam,
Without looking into the code it’s difficult to guess. Can you please create a jsfiddle of your code so that we can look into it.
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?
I have the same problem. Is there a workaround for this? Form tag can not be avoided in our web application.
Pauline,
Thanks for reporting. We have fixed this issue. Here is an internal build for you. Please let us know if its working as expected.
Thanks for reporting. We have fixed this issue. Here is an internal build for you. Please let us know if its working as expected.
Works Great.Thanks! When is the next release with this fix?
Pauline,
You can expect it within a week or so.
@Carlo,
Please download the latest version here.
For me there is an exception in the Hide method.
if (element.style)
element.style.display = “none”;
In my case, element is undefined.
If i modify the code to check if element is not undefined everything works correctly, even zoom and pan.
Will there be a possibility to zoom in y axis soon?
Kevin,
As of now it is not possible but we will consider for future versions.
i found some problem in zoom when i am using on tablet
Kapil,
Can you please create a new forum thread explaining the problem you are facing?
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) ?
As of now it is not possible to sync zoom level across charts.
We have just released v1.8.0 Beta which supports Syncing Multiple Chart Ranges, Vertical Zooming & Controlling Pie/Doughnut Radius. Please refer to the Sync Multiple Chart Ranges for more information.
How do you get the zoom/pan icons to appear? On mine they’re just text.
michael,
Please download the latest version of CanvasJS and it should show icons instead of text.
Great, thanks. You might want to get the latest version up on CDNJS, too.
How can i use zoom option with live dynamic data
Yes. Here is an example.
in zoom state data is fixed and screen dose not scroll, screen should scroll with new data
Mahamood,
We think this behavior is right because chart should not change the position once the user has selected a range to zoom into. Otherwise it’ll make it difficult to analyze live charts with huge number of data.
But you can still customize this behavior as shown in this example.
Thank for your support and great lib.
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.
SaharZ,
Zoom out step-by-step is not available in the library. You can work around as shown in example.
Great, thank for your support.
The example is corrected in http://jsfiddle.net/mmazlomi/rmserscv/
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.
Thanks!
That’s just what I need!
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
Venkat,
You can set mode to pan, even on click of reset by using rangeChanging event. Check this fiddle. Hope this resolves your issue.
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
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);
Simmi,
Kindly follow Javascript Date-format to add date in x-values. Here is the working code.
Dear Sir,
Display graph values from database.
I want to display graph according to database value .
Please help i really need it.
Vineet,
Please refer to this thread.
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.