Zoom not working correctly for me
166 views
Skip to first unread message
Shane French
Nov 3, 2012, 2:46:46 PM11/3/12
to jqplot...@googlegroups.com
Hello,
I am having an issue with zoom. I have seen a few other threads about similiar issues, but they had a workaround involving commenting out UTC offset in the cursor plugin, which did not work for me.
Symptoms: when an area of a graph is selected for zoom, zoom function does not zoom there. Zoom only seems to (partially) work when zoom selected-area meets the edge of the graph (hope that makes sense).
If anyone has some ideas I could try, I'd be very grateful!
-shane
Code:
I am having an issue with zoom. I have seen a few other threads about similiar issues, but they had a workaround involving commenting out UTC offset in the cursor plugin, which did not work for me.
Symptoms: when an area of a graph is selected for zoom, zoom function does not zoom there. Zoom only seems to (partially) work when zoom selected-area meets the edge of the graph (hope that makes sense).
If anyone has some ideas I could try, I'd be very grateful!
-shane
Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Devices View</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery.ui.all.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"> </script> <script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script> <script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.js"></script> <script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.js"></script> <script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script> <script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.js"></script> <script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script> <script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.cursor.min.js"></script> <script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.cursor.js"></script> <script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.canvasTextRenderer.js"></script> <script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script> <script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.min.js"></script> <link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" /> </head> <body> <header> <h1>Chart for Device: TempDevice</h1> <p>2012-11-03 11:43:44</p> </header> <section id="main"> <div id="chart" style="height:500px;width:800px; "></div> <script>$(document).ready(function(){ $.jqplot.config.enablePlugins = true; var line1=[['2012-11-03 11:42:46',67.02],['2012-11-03 11:42:49',67.02],['2012-11-03 11:42:52',67.02],['2012-11-03 11:42:56',67.02],['2012-11-03 11:42:59',66.86],['2012-11-03 11:43:04',66.86],['2012-11-03 11:43:08',66.70],['2012-11-03 11:43:11',66.70],['2012-11-03 11:43:14',66.70],['2012-11-03 11:43:20',66.55],['2012-11-03 11:43:23',66.55],['2012-11-03 11:43:27',66.55],['2012-11-03 11:43:30',66.39],['2012-11-03 11:43:33',66.39],['2012-11-03 11:43:36',66.55],['2012-11-03 11:43:39',66.55]]; var plot = $.jqplot('chart', [line1], { cursor:{ show:true, zoom:true, showTooltip:false, followMouse: true, constrainOutsideZoom: true, clickReset: false, looseZoom: true, showVerticalLine: true, showHorizontalLine: true }, axes:{ xaxis: { renderer:$.jqplot.DateAxisRenderer, min: '2012-11-03 11:42:46', max: '2012-11-03 11:43:39', tickOptions:{showLabel: true, formatString:'%T'} }, yaxis: {min:66.39, max:67.02} } }); });</script><form name="showLastXTempDevice" action="deviceviewsinglechart.php" method="post" class="chartForm"><input type="hidden" name="action" value="makeChartLastX"><input type="hidden" name="deviceName" value="TempDevice"><input type="hidden" name="deviceMetric" value="Temperature"><input type="hidden" name="deviceID" value="16"><input type="hidden" name="metricID" value="19"><select id="fromX" name="fromX"><option value="-1 minute">Show me the data since...</option><option value="-1 minute">Last 1 minute</option><option value="-5 minutes">Last 5 minutes</option><option value="-30 minutes">Last 30 minutes</option><option value="-1 hour">Last 1 hour</option><option value="-12 hours">Last 12 hours</option><option value="-1 day">Last day</option><option value="-1 week">Last week</option><option value="-1 month">Last month</option></select></form><form name="show16" action="index.php" method="post" class="deviceAction"><input type="hidden" name="action" value="viewDevice"><input type="hidden" name="device" value="16"><input type="submit" class="buttons" name="submit" value="go back to device page"></form><script>$(function() { $('#fromX').change(function() { this.form.submit(); }); });</script><br><a href="index.php">back to devices list</a></section></body></html>
0 new messages