JSFiddle - React, Tailwind, and code Playground

by raviolicode

HTML

<script src="http://www.jqplot.com/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="http://www.jqplot.com/jquery.jqplot.css">
<script src="http://www.jqplot.com/plugins/jqplot.dateAxisRenderer.min.js"></script>
<table id="table">
    <thead>
        <tr>
            <th width="220px">Дата</th>
            <th width="150px">Кол-во пользователей</th>
            <th>Привысило</th>
            <th>Из кэша</th>
            <th>Из сети</th>
            <th>Всего за день</th>
        </tr>
    </thead>
    <tbody>
        <tr><td><a href="/index.cgi/report/web?year=2009&amp;month=12&amp;day=07">07.12.2009</a></td><td>15</td><td>10</td><td>18.27 MB</td><td>1228.74 MB</td><td>1247.02 MB</td></tr>
        <tr><td><a href="/index.cgi/report/web?year=2009&amp;month=12&amp;day=08">08.12.2009</a></td><td>13</td><td>9</td><td>44.58 MB</td><td>1462.61 MB</td><td>1507.20 MB</td></tr>
        <tr><td><a href="/index.cgi/report/web?year=2009&amp;month=12&amp;day=09">09.12.2009</a></td><td>14</td><td>10</td><td>19.96 MB</td><td>866.41 MB</td><td>886.37 MB</td></tr>
        <tr><td><a href="/index.cgi/report/web?year=2009&amp;month=12&amp;day=10">10.12.2009</a></td><td>15</td><td>10</td><td>29.94 MB</td><td>1740.58 MB</td><td>1770.51 MB</td></tr>
        <tr><td><a href="/index.cgi/report/web?year=2009&amp;month=12&amp;day=11">11.12.2009</a></td><td>14</td><td>10</td><td>12.13 MB</td><td>633.72 MB</td><td>645.85 MB</td></tr>
        <tr><td><a href="/index.cgi/report/web?year=2009&amp;month=12&amp;day=14">14.12.2009</a></td><td>12</td><td>7</td><td>4.75 MB</td><td>640.90 MB</td><td>645.66 MB</td></tr>
        <tr><td><a href="/index.cgi/report/web?year=2009&amp;month=12&amp;day=15">15.12.2009</a></td><td>14</td><td>7</td><td>2.27 MB</td><td>744.87 MB</td><td>747.15 MB</td></tr>
        <tr><td><a href="/index.cgi/report/web?year=2009&amp;month=12&amp;day=16">16.12.2009</a></td><td>14</td><td>8</td><td>343.82 KB</td><td>495.62 MB</td><td>495.95 MB</td></tr>
       ...

CSS

table{display:none}

JavaScript

var cols = [];
$('table tbody tr').each(function(){
    var tds = $(this).children();
    cols.push([parseFloat(tds.eq(4).text()), tds.eq(0).text()]);
}).get();
console.log(cols);
$("<div/>", {id: "chartdiv"}).appendTo("body");
$.jqplot("chartdiv",  [cols], {axes:{yaxis:{renderer:$.jqplot.DateAxisRenderer}}});