JSFiddle - React, Tailwind, and code Playground

by hohenheim

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<!--<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
-->
<script src="https://dl.dropboxusercontent.com/u/81016846/exporting.src.js"></script>
<script src="https://dl.dropboxusercontent.com/u/81016846/highcharts.src.js"></script>

<script src="http://neue.cc/linq.min.js"></script>
<div>
     <h1 align="center">Data Visualization</h1>

</div>
<div>
    <SELECT id="list1">
        <OPTION VALUE="0">-Marketplace-</OPTION>
        <OPTION VALUE="1">1</OPTION>
    </SELECT>
    <SELECT id="list2">
        <OPTION VALUE="0">-Device Type-</OPTION>
        <OPTION VALUE="1">1</OPTION>
    </SELECT>
    <SELECT id="list3">
        <OPTION VALUE="0">-Placement-</OPTION>
        <OPTION VALUE="1">1</OPTION>
    </SELECT>
    <button id="btn">stack/unstack</button>
    <button id="generate">Generate</button>
</div>
<div>
    <label for="date1">Date:</label>
    <input type="text" id="date1" name="date1" value="01/01/2014" />
    <label for="date2">to</label>
    <input type="text" id="date2" name="date2" value="" />
</div>
<div style="height: 40px;">&nbsp;</div>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<div style="height: 40px;">&nbsp;</div>

<div id="tableTitle" align="center"></div>

<table id="table" width="100%">
    <tr>
        <th>start date</th>
        <th>end date</th>
        <th>adId</th>
        <th>Impressions</th>
    </tr>
</table>
<div id='bottom'></div>

JavaScript

data1 = [{
    "date": 1396828800,
        "impressions": 49145385
}, {
    "date": 1396915200,
        "impressions": 46704447
}, {
    "date": 1397001600,
        "impressions": 47181000
}, {
    "date": 1397088000,
        "impressions": 47337965
}, {
    "date": 1397174400,
        "impressions": 51129266
}, {
    "date": 1397260800,
        "impressions": 60547397
}, {
    "date": 1397347200,
        "impressions": 62217077
}, {
    "date": 1397433600,
        "impressions": 49145385
}, {
    "date": 1397520000,
        "impressions": 46704447
}, {
    "date": 1397606400,
        "impressions": 47181000
}, {
    "date": 1397692800,
        "impressions": 47337965
}, {
    "date": 1397779200,
        "impressions": 51129266
}, {
    "date": 1397865600,
        "impressions": 60547397
}, {
    "date": 1397952000,
        "impressions": 62217077
}, {
    "date": 1398038400,
        "impressions": 49145385
}, {
    "date": 1398124800,
        "impressions": 46704447
}, {
    "date": 1398211200,
        "impressions": 47181000
}, {
    "date": 1398297600,
        "impressions": 47337965
}, {
    "date": 1398384000,
        "impressions": 51129266
}, {
    "date": 1398470400,
        "impressions": 60547397
}, {
    "date": 1398556800,
        "impressions": 62217077
}, {
    "date": 1398643200,
        "impressions": 49145385
}, {
    "date": 1398729600,
        "impressions": 46704447
}, {
    "date": 1398816000,
        "impressions": 47181000
}, {
    "date": 1398902400,
        "impressions": 47337965
}, {
    "date": 1398988800,
        "impressions": 51129266
}, {
    "date": 1399075200,
        "impressions": 60547397
}, {
    "date": 1399161600,
        "impressions": 62217077
}, {
    "date": 1399248000,
        "impressions": 49145385
}, {
    "date": 1399334400,
        "impressions": 46704447
}, {
    "date": 1399420800,
        "impressions": 47181000
}, {
    "date": 1399507200,
        "impressions": 47337965
}, {
    "date": 1399593600,
       ...