JSFiddle - React, Tailwind, and code Playground

by cqmyg asdq

HTML

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="line_chart" style="width: 600px; height: 400px;"></div>
<div id="pie_chart" style="width: 600px; height: 400px; margin-top: 20px;"></div>
<div id="column_chart" style="width: 600px; height: 400px; margin-top: 20px;"></div>

JavaScript

require([
    "dojox/charting/Chart",
    "dojox/charting/axis2d/Default",
    "dojox/charting/themes/Wetland",
    "dojo/ready",
    "dojox/charting/plot2d/Lines",
    "dojox/charting/plot2d/Columns",
    "dojox/charting/plot2d/Pie"
], function(Chart, Default, Wetland, ready, Line) {
    "use strict";

    ready(function() {
        var dataCount = 1000,
            data = {
                line: buildData(dataCount),
                column: buildData(dataCount),
                pie: buildData(dataCount)
            };

        console.time("draw chart");

        drawLine(data.line);
        drawColumn(data.column);
        drawPie(data.pie);

        console.timeEnd("draw chart");
    });

    function drawLine(data) {
        var chart = new Chart("line_chart");

        chart.addPlot("default", {type: Line, markers: true}).
          addAxis("x", {fixLower: "major", fixUpper: "major"}).
          addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"}).
          setTheme(Wetland).
          addSeries("line_data", data).
          render();
    }

    function drawColumn(data) {
        var chart = new Chart("column_chart");

        chart.addPlot("default", {type: "Columns", markers: true, gap: 5}).
              addAxis("x").
              addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"}).
              addSeries("month_data", data).
              render();
    }

    function drawPie(data) {
        var chart = new Chart("pie_chart");

        chart.addPlot("default", {type: "Pie", markers: true, radius: 170}).
              addSeries("data", data).
              render();
    }

    function buildData(count) {
        var result = [];

        for(var i = 0; i < count; i++) {
            result.push(Math.random() * count + 1);
        }

        return result;
    }

});