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.
395 lines
15 KiB
395 lines
15 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>Chart: Selectable Legend test</title> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
@import "../../../dijit/themes/claro/claro.css"; |
|
@import "../resources/Legend.css"; |
|
</style> |
|
<style> |
|
.bars{ |
|
width:300px; |
|
height:200px; |
|
} |
|
.columns{ |
|
width:300px; |
|
height:250px; |
|
} |
|
.pie { |
|
width:500px; |
|
height:300px; |
|
} |
|
.bubble{ |
|
width:320px; |
|
height:300px; |
|
} |
|
.spider { |
|
width:400px; |
|
height:400px; |
|
} |
|
|
|
</style> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> |
|
<script type="text/javascript"> |
|
dojo.require("dijit.dijit"); |
|
dojo.require("dojox.charting.Chart"); |
|
dojo.require("dojox.charting.axis2d.Default"); |
|
dojo.require("dojox.charting.plot2d.Lines"); |
|
dojo.require("dojox.charting.plot2d.StackedLines"); |
|
dojo.require("dojox.charting.plot2d.StackedAreas"); |
|
dojo.require("dojox.charting.plot2d.Bars"); |
|
dojo.require("dojox.charting.plot2d.ClusteredBars"); |
|
dojo.require("dojox.charting.plot2d.StackedBars"); |
|
dojo.require("dojox.charting.plot2d.Columns"); |
|
dojo.require("dojox.charting.plot2d.ClusteredColumns"); |
|
dojo.require("dojox.charting.plot2d.StackedColumns"); |
|
dojo.require("dojox.charting.plot2d.Candlesticks"); |
|
dojo.require("dojox.charting.plot2d.Spider"); |
|
dojo.require("dojox.charting.plot2d.Scatter"); |
|
|
|
dojo.require("dojox.charting.plot2d.Bubble"); |
|
dojo.require("dojox.charting.plot2d.Pie"); |
|
dojo.require("dojox.charting.themes.MiamiNice"); |
|
dojo.require("dojox.charting.widget.SelectableLegend"); |
|
dojo.require("dojox.charting.action2d.Highlight"); |
|
|
|
dojo.addOnLoad(function(){ |
|
var bars = new dojox.charting.Chart("bars"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default",{type: "Bars",gap:2}). |
|
addAxis("x",{natural: true, includeZero: true}). |
|
addAxis("y",{natural: true, vertical:true}). |
|
addSeries("A",[1,3,5,7,2,4,6]). |
|
addSeries("B",[2,4,6,8,3,5,7], {hide: true}). |
|
render(); |
|
var barsLegend = new dojox.charting.widget.SelectableLegend({chart: bars},"barsLegend"); |
|
|
|
var clusteredBars = new dojox.charting.Chart("clusteredBars"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default",{type:"ClusteredBars",gap:2}). |
|
addAxis("x",{natural: true, includeZero: true}). |
|
addAxis("y",{natural: true, vertical:true}). |
|
addSeries("A",[1,3,5,7,2,4,6]). |
|
addSeries("B",[2,4,6,8,3,5,7], {hide: true}). |
|
addSeries("C",[6,4,2,7,5,3,1]); |
|
new dojox.charting.action2d.Highlight(clusteredBars, "default"); |
|
clusteredBars.render(); |
|
var clusteredBarsLegend = new dojox.charting.widget.SelectableLegend({chart: clusteredBars},"clusteredBarsLegend"); |
|
|
|
var stackedBars = new dojox.charting.Chart("stackedBars"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default", {type:"StackedBars",gap:2}). |
|
addAxis("x",{natual: true, includeZero: true, majorTickStep:1}). |
|
addAxis("y",{natual: true, vertical: true}). |
|
addSeries("A",[1,3,5,7,2,4,6]). |
|
addSeries("B",[2,4,6,8,3,5,7], {hide: true}). |
|
addSeries("C",[6,4,2,7,5,3,1]). |
|
render(); |
|
var stackedBarsLegend = new dojox.charting.widget.SelectableLegend({chart: stackedBars, autoScale: true},"stackedBarsLegend"); |
|
|
|
var lines = new dojox.charting.Chart("lines"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default",{type: "Lines",markers:true}). |
|
addAxis("y",{natural: true, vertical:true,includeZero: true}). |
|
addAxis("x",{natural: true,includeZero: true}). |
|
addSeries("A",[2,4,6,8,3,5,7]). |
|
addSeries("B",[1,3,5,7,2,4,6],{hide: true}). |
|
addSeries("C",[6,4,2,7,5,3,1]). |
|
render(); |
|
var linesLegend = new dojox.charting.widget.SelectableLegend({chart: lines},"linesLegend"); |
|
|
|
var stackedLines = new dojox.charting.Chart("stackedLines"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default",{type: "StackedLines",markers:true}). |
|
addAxis("y",{natural: true, vertical:true,includeZero: true}). |
|
addAxis("x",{natural: true,includeZero: true}). |
|
addSeries("A",[2,4,6,8,3,5,7]). |
|
addSeries("B",[1,3,5,7,2,4,6],{hide: true}). |
|
addSeries("C",[6,4,2,7,5,3,1]). |
|
render(); |
|
var stackedLinesLegend = new dojox.charting.widget.SelectableLegend({chart: stackedLines, autoScale: true},"stackedLinesLegend"); |
|
|
|
|
|
var stackedArea = new dojox.charting.Chart("stackedArea"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default", {type:"StackedAreas",tension:4}). |
|
addAxis("y",{natural: true, includeZero: true, vertical:true}). |
|
addAxis("x",{natural: true}). |
|
addSeries("A",[1,3,5,7,2,4,6]). |
|
addSeries("B",[2,4,6,8,3,5,7], {hide: true}). |
|
addSeries("C",[6,4,2,7,5,3,1]). |
|
render(); |
|
var stackedAreaLegend = new dojox.charting.widget.SelectableLegend({chart: stackedArea, autoScale: true},"stackedAreaLegend"); |
|
|
|
var candleSticks = new dojox.charting.Chart("candleSticks"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default", {type:"Candlesticks", gap: 3}). |
|
addAxis("y",{natural: true, includeZero: true, vertical:true}). |
|
addAxis("x",{natural: true}). |
|
addSeries("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 } |
|
]). |
|
addSeries("B",[ |
|
{ 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: 12, high: 19, low: 7 }, |
|
{ open: 12, close: 20, high: 22, low: 8 } |
|
], {hide: true}). |
|
render(); |
|
var candleSticksLegend = new dojox.charting.widget.SelectableLegend({chart: candleSticks},"candleSticksLegend"); |
|
|
|
var scatter = new dojox.charting.Chart("scatter"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default",{type: "Scatter",markers:true}). |
|
addAxis("y",{natural: true, vertical:true,includeZero: true}). |
|
addAxis("x",{natural: true,includeZero: true}). |
|
addSeries("A",[2,4,6,8,3,5,7]). |
|
addSeries("B",[1,3,5,7,2,4,6],{hide: true}). |
|
addSeries("C",[6,4,2,7,5,3,1]). |
|
render(); |
|
var scatterLegend = new dojox.charting.widget.SelectableLegend({chart: scatter},"scatterLegend"); |
|
|
|
|
|
var columns = new dojox.charting.Chart("columns"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default",{type: "Columns",gap:2}). |
|
addAxis("y",{natural: true, includeZero: true, vertical:true}). |
|
addAxis("x",{natural: true}). |
|
addSeries("A",[1,3,5,7,2,4,6]). |
|
addSeries("B",[2,4,6,8,3,5,7], {hide: true}). |
|
render(); |
|
var columnsLegend = new dojox.charting.widget.SelectableLegend({chart: columns},"columnsLegend"); |
|
|
|
var clusteredColumns = new dojox.charting.Chart("clusteredColumns"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default",{type:"ClusteredColumns",gap:2}). |
|
addAxis("y",{natural: true, includeZero: true, vertical:true}). |
|
addAxis("x",{natural: true}). |
|
addSeries("A",[1,3,5,7,2,4,6]). |
|
addSeries("B",[2,4,6,8,3,5,7], {hide: true}). |
|
addSeries("C",[6,4,2,7,5,3,1]). |
|
render(); |
|
var clusteredColumnsLegend = new dojox.charting.widget.SelectableLegend({chart: clusteredColumns},"clusteredColumnsLegend"); |
|
|
|
var stackedColumns = new dojox.charting.Chart("stackedColumns"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default", {type:"StackedColumns",gap:2}). |
|
addAxis("y",{natual: true, includeZero: true, majorTickStep:1, vertical: true}). |
|
addAxis("x",{natual: true}). |
|
addSeries("A",[1,3,5,7,2,4,6]). |
|
addSeries("B",[2,4,6,8,3,5,7], {hidden: true}). |
|
addSeries("C",[6,4,2,7,5,3,1]). |
|
render(); |
|
var stackedColumnsLegend = new dojox.charting.widget.SelectableLegend({chart: stackedColumns, autoScale: true},"stackedColumnsLegend"); |
|
|
|
var linesColumns = new dojox.charting.Chart("linesColumns"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("lines",{type: "Lines",markers:true}). |
|
addPlot("default",{type: "Columns",gap:2}). |
|
addAxis("y",{natural: true, vertical:true,includeZero: true}). |
|
addAxis("x",{natural: true,includeZero: true}). |
|
addSeries("A",[2,4,6,8,3,5,7]). |
|
addSeries("B",[1,3,5,7,2,4,6],{plot:"lines", hidden: true}). |
|
render(); |
|
var linesColumnsLegend = new dojox.charting.widget.SelectableLegend({chart: linesColumns},"linesColumnsLegend"); |
|
|
|
var pie = new dojox.charting.Chart("pie"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default",{type:"Pie",radius:100,font: "normal normal 10pt Tahoma",htmlLabels:true,labelOffset:-20}). |
|
addSeries("A",[{ |
|
y: 12.1, |
|
text: "China" |
|
},{ |
|
y: 9.52, |
|
text: "India" |
|
}, { |
|
y: 2.66, |
|
text: "USA", |
|
hidden: true |
|
}, { |
|
y: 2.06, |
|
text: "Indonesia" |
|
}, { |
|
y: 1.63, |
|
text: "Brazil" |
|
},{ |
|
y: 1.48, |
|
text: "Russian" |
|
},{ |
|
y: 1.29, |
|
text: "Pakistan" |
|
},{ |
|
y: 1.25, |
|
text: "Japan" |
|
}]). |
|
render(); |
|
var ainm = new dojox.charting.action2d.Highlight(pie,"default"); |
|
var pieLegend = new dojox.charting.widget.SelectableLegend({chart: pie,horizontal:false, outline: true},"pieLegend"); |
|
|
|
var bubble = new dojox.charting.Chart("bubble"). |
|
setTheme(dojox.charting.themes.MiamiNice). |
|
addPlot("default",{type:"Bubble"}). |
|
addAxis("x",{natual:true, includeZero: true, max:7}). |
|
addAxis("y",{natual:true, vertical: true, includeZero: true,max:10}). |
|
addSeries("A",[{x:3,y:5,size:1},{x:1,y:7,size:1},{x:4,y:2,size:3}]). |
|
addSeries("B",[{x:5,y:5,size:2},{x:2,y:3,size:4},{x:6,y:2,size:1}], {hidden: true}). |
|
addSeries("C",[{x:2,y:7,size:3},{x:6,y:8,size:3}]). |
|
render(); |
|
var bubbleLegend = new dojox.charting.widget.SelectableLegend({chart: bubble, horizontal:false, outline:true},"bubbleLegend"); |
|
|
|
var spider = new dojox.charting.Chart("spider") |
|
.setTheme(dojox.charting.themes.MiamiNice) |
|
.addPlot("default", { |
|
type: "Spider", |
|
labelOffset: -10, |
|
divisions: 7, |
|
axisColor: "lightgray", |
|
spiderColor: "silver", |
|
seriesFillAlpha: 0.2, |
|
spiderOrigin: 0.16, |
|
markerSize: 3, |
|
precision: 0, |
|
spiderType: "polygon" |
|
}) |
|
.addSeries("China", {data: {"GDP": 2,"area": 6,"population": 2000,"inflation": 15,"growth": 12}}, { fill: "blue" }) |
|
.addSeries("France", {data: {"GDP": 6,"area": 15,"population": 500,"inflation": 5,"growth": 6}}, { fill: "red" }) |
|
.addSeries("USA", {data: {"GDP": 3,"area": 20,"population": 1500,"inflation": 10,"growth": 3}}, { fill: "green", hidden: true }) |
|
.addSeries("Japan", {data: {"GDP": 4,"area": 2,"population": 1000,"inflation": 20,"growth": 2}}, { fill: "yellow", hidden: true }) |
|
.addSeries("Korean", {data: {"GDP": 10,"area": 10,"population": 800,"inflation": 2,"growth": 18}}, { fill: "orange" }) |
|
.addSeries("Canada", {data: {"GDP": 1,"area": 18,"population": 300,"inflation": 3,"growth": 15}}, { fill: "purple" }) |
|
.render(); |
|
|
|
var spiderLegend = new dojox.charting.widget.SelectableLegend({chart: spider, horizontal: false}, "spiderLegend"); |
|
|
|
dojo.query("h2").forEach(function(node, i){ |
|
node.innerHTML = i+1 +" - "+node.innerHTML; |
|
}); |
|
}) |
|
|
|
</script> |
|
</head> |
|
<body class="claro"> |
|
<h1>Chart: Selectable Legend</h1> |
|
<h3>Click the legends</h3> |
|
<div style="clear:both;"> |
|
<div style="float:left;"> |
|
<h2>Bars</h2> |
|
<div id="bars" class="bars"></div> |
|
<div id="barsLegend"></div> |
|
</div> |
|
<div style="float:left;"> |
|
<h2>Clustered Bars</h2> |
|
<div id="clusteredBars" class="bars"></div> |
|
<div id="clusteredBarsLegend"></div> |
|
</div> |
|
<div style="float:left;"> |
|
<h2>Stacked Bars</h2> |
|
<div id="stackedBars" class="bars"></div> |
|
<div id="stackedBarsLegend"></div> |
|
</div> |
|
</div> |
|
<div style="clear:both;"> |
|
<div style="float:left;"> |
|
<h2>Columns</h2> |
|
<div id="columns" class="columns"></div> |
|
<div id="columnsLegend"></div> |
|
</div> |
|
<div style="float:left;"> |
|
<h2>Clustered Columns</h2> |
|
<div id="clusteredColumns" class="columns"></div> |
|
<div id="clusteredColumnsLegend"></div> |
|
</div> |
|
<div style="float:left;"> |
|
<h2>Stacked Columns</h2> |
|
<div id="stackedColumns" class="columns"></div> |
|
<div id="stackedColumnsLegend"></div> |
|
</div> |
|
</div> |
|
<div style="clear:both;"> |
|
<div style="float:left;"> |
|
<h2>Lines</h2> |
|
<div id="lines" class="bars"></div> |
|
<div id="linesLegend"></div> |
|
</div> |
|
<div style="float:left;"> |
|
<h2>Stacked Lines</h2> |
|
<div id="stackedLines" class="bars"></div> |
|
<div id="stackedLinesLegend"></div> |
|
</div> |
|
<div style="float:left;"> |
|
<h2>Stacked Area</h2> |
|
<div id="stackedArea" class="bars"></div> |
|
<div id="stackedAreaLegend"></div> |
|
</div> |
|
|
|
</div> |
|
<div style="clear:both;"> |
|
<div style="float:left;"> |
|
<h2>ClandeSticks</h2> |
|
<div id="candleSticks" class="columns"></div> |
|
<div id="candleSticksLegend"></div> |
|
</div> |
|
<div style="float:left;"> |
|
<h2>Scatter</h2> |
|
<div id="scatter" class="columns"></div> |
|
<div id="scatterLegend"></div> |
|
</div> |
|
<div style="float:left;"> |
|
<h2>Lines&Columns</h2> |
|
<div id="linesColumns" class="columns"></div> |
|
<div id="linesColumnsLegend"></div> |
|
</div> |
|
</div> |
|
<div style="clear:both;"> |
|
<div style="float:left;"> |
|
<h2>Pie</h2> |
|
<div id="pie" class="pie" style="float:left;"></div> |
|
<div style="float:left;"> |
|
<div id="pieLegend"></div> |
|
</div> |
|
</div> |
|
<div style="float:left;margin-left:40px"> |
|
<h2>Bubble</h2> |
|
<div id="bubble" class="bubble" style="float:left;"></div> |
|
<div style="float:left;"> |
|
<div id="bubbleLegend"></div> |
|
</div> |
|
</div> |
|
<div style="float:left;"> |
|
<h2>Spider</h2> |
|
<div id="spider" class="spider" style="float:left;"></div> |
|
<div style="float:left;"> |
|
<div id="spiderLegend"></div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|