Dojo Charts with Store

This is a Dojox Chart Example

by Bhaumik Mehta

HTML

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<h3>
Column Chart with Highlight Animation - Store Data
</h3>
<div id="chartOne" class="example"></div>
<div id="legendOne"></div>

<h3>
Column Chart with Highlight Animation - Store Data - 2
</h3>
<div id="chartOneTwo" class="example"></div>
<div id="legendOneTwo"></div>

<h3>
Lines Chart with Animation - Store Data
</h3>
<div id="chartTwo"></div>
<div id="legendTwo"></div>

<h3>
Pie Chart with Highlight Animation - Store Data
</h3>
<div id="chartThree"></div>
<div id="legendThree"></div>

CSS

.example {
  height: 400px;
  width: 100%;
}

JavaScript

/**** Columns Chart ****/

require([
      "dojox/charting/Chart",
      "dojox/charting/axis2d/Default",
      "dojox/charting/plot2d/Columns",
      "dojox/charting/themes/Charged",
      "dojox/charting/widget/SelectableLegend",
      "dojox/charting/action2d/Highlight",
      "dojox/charting/StoreSeries",
      "dojo/store/Observable",
      "dojo/store/Memory",
      "dojo/fx/easing",
      "dojo/domReady!"
  ], function (
      Chart,
      Default,
      ColumnsPlot,
      Charged,
      SelectableLegend,
      Highlight,
      StoreSeries,
      Observable,
      Memory,
      easing
  ) {
      var chartData = [{
      	id: 0,
        y: 20000,
        text: "January",
        label: "January Sale"
      }, {
      	id: 1,
        y: 9200,
        text: "February",
        label: "February Sale"
      }, {
       	id: 2,
        y: 11811,
        text: "March",
        label: "March Sale"
      }, {
      	id: 3,
        y: 12000,
        text: "April",
        label: "April Sale"
      }, {
      	id: 4,
        y: 7662,
        text: "May",
        label: "May Sale"
      }, {
      	id: 5,
        y: 13887,
        text: "June",
        label: "June Sale"
      }, {
      	id: 6,
        y: 14200,
        text: "July",
        label: "July"
      }, {
      	id: 7,
        y: 12222,
        text: "August",
        label: "August Sale"
      }, {
      	id: 8,
        y: 12000,
        text: "September",
        label: "September Sale"
      }];
     
     	var xLabels = [{value: 1, text: "Jan"}, {value: 2, text: "Feb"}, {value: 3, text: "Mar"}, {value: 4, text: "Apr"}, {value: 5, text: "May"}, {value: 6, text: "Jun"}, {value: 7, text: "Jul"}, {value: 8, text: "Aug"}, {value: 9, text: "Sep"}, {value: 10, text: "Oct"}, {value: 11, text: "Nov"}, {value: 12, text: "Dec"}];

      store = new Observable(new Memory({data:chartData, idProperty: "id"}));
      
      chart = new Chart("chartOne");
      
      chart.setTheme(Charged);
      
     ...