JSFiddle - React, Tailwind, and code Playground

by Patrick van Kleef

HTML

<div class="democharts" data-dojo-type="app/chartsdemo"></div>

CSS

body {padding: 10px; }
            .chartContainer { float:left; width: 350px; height: 350px; border: 1px solid #000; padding:20px; margin-right:20px; margin-bottom:20px;  }
            
            .container {
                width: 100%;
                height:100%;
            }
            .container .form-container { float:left; width: 400px; height:100%; border-right:1px solid #000; }
            .container .charts-container { float:left; width: 500px; height:100%; padding-left:20px; padding-right:20px; border-right:1px solid #000; }
            .container .events-container { float:left; width: 500px; height: 460px; overflow-y: scroll; }

JavaScript

define("app/chartsdemo",[
    "dojo",
    "dojo/_base/declare",
    "dojo/dom-construct", 
    "dojo/on",
    "dojo/_base/lang",
    "dojo/query",
    "dojo/dom-attr",
    
    "dojox/charting/Chart",
    "dojox/charting/axis2d/Default",
    "dojox/charting/plot2d/Lines",
    "dojox/charting/plot2d/Pie",
    "dojox/charting/Chart2D",
    "dojox/charting/action2d/Magnify",
    "dojox/charting/action2d/MoveSlice",
    "dojox/charting/action2d/Shake",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/action2d/MouseZoomAndPan",
    "dojox/charting/action2d/MouseIndicator",
    
    "dojox/charting/widget/SelectableLegend",
    "dojox/charting/themes/Dollar",
    "dojox/charting/themes/Electric",
    "dojox/charting/themes/Julie",
    "dojox/charting/themes/PurpleRain",
    "dojox/charting/themes/Renkoo",
    
    "dijit/_Widget",
    "dijit/_TemplatedMixin"   
], function(
    dojo,
    declare,
    domConstruct,
    on,
    lang,
    query,
    domAttr,
    
    Chart,
    Default,
    Lines,
    Pie,
    Chart2D,
    Magnify,
    MoveSlice,
    Shake,
    Tooltip,
    MouseZoomAndPan,
    MouseIndicator,
    
    SelectableLegend,
    Dollar,
    Electric,
    Julie,
    PurpleRain,
    Renkoo,
    
    Widget,
    TemplatedMixin
) {
    return declare([
        Widget, TemplatedMixin
    ], 
    {        
        templateString: '<div class="container"> <div class="form-container"> <table cellspacing="10"> <tr> <td><label for="name">Chart type:</label></td> <td> <select name="select" data-dojo-type="dojox.form.DropDownSelect" id="chartTypeDropDownSelect"> <option value="Line">Line</option> <option value="Columns">Columns</option> <option value="Pie">Pie</option> <option value="Bubbles">Bubbles</option> </select> </td> </tr> <tr> <td><label for="name">Theme:</label></td> <td> <select name="select" data-dojo-type="dojox.form.DropDownSelect" id="themeDropDownSelect"> <option value="Dollar">Dollar</option> <option value="Electric">Electric</option> <option...