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.
100 lines
3.8 KiB
100 lines
3.8 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" /> |
|
<meta http-equiv="X-UA-Compatible" content="chrome=1"/> |
|
<title>DojoX Charting Theme Previewer</title> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
body { |
|
padding: 1.5em; |
|
} |
|
div.container { |
|
position: relative; |
|
width: 180px; |
|
height: 200px; |
|
float: left; |
|
border: 1px solid #ccc; |
|
margin: 12px; |
|
} |
|
div.container div.chart { |
|
width: 180px; |
|
height: 180px; |
|
} |
|
div.container div.title { |
|
position: absolute; |
|
bottom: 4px; |
|
font-size: 11px; |
|
width: 180px; |
|
text-align: center; |
|
} |
|
div.container div.title a { text-decoration: none; } |
|
div.container div.title a:hover { text-decoration: underline; } |
|
</style> |
|
<script src="../../../dojo/dojo.js" data-dojo-config="isDebug: false, async: true, gfxRenderer: 'svg,silverlight,vml,canvas'"></script> |
|
<script type="text/javascript"> |
|
require(["dojo/_base/array", "dojo/dom-construct", "dojo/ready", |
|
"dojox/charting/Chart", "dojox/charting/plot2d/Pie", "dojox/gfx/_base"], |
|
function(arr, domConstruct, ready, Chart, Pie, gfx){ |
|
|
|
var themes = [ |
|
"dojox/charting/themes/Julie", "dojox/charting/themes/ThreeD", "dojox/charting/themes/Chris", |
|
"dojox/charting/themes/Tom", "dojox/charting/themes/Claro", "dojox/charting/themes/PrimaryColors", |
|
"dojox/charting/themes/Electric", "dojox/charting/themes/Charged", "dojox/charting/themes/Renkoo", |
|
"dojox/charting/themes/Adobebricks", "dojox/charting/themes/Algae", "dojox/charting/themes/Bahamation", |
|
"dojox/charting/themes/BlueDusk", "dojox/charting/themes/CubanShirts", "dojox/charting/themes/Desert", |
|
"dojox/charting/themes/Distinctive", "dojox/charting/themes/Dollar", "dojox/charting/themes/Grasshopper", |
|
"dojox/charting/themes/Grasslands", "dojox/charting/themes/GreySkies", "dojox/charting/themes/Harmony", |
|
"dojox/charting/themes/IndigoNation", "dojox/charting/themes/Ireland", "dojox/charting/themes/MiamiNice", |
|
"dojox/charting/themes/Minty", "dojox/charting/themes/PurpleRain", "dojox/charting/themes/RoyalPurples", |
|
"dojox/charting/themes/SageToLime", "dojox/charting/themes/Shrooms", "dojox/charting/themes/Tufte", |
|
"dojox/charting/themes/WatersEdge", "dojox/charting/themes/Wetland", "dojox/charting/themes/PlotKit/blue", |
|
"dojox/charting/themes/PlotKit/cyan", "dojox/charting/themes/PlotKit/green", "dojox/charting/themes/PlotKit/orange", |
|
"dojox/charting/themes/PlotKit/purple", "dojox/charting/themes/PlotKit/red" |
|
]; |
|
|
|
require(themes, function(){ |
|
var i = 0; |
|
var themeClasses = arguments; |
|
ready(function(){ |
|
arr.forEach(themes, function(theme){ |
|
// remove dojox/charting/themes from displayed name |
|
theme = theme.substring(22); |
|
// move / to . |
|
theme = theme.replace("/", "."); |
|
var container = domConstruct.create("div", { className: "container" }, "main"); |
|
var chart = domConstruct.create("div", { className: "chart" }, container); |
|
var title = domConstruct.create("div", { |
|
className: "title", |
|
innerHTML: 'See more of "<a href="test_themes-amd.html?' + theme + '">' + theme + '</a>"' |
|
}, container); |
|
var c = new Chart(chart). |
|
setTheme(themeClasses[i]). |
|
addPlot("default", {type: Pie, radius: 60, labelOffset: -20, radGrad: gfx.renderer == "vml" ? "fan" : "native"}). |
|
addSeries("Series A", [0.35, 0.25, 0.42, 0.53, 0.69]). |
|
render(); |
|
i++; |
|
}); |
|
}); |
|
}); |
|
}); |
|
</script> |
|
</head> |
|
<body> |
|
<h1>DojoX Charting Theme Preview</h1> |
|
<div id="main"></div> |
|
</body> |
|
</html>
|
|
|