214 lines
8.0 KiB
HTML
214 lines
8.0 KiB
HTML
<!--[if IE 7]>
|
|
<!DOCTYPE>
|
|
<html lang="en">
|
|
<head>
|
|
<![endif]-->
|
|
<!--[if IE 8]>
|
|
<!DOCTYPE>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
|
|
<![endif]-->
|
|
<![if gte IE 9]>
|
|
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<![endif]>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Scaling, scrolling, and panning.</title>
|
|
<style type="text/css">
|
|
@import "../../../dojo/resources/dojo.css";
|
|
@import "../../../dijit/themes/tundra/tundra.css";
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
|
</style>
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
|
|
<script type="text/javascript">
|
|
|
|
dojo.require("dijit.form.HorizontalSlider");
|
|
dojo.require("dijit.form.HorizontalRule");
|
|
dojo.require("dijit.form.HorizontalRuleLabels");
|
|
dojo.require("dojo.parser"); // scan page for widgets
|
|
|
|
dojo.require("dojox.charting.Chart");
|
|
dojo.require("dojox.charting.axis2d.Default");
|
|
dojo.require("dojox.charting.plot2d.Areas");
|
|
dojo.require("dojox.charting.plot2d.Grid");
|
|
dojo.require("dojox.charting.themes.PlotKit.orange");
|
|
|
|
dojo.require("dojox.lang.functional.object");
|
|
|
|
var df = dojox.lang.functional;
|
|
var chart, moveable, scaleX = 1, scaleY = 1, offsetX = 0, offsetY = 0;
|
|
|
|
var reflect = function(){
|
|
df.forIn(chart.axes, function(axis){
|
|
var scale = axis.getWindowScale(),
|
|
offset = Math.round(axis.getWindowOffset() * axis.getScaler().bounds.scale);
|
|
if(axis.vertical){
|
|
scaleY = scale;
|
|
offsetY = offset;
|
|
}else{
|
|
scaleX = scale;
|
|
offsetX = offset;
|
|
}
|
|
});
|
|
setTimeout(function(){
|
|
dijit.byId("scaleXSlider").set("value",scaleX);
|
|
dijit.byId("offsetXSlider").set("value",offsetX);
|
|
dijit.byId("scaleYSlider").set("value",scaleY);
|
|
dijit.byId("offsetYSlider").set("value",offsetY);
|
|
}, 25);
|
|
};
|
|
|
|
var update = function(){
|
|
chart.setWindow(scaleX, scaleY, offsetX, offsetY, {duration: 1500}).render();
|
|
reflect();
|
|
};
|
|
|
|
var scaleXEvent = function(value){
|
|
scaleX = value;
|
|
dojo.byId("scaleXValue").innerHTML = value;
|
|
update();
|
|
};
|
|
|
|
var scaleYEvent = function(value){
|
|
scaleY = value;
|
|
dojo.byId("scaleYValue").innerHTML = value;
|
|
update();
|
|
};
|
|
|
|
var offsetXEvent = function(value){
|
|
offsetX = value;
|
|
dojo.byId("offsetXValue").innerHTML = value;
|
|
update();
|
|
};
|
|
|
|
var offsetYEvent = function(value){
|
|
offsetY = value;
|
|
dojo.byId("offsetYValue").innerHTML = value;
|
|
update();
|
|
};
|
|
|
|
var _init = null;
|
|
var onMouseDown = function(e){
|
|
_init = {x: e.clientX, y: e.clientY, ox: offsetX, oy: offsetY};
|
|
dojo.stopEvent(e);
|
|
};
|
|
|
|
var onMouseUp = function(e){
|
|
if(_init){
|
|
_init = null;
|
|
reflect();
|
|
dojo.stopEvent(e);
|
|
}
|
|
};
|
|
|
|
var onMouseMove = function(e){
|
|
if(_init){
|
|
var dx = e.clientX - _init.x,
|
|
dy = e.clientY - _init.y;
|
|
offsetX = _init.ox - dx;
|
|
offsetY = _init.oy + dy;
|
|
chart.setWindow(scaleX, scaleY, offsetX, offsetY).render();
|
|
dojo.stopEvent(e);
|
|
}
|
|
};
|
|
|
|
makeObjects = function(){
|
|
chart = new dojox.charting.Chart("test");
|
|
chart.setTheme(dojox.charting.themes.PlotKit.orange);
|
|
chart.addAxis("x", {fixLower: "minor", natural: true, stroke: "grey",
|
|
majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}});
|
|
chart.addAxis("y", {vertical: true, min: 0, max: 30, majorTickStep: 5, minorTickStep: 1, stroke: "grey",
|
|
majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}});
|
|
chart.addPlot("default", {type: "Areas", animate: {duration: 1800}});
|
|
chart.addSeries("Series A", [0, 25, 5, 20, 10, 15, 5, 20, 0, 25]);
|
|
chart.addAxis("x2", {fixLower: "minor", natural: true, leftBottom: false, stroke: "grey",
|
|
majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}});
|
|
chart.addAxis("y2", {vertical: true, min: 0, max: 20, leftBottom: false, stroke: "grey",
|
|
majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}});
|
|
chart.addPlot("plot2", {type: "Areas", hAxis: "x2", vAxis: "y2", animate: {duration: 1800}});
|
|
chart.addSeries("Series B", [15, 0, 15, 0, 15, 0, 15, 0, 15, 0, 15, 0, 15, 0, 15, 0, 15], {plot: "plot2"});
|
|
chart.addPlot("grid", {type: "Grid", hMinorLines: true});
|
|
chart.render();
|
|
|
|
dojo.connect(dijit.byId("scaleXSlider"), "onChange", scaleXEvent);
|
|
dojo.connect(dijit.byId("scaleYSlider"), "onChange", scaleYEvent);
|
|
dojo.connect(dijit.byId("offsetXSlider"), "onChange", offsetXEvent);
|
|
dojo.connect(dijit.byId("offsetYSlider"), "onChange", offsetYEvent);
|
|
|
|
dojo.connect(dojo.byId("test"), "onmousedown", onMouseDown);
|
|
dojo.connect(dojo.byId("test"), "onmousemove", onMouseMove);
|
|
dojo.connect(dojo.byId("test"), "onmouseup", onMouseUp);
|
|
};
|
|
|
|
dojo.addOnLoad(makeObjects);
|
|
|
|
</script>
|
|
</head>
|
|
<body class="tundra">
|
|
<h1>Scaling, scrolling, and panning.</h1>
|
|
<!--<p><button onclick="makeObjects();">Go</button></p>-->
|
|
<p>UI explained:</p>
|
|
<ul>
|
|
<li>Use Scale X and Scale Y to zoom in the chart. You can scale the chart anisotropically.</li>
|
|
<li>Use Offset X and Offset Y to move the origin of the chart.</li>
|
|
<li>You cannot move the chart outside its boundaries.
|
|
<ul>
|
|
<li>Example: if both scale factors are 1, you cannot move the origin — you should zoom in first.</li>
|
|
</ul>
|
|
</li>
|
|
<li>After applying scale/offset to the chart, sliders' positions change to reflect actual values.</li>
|
|
<li>When you zoomed in, you can grab chart with mouse and move around (pan).
|
|
<ul>
|
|
<li>Warning: can be slow on some browsers.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<table>
|
|
<tr><td align="center" class="pad">Scale X (<span id="scaleXValue">1</span>)</td></tr>
|
|
<tr><td>
|
|
<div id="scaleXSlider" dojoType="dijit.form.HorizontalSlider"
|
|
value="1" minimum="1" maximum="10" discreteValues="10" showButtons="false"
|
|
style="width: 600px;">
|
|
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="10" style="height:5px;"></div>
|
|
<div dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" minimum="1" maximum="10" count="10"
|
|
constraints="{pattern: '##'}" style="height:1.2em;font-size:75%;color:gray;"></div>
|
|
</div>
|
|
</td></tr>
|
|
<tr><td align="center" class="pad">Scale Y (<span id="scaleYValue">1</span>)</td></tr>
|
|
<tr><td>
|
|
<div id="scaleYSlider" dojoType="dijit.form.HorizontalSlider"
|
|
value="1" minimum="1" maximum="10" discreteValues="10" showButtons="false"
|
|
style="width: 600px;">
|
|
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="10" style="height:5px;"></div>
|
|
<div dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" minimum="1" maximum="10" count="10"
|
|
constraints="{pattern: '##'}" style="height:1.2em;font-size:75%;color:gray;"></div>
|
|
</div>
|
|
</td></tr>
|
|
<tr><td align="center" class="pad">Offset X (<span id="offsetXValue">0</span>)</td></tr>
|
|
<tr><td>
|
|
<div id="offsetXSlider" dojoType="dijit.form.HorizontalSlider"
|
|
value="1" minimum="0" maximum="1000" discreteValues="1001" showButtons="false"
|
|
style="width: 600px;">
|
|
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="11" style="height:5px;"></div>
|
|
<div dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" minimum="0" maximum="1000" count="11"
|
|
constraints="{pattern: '####'}" style="height:1.2em;font-size:75%;color:gray;"></div>
|
|
</div>
|
|
</td></tr>
|
|
<tr><td align="center" class="pad">Offset Y (<span id="offsetYValue">0</span>)</td></tr>
|
|
<tr><td>
|
|
<div id="offsetYSlider" dojoType="dijit.form.HorizontalSlider"
|
|
value="1" minimum="0" maximum="1000" discreteValues="1001" showButtons="false"
|
|
style="width: 600px;">
|
|
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="11" style="height:5px;"></div>
|
|
<div dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" minimum="0" maximum="1000" count="11"
|
|
constraints="{pattern: '####'}" style="height:1.2em;font-size:75%;color:gray;"></div>
|
|
</div>
|
|
</td></tr>
|
|
</table>
|
|
<div id="test" style="width: 500px; height: 300px;"></div>
|
|
<p>That's all Folks!</p>
|
|
</body>
|
|
</html>
|