JSFiddle - React, Tailwind, and code Playground

by smarko

HTML

<body class="claro" style="background-color: #eee">

CSS

.chart-div
{
    width: 500px;
    height: 300px;
}

JavaScript

dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Bubble");
dojo.require("dojox.charting.themes.Wetland");
dojo.require("dojo.parser");
dojo.require("dojo.json");

dojo.ready(function() {
    
    var div = dojo.create('div', {id: "chart"}, dojo.body());
    dojo.addClass(div, "chart-div");

    var datavalues = '{\n "charttype": "Bubble",' + '\n "title": "sometitle",'
    + '\n "series1xvalues": [ 3, 5, 10, 4 ],'
    + '\n "series1yvalues": [ 4, 6, 9, 12 ],'
    + '\n "series1sizes": [ 2, 3, 3, 4 ],'
    + '\n\n "series2xvalues": [ 2, 2, 1, 7 ],'
    + '\n "series2yvalues": [ 4, 9, 3, 2 ],'
    + '\n "series2sizes": [ 2, 3, 3, 4 ]\n}';   
    var jsonObj = JSON.parse(datavalues);
    
    var c = new dojox.charting.Chart("chart", {
        title : "sometitle",
        titleFont : "normal normal normal 12pt Arial"
    });

    c.addPlot("default", {
        type : dojox.charting.plot2d.Bubble,
    }).addAxis("x", {
    fixLower : "major",
    fixUpper : "major"
    }).addAxis("y", {
        vertical : true,
        fixLower : "major",
        fixUpper : "major",
        min : 0
    }).setTheme(dojox.charting.themes.Wetland);

    var series1 = new Array();
    for (var i = 0; i < jsonObj.series1xvalues.length; i++) {
        series1[i] = new Object();
        series1[i].x = jsonObj.series1xvalues[i];
        series1[i].y = jsonObj.series1yvalues[i];
        series1[i].size = jsonObj.series1sizes[i];
    }

    var series2 = new Array();
    for (var i = 0; i < jsonObj.series2xvalues.length; i++) {
        series2[i] = new Object();
        series2[i].x = jsonObj.series2xvalues[i];
        series2[i].y = jsonObj.series2yvalues[i];
        series2[i].size = jsonObj.series2sizes[i];
    }

    c.addSeries("Series 1", series1);
    c.addSeries("Series 2", series2);
    c.render();

});