JSFiddle - React, Tailwind, and code Playground

by vusan

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
<div id="placeholder"></div>
<div id="legend"></div>

CSS

#placeholder {
    margin: 20px;
    width: 300px;
    height: 300px;
}
#legend {
    float: right;
}

JavaScript

var factors = [{
    name: "one",
    min: 0,
    max: 100
}, {
    name: "two",
    min: 0,
    max: 80
}, {
    name: "three",
    min: 0,
    max: 50
}, {
    name: "four",
    min: 0,
    max: 75
}];
var presets = [{
    values: [10, 20, 30, 40],
    short: "series 1"
}, {
    values: [0, 30, 10, 50],
    short: "series 2"
}, {
    values: [10, 0, 0, 70],
    short: "series 3"
}, {
    values: [90, 40, 30, 0],
    short: "series 4"
}];

require([
    "dojo/dom",
    "dojox/charting/Chart",
    "dojox/charting/themes/Claro",
    "dojox/charting/plot2d/Spider",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/widget/SelectableLegend",
    "dojox/charting/axis2d/Default"], function (dom, Chart, theme, Spider, Tooltip, Legend, Default) {
    var element = document.getElementById("placeholder");
    var legend = document.getElementById("legend");
    var chart = new Chart(element).setTheme(theme).addPlot("default", {
        type: Spider,
        radius: 200,
        fontColor: "black",
        labelOffset: "-20"
    });
    var colors = ["blue", "red", "green", "yellow", "purple", "orange", "teal",
        "maroon", "olive", "lime", "aqua", "fuchsia"];
    $.each(factors, function (index, factor) {
        chart.addAxis(factor.name, {
            type: Default,
            min: factor.min,
            max: factor.max
        });
    });
    $.each(presets, function (pIndex, preset) {
        var data = [];
        $.each(factors, function (fIndex, factor) {
            data[factor.name] = preset.values[fIndex];
        });
        chart.addSeries(preset.short, data, {
            fill: colors[pIndex % colors.length]
        });
    });
    new Tooltip(chart, "default");
    chart.render();
   var le =  new Legend({
        chart: chart,
        horizontal: false
    }, legend);
        console.log(le);
    dom.byId(le._cbs[0].id).click();
    dom.byId(le._cbs[2].id).click();
});