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.
133 lines (130 loc) • 3.13 kB
HTML
<html lang="en">
<head>
<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, async: true"></script>
<script type="text/javascript">
require([
"dojox/charting/Chart",
"dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Tooltip",
"dojox/charting/themes/Tom",
"dojox/charting/widget/Legend",
"dojo/domReady!"
], function (Chart, Pie, TooltipAction, Tom, Legend) {
var pieChart = null;
var legend = null;
pieChart = new Chart("pieChart");
pieChart.setTheme(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: "China",
tooltip: "1,210 million"
}, {
y: 9.52,
text: "India",
tooltip: "952 million"
}, {
y: 2.66,
text: "USA",
tooltip: "266 million"
}, {
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_c = new TooltipAction(pieChart, "default");
pieChart.render();
legend = new Legend({
chart: pieChart,
horizontal: false
}, "legend");
refreshChart = function () {
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>