Dojo comes with an amazing charting library, in the form of dojox.charting. You can create various 2D chart, 3D Chart, Pie, Animated Chart. Follow link : http://docs.dojocampus.org/dojox/charting/
Sample html code for Columns chart using dojo :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.charting.Chart2D");
dojo.addOnLoad(function() {
var c = new dojox.charting.Chart2D("chartOne",{
title: "Revenue per year",
titlePos: "bottom",
titleGap: 5,
titleFont: "normal normal normal 15pt Arial",
titleFontColor: "orange"
});
c.addPlot("default",{type: "Columns", gap: 5, minBarSize: 3, maxBarSize: 20})
.addAxis("x", {
fixLower: "major",
fixUpper: "minor",
labels: [{value: 1, text: "Item1"}, {value: 2, text: "Item2"},{value: 3, text: "Item3"}]})
.addAxis("y", {
title: "Revenue ($ Million)",
vertical: true,
fixLower: "major",
fixUpper: "major",
includeZero: true})
.addSeries("Series A",
[{y: 4, color: "red"},{y: 2, color: "green"},{y: 6, color: "blue"}]);
c.render();
});
</script>
</head>
<body>
<div id="chartOne" style="width: 400px; height: 240px; margin: 30px auto 0px auto;">
</div>
</body>
</html>
Sample html code for Columns chart using dojo :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.charting.Chart2D");
dojo.addOnLoad(function() {
var c = new dojox.charting.Chart2D("chartOne",{
title: "Revenue per year",
titlePos: "bottom",
titleGap: 5,
titleFont: "normal normal normal 15pt Arial",
titleFontColor: "orange"
});
c.addPlot("default",{type: "Columns", gap: 5, minBarSize: 3, maxBarSize: 20})
.addAxis("x", {
fixLower: "major",
fixUpper: "minor",
labels: [{value: 1, text: "Item1"}, {value: 2, text: "Item2"},{value: 3, text: "Item3"}]})
.addAxis("y", {
title: "Revenue ($ Million)",
vertical: true,
fixLower: "major",
fixUpper: "major",
includeZero: true})
.addSeries("Series A",
[{y: 4, color: "red"},{y: 2, color: "green"},{y: 6, color: "blue"}]);
c.render();
});
</script>
</head>
<body>
<div id="chartOne" style="width: 400px; height: 240px; margin: 30px auto 0px auto;">
</div>
</body>
</html>
No comments:
Post a Comment