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.Pie");
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": "Pie",' + '\n "title": "sometitle",'
    + '\n "seriesvalues": [ 3, 5, 10, 4 ],'
    + '\n "seriesnames": [ "red1","red2","red3","red4" ]\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.Pie,
        radius : 80
    }).setTheme(dojox.charting.themes.Wetland);

    var series = new Array();
    for (var i = 0; i < jsonObj.seriesvalues.length; i++) {
        series[i] = new Object();
        series[i].y = jsonObj.seriesvalues[i];
        series[i].text = jsonObj.seriesnames[i];
    }

    c.addSeries("Series 1", series);
    c.render();

});