You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
13 KiB
318 lines
13 KiB
<!--[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, gfxRenderer: 'svg,silverlight,vml,canvas'"></script> |
|
<script> |
|
dojo.require("dojox.charting.Chart"); |
|
dojo.require("dojox.charting.axis2d.Default"); |
|
dojo.require("dojox.charting.plot2d.ClusteredBars"); |
|
dojo.require("dojox.charting.plot2d.ClusteredColumns"); |
|
dojo.require("dojox.charting.plot2d.Default"); |
|
dojo.require("dojox.charting.plot2d.StackedAreas"); |
|
dojo.require("dojox.charting.plot2d.Bubble"); |
|
dojo.require("dojox.charting.plot2d.Candlesticks"); |
|
dojo.require("dojox.charting.plot2d.OHLC"); |
|
dojo.require("dojox.charting.plot2d.Pie"); |
|
|
|
var charts = {}, backgroundImage, backgroundColor, color, lastThemeName = ""; |
|
|
|
function update(name){ |
|
// change the theme based on the select change. |
|
var select = dojo.byId("themeChooser"), |
|
usePageStyle = dojo.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; |
|
} |
|
|
|
dojo.require("dojox.charting.themes." + name); |
|
|
|
var theme = dojo.getObject('dojox.charting.themes.' + name); |
|
var chartStyle = theme.chart; |
|
|
|
// set the suggested page style |
|
if(usePageStyle && chartStyle.pageStyle){ |
|
dojo.style(dojo.body(), chartStyle.pageStyle); |
|
}else{ |
|
dojo.style(dojo.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 = dojo.style(dojo.body(), "backgroundImage"); |
|
backgroundColor = dojo.style(dojo.body(), "backgroundColor"); |
|
color = dojo.style(dojo.body(), "color"); |
|
|
|
charts.bars = new dojox.charting.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 dojox.charting.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 dojox.charting.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: "Default", 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 dojox.charting.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 dojox.charting.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 dojox.charting.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 dojox.charting.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 dojox.charting.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 dojox.charting.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); |
|
dojo.create("span", { |
|
style: "display: inline-block; margin-left: 1em;", |
|
innerHTML: '<a href="theme_preview.html">Back to the Theme Previewer »»</a>' |
|
}, dojo.query("p.controls")[0]); |
|
} |
|
|
|
update(name); |
|
|
|
dojo.connect(dojo.byId("themeChooser"), "onchange", update); |
|
dojo.connect(dojo.byId("pageStyleChooser"), "onclick", update); |
|
} |
|
dojo.addOnLoad(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>
|
|
|