JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<link rel="stylesheet" href="http://filamentgroup.com/examples/jqueryui-visualize/css/visualize.css">
<link rel="stylesheet" href="http://filamentgroup.com/examples/jqueryui-visualize/css/visualize-dark.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://filamentgroup.com/examples/jqueryui-visualize/js/visualize.jQuery.js"></script>
<table class="line">
    <caption>2009 Employee Sales by Department</caption>
    <thead>
        <tr>
            <th></th>
            <th scope="col">food</th>
            <th scope="col">auto</th>
            <th scope="col">household</th>
            <th scope="col">furniture</th>
            <th scope="col">kitchen</th>
            <th scope="col">bath</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Mary</th>
            <td>190</td>
            <td>160</td>
            <td>40</td>
            <td>120</td>
            <td>30</td>
            <td>70</td>
        </tr>
        <tr>
            <th scope="row">Tom</th>
            <td>3</td>
            <td>40</td>
            <td>30</td>
            <td>45</td>
            <td>35</td>
            <td>49</td>
        </tr>
        <tr>
            <th scope="row">Brad</th>
            <td>10</td>
            <td>180</td>
            <td>10</td>
            <td>85</td>
            <td>25</td>
            <td>79</td>
        </tr>
        <tr>
            <th scope="row">Kate</th>
            <td>40</td>
            <td>80</td>
            <td>90</td>
            <td>25</td>
            <td>15</td>
            <td>119</td>
        </tr>
    </tbody>
</table>

JavaScript

$('.line').visualize({
    type: 'line',
    width: '420px'
});