JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<div id="plotarea">
<table>
<caption>GDP, based on exchange rates, over time. Values in billion USDs.</caption>
<tr>
<td></td>
<th scope="col">2003</th>
<th scope="col">2002</th>
<th scope="col">2001</th>
<th scope="col">2000</th>
<th scope="col">1999</th>
<th scope="col">1998</th>
</tr>
<tr>
<th scope="row">USA</th>
<td>10,882</td>
<td>10,383</td>
<td>10,020</td>
<td>9,762</td>
<td>9,213</td>
<td>8,720</td>
</tr>
<tr>
<th scope="row">EU</th>
<td>10,970</td>
<td>9,040</td>
<td>8,303</td>
<td>8,234</td>
<td>8,901</td>
<td>8,889</td>
</tr>
</table>
<input type="button" id="draw" value=" Draw Chart " />
<br />
<div id="chart"></div>
CSS
#chart {
height: 300px;
}
JavaScript
$(function () {
var drawChart = function () {
var headerTr = $('table tr:first()');
var rowCount = $('table tr').length - 1;
var data = [];
for (var row = 0; row < rowCount; row++) {
var tr = $('table tr').eq(row + 1);
var dataseries = {
label: tr.find('th').text(),
data: []
};
for (var col = 0; col < tr.find('td').length; col++) {
var xval = headerTr.find('th').eq(col).text();
var yval = tr.find('td').eq(col).text().replace(',', '');
dataseries.data.push([xval, yval]);
}
data.push(dataseries);
};
var options = {
// your options here, e.g.
xaxis: {
tickDecimals: 0,
tickSize: 1
}
};
$.plot('#chart', data, options);
};
$('#draw').on('click', drawChart);
});