clustered column dojo chart
by andrew rowe
HTML
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css""></script>
<div style="width:800px;margin-left:auto;margin-right:auto">
<div id="chart" style="width:800px;height:600px"></div>
</div>
JavaScript
var switchClustering;
require(["dojo/_base/declare", "dojo/ready", "dojo/dom", "dojox/charting/Chart",
"dojo/store/Memory", "dojox/charting/StoreSeries", "dojo/on", "dojox/gesture/tap",
"dojox/charting/themes/PlotKit/blue", "dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns", "dojox/charting/plot2d/ClusteredColumns",
"dojox/charting/plot2d/Grid", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/Highlight"],
function (declare, ready, dom, Chart, Memory, StoreSeries, on, tap, blue, Default,
StackedColumns, ClusteredColumns, Grid, Tooltip, Highlight) {
var chart;
var sales = [{
month: "Jan",
A: 12435,
B: 5300
}, {
month: "Feb",
A: 11425,
B: 10450
}, {
month: "Mar",
A: 13534,
B: 8780
}, {
month: "Apr",
A: 12001,
B: 7302
}, {
month: "May",
A: 14334,
B: 6504
}, {
month: "Jun",
A: 12400,
B: 15030
}, {
month: "Jul",
A: 12212,
B: 9898
}, {
month: "Aug",
A: 14424,
B: 5807
}, {
month: "Nov",
A: 14134,
B: 14506
}, {
month: "Oct",
A: 13242,
B: 5470
}, {
month: "Nov",
A: 16312,
B: 12480
}, {
month: "Dec",
A: 19132,
B: 8770
}];
ready(function () {
var store = new Memory({
data: sales
});
var clustered = true;
var monthLabel = function (index) {
if (index > 12 || index < 1) {
return "";
}
return sales[index - 1].month;
};
switchClustering = function () {
if (clustered) {
chart.
addAxis("y",...