JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://s3.amazonaws.com/pessetto/jquery.jqplot.min.js"></script>
<script src="https://s3.amazonaws.com/pessetto/jqplot.barRenderer.js"></script>
<script src="https://s3.amazonaws.com/pessetto/jqplot.categoryAxisRenderer.js"></script>
<div id="xmlDI">
<?xml version="1.0"?>
<chart>
    <category>
        <bar size="20" link="http://google.com"/>
    </category>
    <category>
        <bar size="70" link="http://yahoo.com" />
    </category>
</chart>
</div>
<div id="barchart"></div>

JavaScript

function loadBars(categoryid, xml) {
    var bar = [];
    var bars = [];
    $(xml).find("bar").each(function() {
        bar.push(parseInt(categoryid, 10));
        bar.push(parseInt($(this).attr("size"), 10));
        bar.push($(this).attr("link"));
        bars.push(bar);
        //$("#debug").append("\nBAR:");
        //debug2dArray(bars);
    });
    return bars;
}

function getBars(xml) {
    var categoryid = 1;
    var bars = [];
    $(xml).find("category").each(function() {
        bars.push(loadBars(categoryid, $(this)));
        categoryid++;
    });
    return bars;
}

$(document).ready(function() {
    var bars = [];
    $("div#barchart").css("background-color", "#F00");
    $("div#barchart").css("height", "200px");
    $("div#barhcart").css("width", "400px");
    bars = getBars($('div#xmlDI'));
    $.jqplot("barchart", bars, {
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                fillToZero: true
            }
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ['one', 'two'],
                autoscale: true
            },
            yaxis: {
                autoscale: true
            }
        }
    });
});