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.Spider");
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": "Spider",' + '\n "title": "sometitle",'
        + '\n "series1name": "somename",'
        + '\n "series1data":\n  {"data": {"Anyname1": 4, "Anyname2": 10, "Anyname3": 3, "Anyname4": 15}},'
        + '\n "series2name": "somename",'
        + '\n "series2data":\n {"data": {"Anyname1": 3, "Anyname2": 4, "Anyname3": 2, "Anyname4": 1}}\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.Spider,
        labelOffset: -10,
        divisions: 5,
        seriesFillAlpha: 0.2,
        markerSize: 3,
        precision: 0,
        spiderType: "polygon"                
    }).setTheme(dojox.charting.themes.Wetland);

    if (jsonObj.series2data != null) {
        c.addSeries(jsonObj.series2name, jsonObj.series2data);
    }

    c.render();

});