Skip to content

Commit 9206573

Browse files
committed
fixes #12440 demos for charting enhancements
git-svn-id: http://svn.dojotoolkit.org/src/demos/trunk@24587 560b804f-0ae3-0310-86f3-f6aa0a117693
1 parent 3d224b2 commit 9206573

File tree

9 files changed

+2747
-0
lines changed

9 files changed

+2747
-0
lines changed

mobileCharting/README

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
-------------------------------------------------------------------------------
2+
Mobile Charting - A simple stock charting demo for mobile devices
3+
-------------------------------------------------------------------------------
4+
Authors: Damien Mandrioli, Christophe Jolif
5+
-------------------------------------------------------------------------------
6+
Demo description
7+
8+
A stock chart demo showing dojox.charting mobile features including touch interactions
9+
10+
-------------------------------------------------------------------------------
11+
Dependencies:
12+
13+
Dojo Core (fx.easing, fx)
14+
Dijit (Chart)
15+
DojoX (mobile, charting)
16+
17+
-------------------------------------------------------------------------------
18+
Installation instructions
19+
20+
Simply run the included demo.html
21+
22+
-------------------------------------------------------------------------------
23+
@rank:100

mobileCharting/demo.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2+
<html>
3+
<head>
4+
<title>Mobile Charting Demo</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<meta name="viewport"
7+
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
8+
<meta name="apple-mobile-web-app-capable" content="yes" />
9+
<link rel="stylesheet" type="text/css"
10+
href="../../dojox/mobile/themes/iphone/iphone.css">
11+
<!-- <link rel="stylesheet" type="text/css" href="../../../../dojo_current/dojox/mobile/themes/android/android.css">-->
12+
<script type="text/javascript" src="../../dojo/dojo.js"
13+
djConfig="parseOnLoad: true"></script>
14+
<script type="text/javascript" src="src.js" charset="utf-8"></script>
15+
</head>
16+
<body>
17+
<div id="view1" dojoType="dojox.mobile.View" selected="true">
18+
<h1 dojoType="dojox.mobile.Heading">Mobile Charting Demo</h1>
19+
<h2 dojoType="dojox.mobile.RoundRectCategory">Choose a company</h2>
20+
<ul id="companyChooser" dojoType="dojox.mobile.RoundRectList">
21+
<li id="googLink" dojoType="dojox.mobile.ListItem"
22+
icon="resources/images/a-icon-11.png" moveTo="view2"
23+
transition="slide">Google Inc.</li>
24+
<li id="yahooLink" dojoType="dojox.mobile.ListItem"
25+
icon="resources/images/a-icon-11.png" moveTo="view2"
26+
transition="slide">Yahoo! Inc.</li>
27+
<li id="msftLink" dojoType="dojox.mobile.ListItem"
28+
icon="resources/images/a-icon-11.png" moveTo="view2"
29+
transition="slide">Microsoft Corp.</li>
30+
</ul>
31+
</div>
32+
<div id="view2" dojoType="dojox.mobile.View">
33+
<h1 id="view2head1" dojoType="dojox.mobile.Heading" back="Back"
34+
moveTo="view1">Stock View</h1>
35+
<div dojoType="dojox.mobile.RoundRect" id="container">
36+
<button dojoType="dojox.mobile.Button" class="mblBlueButton"
37+
style="width: 40px; height: 27px;" id="zoomButton1">3m</button>
38+
<button dojoType="dojox.mobile.Button" class="mblBlueButton"
39+
style="width: 40px; height: 27px;" id="zoomButton2">6m</button>
40+
<button dojoType="dojox.mobile.Button" class="mblBlueButton"
41+
style="width: 40px; height: 27px;" id="zoomButton3">1y</button>
42+
<button dojoType="dojox.mobile.Button" class="mblBlueButton"
43+
style="width: 45px; height: 27px;" id="zoomButton4">Max</button>
44+
<button dojoType="dojox.mobile.Button" class="mblRedButton"
45+
id="indicatorMode" duration="0" style="width: 99px; height: 27px;">Touch
46+
Mode</button>
47+
<div dojoType="dojox.charting.widget.Chart"
48+
margins="{ l: 0, r: 0, t: 10, b: 0 }" theme="customClaroTheme"
49+
style="-webkit-user-select: none; outline: none"
50+
id="stockChart">
51+
<div class="plot" name="gridPlot" type="Grid" enableCache="true"></div>
52+
<div class="axis" name="x" enableCache="true"
53+
font="normal normal normal 11pt Helvetica" fixUpper="major"
54+
includeZero="true" majorTickStep="50" labelFunc="timeLabelFunction"></div>
55+
<div class="axis" name="y" vertical="true" min="0"
56+
font="normal normal normal 11pt Helvetica"></div>
57+
<div class="axis" name="y2" vertical="true" min="0"
58+
leftBottom="false" type="Invisible"
59+
font="italic normal normal 8pt Helvetica"></div>
60+
<div class="plot" name="volumePlot" type="Columns"
61+
enableCache="true" vAxis="y2"></div>
62+
<div class="plot" name="default" type="Areas"></div>
63+
</div>
64+
</div>
65+
<div id="touchLabel"
66+
style="display: none; background-color: white; border: 1px solid #333333; position: absolute; top: 150px; left: 80px; right: 80px; text-align: center; font-size: 16pt; font-weight: bolder; color: #333333"; margin-left:80px;></div>
67+
<div id="helpBox" dojoType="dojox.mobile.RoundRect">
68+
<img src="resources/images/a-icon-12.png"
69+
style="vertical-align: middle;" /><b>Chart Interactions</b><br />
70+
<b>Double-tap</b>: Zoom / Unzoom.<br />
71+
<b>Chart Touch</b>: Slide visible data range or show data indicator.
72+
(click &laquo;Touch Mode&raquo; button to alternate).<br />
73+
<b>Wide-Screen View</b>: Flip the screen horizontally.
74+
</div>
75+
</div>
76+
</body>
77+
</html>

mobileCharting/demo.profile.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
dependencies = {
2+
layers: [
3+
{
4+
name: "../demos/mobileCharting/src.js",
5+
resourceName: "demos.mobileCharting.src",
6+
dependencies: [
7+
"demos.mobileCharting.src"
8+
]
9+
}
10+
],
11+
12+
prefixes: [
13+
[ "dijit", "../dijit" ],
14+
[ "dojox", "../dojox" ],
15+
[ "demos", "../demos" ]
16+
]
17+
}

0 commit comments

Comments
 (0)