171 lines
5.5 KiB
HTML
171 lines
5.5 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("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");
|
|
|
|
dojo.require("dojox.charting.BidiSupport");
|
|
dojo.require("dojox.charting.widget.BidiSupport");
|
|
|
|
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",
|
|
radius: 100,
|
|
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>
|