317 lines
13 KiB
HTML
317 lines
13 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>Example Dojo Chart Types</title>
|
|
<style>
|
|
@import "../../../dojo/resources/dojo.css";
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
|
#chartContainer {
|
|
position: relative;
|
|
height: 660px;
|
|
}
|
|
.chart {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 300px;
|
|
height: 200px;
|
|
}
|
|
#lines, #area, #columns {
|
|
left: 320px;
|
|
}
|
|
#bubbles, #area, #pieLin {
|
|
top: 220px;
|
|
}
|
|
#pieLin, #pieFan, #ohlc {
|
|
left: 640px;
|
|
}
|
|
#candle, #columns, #ohlc {
|
|
top: 440px;
|
|
}
|
|
|
|
</style>
|
|
<script src="../../../dojo/dojo.js" data-dojo-config="isDebug: false, async: true, gfxRenderer: 'svg,silverlight,vml,canvas'"></script>
|
|
<script>
|
|
require(["dojo/_base/window", "dojo/dom", "dojo/dom-construct", "dojo/dom-style", "dojo/ready", "dojo/on", "dojo/query",
|
|
"dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/ClusteredBars",
|
|
"dojox/charting/plot2d/ClusteredColumns", "dojox/charting/plot2d/Default", "dojox/charting/plot2d/StackedAreas",
|
|
"dojox/charting/plot2d/Bubble", "dojox/charting/plot2d/Candlesticks", "dojox/charting/plot2d/OHLC",
|
|
"dojox/charting/plot2d/Pie"],
|
|
function(win, dom, domConstruct, domStyle, ready, on, query, Chart, Default, ClusteredBars,
|
|
ClusteredColumns, Lines, StackedAreas, Bubble, Candlesticks, OHLC, Pie){
|
|
|
|
var charts = {}, backgroundImage, backgroundColor, color, lastThemeName = "";
|
|
|
|
function update(name){
|
|
// change the theme based on the select change.
|
|
var select = dom.byId("themeChooser"),
|
|
usePageStyle = dom.byId("pageStyleChooser").checked;
|
|
|
|
var test = false;
|
|
if(name){
|
|
// make sure it's in the list first.
|
|
for(var i=0, l=select.options.length; i<l; i++){
|
|
if(select.options[i].value == name){
|
|
select.options[i].selected = true;
|
|
test = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if(!test){
|
|
name = select.options[select.selectedIndex].value;
|
|
}
|
|
|
|
require(["dojox/charting/themes/" + name.replace(".", "/")], function(theme){
|
|
|
|
var chartStyle = theme.chart;
|
|
|
|
// set the suggested page style
|
|
if(usePageStyle && chartStyle.pageStyle){
|
|
domStyle.set(win.body(), chartStyle.pageStyle);
|
|
}else{
|
|
domStyle.set(win.body(), {
|
|
backgroundColor: backgroundColor,
|
|
backgroundImage: backgroundImage,
|
|
color: color
|
|
});
|
|
}
|
|
// set the theme
|
|
if(lastThemeName != name){
|
|
lastThemeName = name;
|
|
if(theme){
|
|
for(var chartName in charts){
|
|
charts[chartName].setTheme(theme).render();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function init(){
|
|
// retrieve initial values for fg/bg
|
|
backgroundImage = domStyle.get(win.body(), "backgroundImage");
|
|
backgroundColor = domStyle.get(win.body(), "backgroundColor");
|
|
color = domStyle.get(win.body(), "color");
|
|
|
|
charts.bars = new Chart("bars").
|
|
addAxis("y", {fixLower: "minor", fixUpper: "minor", natural: true}).
|
|
addAxis("x", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}).
|
|
addPlot("default", {type: ClusteredBars, gap: 5}).
|
|
addSeries("Series A", [0.53, 0.51]).
|
|
addSeries("Series B", [0.84, 0.79]).
|
|
addSeries("Series C", [0.68, 0.95]).
|
|
addSeries("Series D", [0.77, 0.66]);
|
|
|
|
charts.columns = new Chart("columns").
|
|
addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true}).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}).
|
|
addPlot("default", {type: ClusteredColumns, gap: 5}).
|
|
addSeries("Series A", [0.53, 0.51]).
|
|
addSeries("Series B", [0.84, 0.79]).
|
|
addSeries("Series C", [0.68, 0.95]).
|
|
addSeries("Series D", [0.77, 0.66]);
|
|
|
|
charts.lines = new Chart("lines").
|
|
addAxis("x", {min: 0, max: 6, fixLower: "minor", fixUpper: "minor", natural: true}).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true, max: 1}).
|
|
addPlot("default", {type: Lines, lines: true, markers: true, tension: "X"}).
|
|
addSeries("Series A", [{x: 0.5, y: 0.2}, {x: 1.5, y: 0.4}, {x: 2.0, y: 0.1}, {x: 5.0, y: 0.9}]).
|
|
addSeries("Series B", [{x: 0.3, y: 0.6}, {x: 3.0, y: 0.5}, {x: 4.0, y: 0.9}, {x: 5.5, y: 0.7}]).
|
|
addSeries("Series C", [{x: 0.8, y: 0.8}, {x: 3.4, y: 0.2}, {x: 5.3, y: 0.3}]).
|
|
addSeries("Series D", [{x: 0.6, y: 0.9}, {x: 3.2, y: 0.8}, {x: 5.0, y: 0.1}]);
|
|
|
|
charts.pieFan = new Chart("pieFan").
|
|
addPlot("default", {type: Pie, radius: 60, labelOffset: -20, radGrad: dojox.gfx.renderer == "vml" ? "fan" : "native"}).
|
|
addSeries("Series A", [0.35, 0.25, 0.42, 0.53, 0.69]);
|
|
|
|
charts.bubbles = new Chart("bubbles").
|
|
addAxis("x", {min: 0, max: 6, fixLower: "minor", fixUpper: "minor", natural: true}).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}).
|
|
addPlot("default", {type: Bubble}).
|
|
addSeries("Series A", [{x: 0.5, y: 5.0, size: 1.4}, {x: 1.5, y: 1.5, size: 4.5}, {x: 2.0, y: 9.0, size: 1.5}, {x: 5.0, y: 0.3, size: 0.8}]).
|
|
addSeries("Series B", [{x: 0.3, y: 8.0, size: 2.5}, {x: 4.0, y: 6.0, size: 2.1}, {x: 5.5, y: 2.0, size: 3.2}]).
|
|
addSeries("Series C", [{x: 2.0, y: 5.5, size: 2.5}, {x: 3.5, y: 2.5, size: 3.5}, {x: 5.2, y: 7.0, size: 3.0}]).
|
|
addSeries("Series D", [{x: 3.2, y: 8.0, size: 2.0}]);
|
|
|
|
charts.area = new Chart("area").
|
|
addAxis("x", {fixLower: "major", fixUpper: "major"}).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0}).
|
|
addPlot("default", {type: StackedAreas, tension: "X"}).
|
|
addSeries("Series A", [-2, 1.1, 1.2, 1.3, 1.4, 1.5, -1.6]).
|
|
addSeries("Series B", [1, 1.6, 1.3, 1.4, 1.1, 1.5, 1.1]).
|
|
addSeries("Series C", [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6]);
|
|
|
|
charts.pieLin = new Chart("pieLin").
|
|
addPlot("default", {type: Pie, radius: 60, labelOffset: -20, radGrad: "linear"}).
|
|
addSeries("Series A", [0.35, 0.25, 0.42, 0.53, 0.69]);
|
|
|
|
charts.candle = new Chart("candle").
|
|
addPlot("default", {type: Candlesticks, gap: 1}).
|
|
addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}).
|
|
addSeries("Series A", [
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6, mid: 18 },
|
|
{ open: 22, close: 18, high: 22, low: 11, mid: 21 },
|
|
{ open: 18, close: 29, high: 32, low: 14, mid: 27 },
|
|
{ open: 29, close: 24, high: 29, low: 13, mid: 27 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6, mid: 18 },
|
|
{ open: 22, close: 18, high: 22, low: 11, mid: 21 },
|
|
{ open: 18, close: 29, high: 32, low: 14, mid: 27 },
|
|
{ open: 29, close: 24, high: 29, low: 13, mid: 27 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6 },
|
|
{ open: 22, close: 18, high: 22, low: 11 },
|
|
{ open: 18, close: 29, high: 32, low: 14 },
|
|
{ open: 29, close: 24, high: 29, low: 13 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 }]);
|
|
charts.ohlc = new Chart("ohlc").
|
|
addPlot("default", {type: OHLC, gap: 1}).
|
|
addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}).
|
|
addSeries("Series A", [
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6 },
|
|
{ open: 22, close: 18, high: 22, low: 11 },
|
|
{ open: 18, close: 29, high: 32, low: 14 },
|
|
{ open: 29, close: 24, high: 29, low: 13 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6 },
|
|
{ open: 22, close: 18, high: 22, low: 11 },
|
|
{ open: 18, close: 29, high: 32, low: 14 },
|
|
{ open: 29, close: 24, high: 29, low: 13 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6 },
|
|
{ open: 22, close: 18, high: 22, low: 11 },
|
|
{ open: 18, close: 29, high: 32, low: 14 },
|
|
{ open: 29, close: 24, high: 29, low: 13 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 }]);
|
|
var name;
|
|
if(window.location.search.indexOf("?")>-1){
|
|
name = window.location.search.substring(1);
|
|
domConstruct.create("span", {
|
|
style: "display: inline-block; margin-left: 1em;",
|
|
innerHTML: '<a href="theme_preview-amd.html">Back to the Theme Previewer »»</a>'
|
|
}, query("p.controls")[0]);
|
|
}
|
|
|
|
update(name);
|
|
|
|
on(dom.byId("themeChooser"), "change", update);
|
|
on(dom.byId("pageStyleChooser"), "click", update);
|
|
}
|
|
ready(init);
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Example Dojo Chart Types</h1>
|
|
<p>Choose a theme from the list below, a theme will be loaded dynamically, and the charts will be rendered using it.</p>
|
|
<p class="controls"><label for="themeChooser">Available themes: </label>
|
|
<select id="themeChooser">
|
|
<optgroup label="Gradients">
|
|
<option value="Julie" selected="selected">Julie</option>
|
|
<option value="ThreeD">ThreeD</option>
|
|
<option value="Chris">Chris</option>
|
|
<option value="Tom">Tom</option>
|
|
<option value="Claro">Claro</option>
|
|
<option value="PrimaryColors">PrimaryColors</option>
|
|
<option value="Electric">Electric</option>
|
|
<option value="Charged">Charged</option>
|
|
<option value="Renkoo">Renkoo</option>
|
|
</optgroup>
|
|
<optgroup label="Classic">
|
|
<option value="Adobebricks">Adobebricks</option>
|
|
<option value="Algae">Algae</option>
|
|
<option value="Bahamation">Bahamation</option>
|
|
<option value="BlueDusk">BlueDusk</option>
|
|
<option value="CubanShirts">CubanShirts</option>
|
|
<option value="Desert">Desert</option>
|
|
<option value="Distinctive">Distinctive</option>
|
|
<option value="Dollar">Dollar</option>
|
|
<option value="Grasshopper">Grasshopper</option>
|
|
<option value="Grasslands">Grasslands</option>
|
|
<option value="GreySkies">GreySkies</option>
|
|
<option value="Harmony">Harmony</option>
|
|
<option value="IndigoNation">IndigoNation</option>
|
|
<option value="Ireland">Ireland</option>
|
|
<option value="MiamiNice">MiamiNice</option>
|
|
<option value="Midwest">Midwest</option>
|
|
<option value="Minty">Minty</option>
|
|
<option value="PurpleRain">PurpleRain</option>
|
|
<option value="RoyalPurples">RoyalPurples</option>
|
|
<option value="SageToLime">SageToLime</option>
|
|
<option value="Shrooms">Shrooms</option>
|
|
<option value="Tufte">Tufte</option>
|
|
<option value="WatersEdge">WatersEdge</option>
|
|
<option value="Wetland">Wetland</option>
|
|
</optgroup>
|
|
<optgroup label="PlotKit">
|
|
<option value="PlotKit.blue">PlotKit.blue</option>
|
|
<option value="PlotKit.cyan">PlotKit.cyan</option>
|
|
<option value="PlotKit.green">PlotKit.green</option>
|
|
<option value="PlotKit.orange">PlotKit.orange</option>
|
|
<option value="PlotKit.purple">PlotKit.purple</option>
|
|
<option value="PlotKit.red">PlotKit.red</option>
|
|
</optgroup>
|
|
</select>
|
|
|
|
<input id="pageStyleChooser" type="checkbox" checked="checked" value="">
|
|
<label for="pageStyleChooser"> use suggested page style</label>
|
|
</p>
|
|
<div id="chartContainer">
|
|
<div class="chart" id="bars"></div>
|
|
<div class="chart" id="lines"></div>
|
|
<div class="chart" id="pieFan"></div>
|
|
<div class="chart" id="bubbles"></div>
|
|
<div class="chart" id="area"></div>
|
|
<div class="chart" id="pieLin"></div>
|
|
<div class="chart" id="columns"></div>
|
|
<div class="chart" id="candle"></div>
|
|
<div class="chart" id="ohlc"></div>
|
|
<div class="chart" id="scatter"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|