|
| 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 «Touch Mode» button to alternate).<br /> |
| 73 | + <b>Wide-Screen View</b>: Flip the screen horizontally. |
| 74 | + </div> |
| 75 | + </div> |
| 76 | +</body> |
| 77 | +</html> |
0 commit comments