147 lines
4.9 KiB
HTML
147 lines
4.9 KiB
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]>
|
|
<!DOCTYPE HTML>
|
|
<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" djConfig="parseOnLoad:true">
|
|
</script>
|
|
<script type="text/javascript">
|
|
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");
|
|
pieChart.setTheme(dc.themes.Tom).addPlot("default", {
|
|
type: "Pie",
|
|
font: "normal normal 10pt Tahoma",
|
|
fontColor: "#ccc",
|
|
labelWiring: "#ccc",
|
|
radius: 100,
|
|
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_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");
|
|
});
|
|
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>
|