dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
170 lines (161 loc) • 4.6 kB
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]>
<html lang="en">
<head>
<![endif]>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie 2D: Smart Label</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>
<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true, has:{'dojo-bidi': true}">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("doh.runner");
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.plot2d.Pie");
dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.themes.Tom");
dojo.require("dojox.charting.widget.Legend");
var pieChart = null;
var legend = null;
dojo.addOnLoad(function () {
var dc = dojox.charting;
pieChart = new dc.Chart("pieChart", {
textDir: "rtl"
});
pieChart.setTheme(dc.themes.Tom).addPlot("default", {
type: "Pie",
font: "normal normal 10pt Tahoma",
fontColor: "#ccc",
labelWiring: "#ccc",
labelStyle: "columns",
htmlLabels: true,
startAngle: -10
}).addSeries("Series A", [{
y: 12.1,
text: "The country is \u05e1\u05d9\u05df.",
tooltip: "1,210 \u05de\u05dc\u05d9\u05d5\u05df."
}, {
y: 9.52,
text: "\u05d4\u05de\u05d3\u05d9\u05e0\u05d4\u0020\u05d4\u05d9\u05d0 India.",
tooltip: "952 million."
}, {
y: 2.66,
text: "\u05d0\u05e8\u05d4\u0022\u05d1.",
tooltip: "266 \u05de\u05dc\u05d9\u05d5\u05df."
}, {
y: 2.06,
text: "Indonisia.",
tooltip: "206 million."
}, {
y: 1.63,
text: "Brazil.",
tooltip: "163 million."
}, {
y: 1.48,
text: "Russian.",
tooltip: "148 million."
}, {
y: 1.29,
text: "Pakistan.",
tooltip: "129 million."
}, {
y: 1.25,
text: "Japan.",
tooltip: "125 million."
}, {
y: 1.23,
text: "Bangladesh.",
tooltip: "123 million."
}, {
y: 1.04,
text: "Nigeria.",
tooltip: "104 million."
}, {
y: 0.96,
text: "Mexico.",
tooltip: "96 million."
}, {
y: 0.84,
text: "Germany.",
tooltip: "84 million."
}, {
y: 0.74,
text: "Phillippines.",
tooltip: "74 million."
}, {
y: 0.74,
text: "Viet Nam.",
tooltip: "74 million."
}, {
y: 0.66,
text: "Iran.",
tooltip: "66 million."
}, {
y: 0.64,
text: "Egypt.",
tooltip: "64 million."
}]);
var anim_b = new dc.action2d.Highlight(pieChart, "default");
var anim_c = new dc.action2d.Tooltip(pieChart, "default");
pieChart.render();
legend = new dojox.charting.widget.Legend({
chart: pieChart,
horizontal: false
}, "legend");
doh.register("parse", function () {
dojo.parser.parse();
});
doh.register("test textDir", [{
name: "Pies textDir",
runTest: function () {
doh.is("rtl", pieChart.textDir, "pieChart: internal labels");
doh.is("rtl", legend.textDir, "legend: external labels");
}
}]);
doh.run();
});
function refreshChart() {
var newData = [];
for (var i = 0; i < 16; i++) {
newData.push(Math.random() * 10);
}
newData.sort(function (v1, v2) {
return v2 - v1
});
pieChart.updateSeries("Series A", newData);
pieChart.render();
legend.refresh();
}
</script>
</head>
<body class="claro">
<h1>Pie 2D: Smart Label</h1>
<p>Example of Pie chart using smart label:</p>
<div style="margin:20px">
<div id="pieChart" style="width: 470px; height: 350px; float:left;">
</div>
<div id="legend">
</div>
</div>
<button onclick="refreshChart()">Random Data Test</button>
</body>
</html>