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",
    "dojox/charting/action2d/MoveSlice",
    "dojox/charting/action2d/Highlight",
    "dojox/charting/action2d/Magnify",
    "dojox/charting/action2d/Tooltip"
        ], function (Chart, Default, Wetland, ready, Line) {
            "use strict";

            ready(function () {
                var dataCount = 10,
                    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,
                    labelStyle: "default",
                    labels: true
                }).
                    addAxis("x", { fixLower: "major", fixUpper: "major" }).
                    addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" }).
                    setTheme(Wetland).
                    addSeries("line_data", data);
                bindClickEvent(chart);
                chart.render();
            }

            function drawColumn(data) {
                var chart = new Chart("column_chart");
                chart.addPlot("default", {
                    labels: true,
                    labelStyle: "columns",
                    type: "Columns", 
                    markers: true, 
                    gap: 5 ,  
                    }).
                     ...