Dojo Charts without Store

This is a Dojox Chart Example

by kamift

HTML

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<h3>
Column Chart with Highlight Animation and Shake
</h3>
<div id="chartOne" class="example"></div>

<h3>
Spider Chart
</h3>
<div id="chartTwo" class="example"></div>
<div id="legendtwo" class="legendTwo"></div>

<h3>
Pie Chart with Slice Animation
</h3>
<div id="chartThree" class="example"></div>
<div id="legendThree" class="legendTwo"></div>

<h3>
Multiple Charts
</h3>
<div id="chartFour" class="example"></div>

CSS

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

JavaScript

require(["dojox/charting/Chart", "dojox/charting/themes/MiamiNice", "dojox/charting/plot2d/Columns", "dojox/charting/action2d/Highlight", "dojox/charting/action2d/Shake", "dojox/charting/action2d/MouseZoomAndPan", "dojo/fx/easing", "dojox/charting/plot2d/Markers", "dojox/charting/axis2d/Default", "dojo/domReady!"], function(Chart, theme, ColumnsPlot, Highlight, Shake, MouseZoomAndPan, easing, Default) {

  var chartData = [{
    y: 1,
    text: "January",
    tooltip: "January Sale"
  }, {
    y: 2,
    text: "February",
    tooltip: "February Sale"
  }, {
    y: 1,
    text: "March",
    tooltip: "March Sale"
  }, {
    y: 4,
    text: "April",
    tooltip: "April Sale"
  }, {
    y: 5,
    text: "May",
    tooltip: "May Sale"
  }, {
    y: 6,
    text: "June",
    tooltip: "June Sale"
  }, {
    y: 7,
    text: "July",
    tooltip: "July"
  }, {
    y: 8,
    text: "August",
    tooltip: "August Sale"
  }, {
    y: 631,
    text: "September",
    tooltip: "September Sale"
  }];

  var chart = new Chart("chartOne");

  chart.setTheme(theme);

  chart.addPlot("default", {
    type: ColumnsPlot,
    markers: true,
    //labels: true,
    labelStyle: "outside",
    
    labelOffset: 25,
    gap: 5,
    tension: "10",
    animate: {
      duration: 2000,
      easing: easing.linear
    },
    shadow: {
      dx: 1.5,
      dy: 1.5,
      dw: 10
    },
    styleFunc: function(item) {
      if (item.y > 10000 && item.y <= 15000) {
        return {
          fill: "rgb(128,225,128)"
        };
      } else if (item.y > 15000 && item.y <= 20000) {
        return {
          fill: "rgb(255,128,128)"
        };
      }
      return {};
    }
  });

  // Add axes
  chart.addAxis("x", {
    dropLabels: true,
    htmllable:true,
    labels: [{
      value: 1,
      text: "Jan"
    }, {
      value: 2,
      text: "Feb"
    }, {
      value: 3,
      text: "Mar"
    }, {
      value: 4,
      text: "Apr"
    }, {
      value: 5,
      text: "May"
    }, {
      value: 6,
    ...