JSFiddle - React, Tailwind, and code Playground

by keemor

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">

JavaScript

dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.Claro");
dojo.ready(function() {
    var canvas = dojo.create('div', {
        'style': 'width: 550px; height: 550px;'
    });
    dojo.place(canvas,    dojo.body());

        
    var chart = new dojox.charting.Chart2D(canvas);
    var chartData = {
        'a': [100, 92, 88, 80, 76, 13, 20, 22, 50, 50, 68, 70]
    }
    chartData.b = [];
    var max = 200;
    dojo.forEach(chartData.a, function(n) {
        chartData.b.push(max - n);
    });
    chart.setTheme(dojox.charting.themes.Claro);
    chart.addPlot("default", {
        type: "StackedColumns",
        markers: true,
        lines: true,
        areas: true,
        gap: 5
    });
    chart.addAxis("x");
    chart.addAxis("y", {
        vertical: true,
        fixLower: "major",
        fixUpper: "major"
    });
    // Add the series of data
    var key = 'a';
    chart.addSeries("default1", chartData[key])
    chart.addSeries("default2", chartData.b)

    chart.connectToPlot("default", function(evt) {
            // Output some debug information to the console
            console.info(evt.type, " on element ", evt.element, " with shape ", evt.shape);
    });    
    chart.render();
});