Changeset 13730

Show
Ignore:
Timestamp:
05/13/08 16:09:17 (6 months ago)
Author:
elazutkin
Message:

dojox.charting: adding a panning demo. Refs #6552. !strict

Files:
1 modified

Legend:

Unmodified
Added
Removed

  • dojox/trunk/charting/tests/test_win2d.html

    r13717 r13730  
    11<html> 
    22<head> 
    3 <title>Scrolling and scaling</title> 
     3<title>Scaling, scrolling, and panning.</title> 
    44<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    55<style type="text/css"> 
    … …  
    3232 
    3333var df = dojox.lang.functional; 
    34 var chart, scaleX = 1, scaleY = 1, offsetX = 0, offsetY = 0; 
     34var chart, moveable, scaleX = 1, scaleY = 1, offsetX = 0, offsetY = 0; 
    3535 
    36 var update = function(){ 
    37         chart.setWindow(scaleX, scaleY, offsetX, offsetY).render(); 
    38  
     36var reflect = function(){ 
    3937        df.forIn(chart.axes, function(axis){ 
    4038                var scale  = axis.getWindowScale(), 
    4139                        offset = Math.round(axis.getWindowOffset() * axis.getScaler().bounds.scale); 
    4240                if(axis.vertical){ 
    43                         setTimeout(function(){ 
    44                                 dijit.byId("scaleYSlider").setValue(scale); 
    45                                 dijit.byId("offsetYSlider").setValue(offset); 
    46                         }, 25); 
     41                        scaleY  = scale; 
     42                        offsetY = offset; 
    4743                }else{ 
    48                         setTimeout(function(){ 
    49                                 dijit.byId("scaleXSlider").setValue(scale); 
    50                                 dijit.byId("offsetXSlider").setValue(offset); 
    51                         }, 25); 
     44                        scaleX  = scale; 
     45                        offsetX = offset; 
    5246                } 
    5347        }); 
     48        setTimeout(function(){ 
     49                dijit.byId("scaleXSlider").setValue(scaleX); 
     50                dijit.byId("offsetXSlider").setValue(offsetX); 
     51                dijit.byId("scaleYSlider").setValue(scaleY); 
     52                dijit.byId("offsetYSlider").setValue(offsetY); 
     53        }, 25); 
     54}; 
     55 
     56var update = function(){ 
     57        chart.setWindow(scaleX, scaleY, offsetX, offsetY).render(); 
     58        reflect(); 
    5459}; 
    5560 
    … …  
    7883}; 
    7984 
     85var _init = null; 
     86var onMouseDown = function(e){ 
     87        _init = {x: e.clientX, y: e.clientY, ox: offsetX, oy: offsetY}; 
     88        dojo.stopEvent(e); 
     89}; 
     90 
     91var onMouseUp = function(e){ 
     92        if(_init){ 
     93                _init = null; 
     94                reflect(); 
     95                dojo.stopEvent(e); 
     96        } 
     97}; 
     98 
     99var onMouseMove = function(e){ 
     100        if(_init){ 
     101                var dx = e.clientX - _init.x, 
     102                        dy = e.clientY - _init.y; 
     103                offsetX = _init.ox - dx; 
     104                offsetY = _init.oy + dy; 
     105                chart.setWindow(scaleX, scaleY, offsetX, offsetY).render(); 
     106                dojo.stopEvent(e); 
     107        } 
     108}; 
     109 
    80110makeObjects = function(){ 
    81111        chart = new dojox.charting.Chart2D("test"); 
    82112        chart.setTheme(dojox.charting.themes.PlotKit.orange); 
    83         chart.addAxis("x", {fixLower: "minor", natural: true}); 
    84         chart.addAxis("y", {vertical: true, min: 0, max: 30, majorTickStep: 5, minorTickStep: 1}); 
     113        chart.addAxis("x", {fixLower: "minor", natural: true, stroke: "grey", 
     114                majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}}); 
     115        chart.addAxis("y", {vertical: true, min: 0, max: 30, majorTickStep: 5, minorTickStep: 1, stroke: "grey", 
     116                majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}}); 
    85117        chart.addPlot("default", {type: "Areas"}); 
    86118        chart.addSeries("Series A", [0, 25, 5, 20, 10, 15, 5, 20, 0, 25]); 
    87         chart.addSeries("Series B", [25, 0]); 
     119        chart.addAxis("x2", {fixLower: "minor", natural: true, leftBottom: false, stroke: "grey", 
     120                majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}}); 
     121        chart.addAxis("y2", {vertical: true, min: 0, max: 20, leftBottom: false, stroke: "grey", 
     122                majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}}); 
     123        chart.addPlot("plot2", {type: "Areas", hAxis: "x2", vAxis: "y2"}); 
     124        chart.addSeries("Series B", [15, 0, 15, 0, 15, 0, 15, 0, 15, 0, 15, 0, 15, 0, 15, 0, 15], {plot: "plot2"}); 
    88125        chart.addPlot("grid", {type: "Grid", hMinorLines: true}); 
    89126        chart.render(); 
    … …  
    93130    dojo.connect(dijit.byId("offsetXSlider"), "onChange", offsetXEvent); 
    94131    dojo.connect(dijit.byId("offsetYSlider"), "onChange", offsetYEvent); 
     132 
     133    dojo.connect(dojo.byId("test"), "onmousedown", onMouseDown); 
     134    dojo.connect(dojo.byId("test"), "onmousemove", onMouseMove); 
     135    dojo.connect(dojo.byId("test"), "onmouseup",   onMouseUp); 
    95136}; 
    96137 
    … …  
    100141</head> 
    101142<body class="tundra"> 
    102 <h1>Scrolling and scaling</h1> 
     143<h1>Scaling, scrolling, and panning.</h1> 
    103144<!--<p><button onclick="makeObjects();">Go</button></p>--> 
    104145<!-- intermediateChanges="true" -->