JSFiddle - React, Tailwind, and code Playground

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="https://rawgithub.com/highslide-software/export-csv/master/export-csv.js"></script>
<script src="http://neue.cc/linq.min.js"></script>
<div>
     <h1 align="center">Data Visualization</h1>

</div>
<div>
    <form name="form">
        <SELECT id="list1">
            
            <OPTION VALUE="1">DE</OPTION>
            <OPTION VALUE="2">ES</OPTION>
            <OPTION VALUE="3">FR</OPTION>
            <OPTION VALUE="4">IT</OPTION>
            <OPTION VALUE="5">UK</OPTION>
            <OPTION VALUE="6" selected>US</OPTION>
        </SELECT>

    <SELECT id="list2">
        <OPTION VALUE="1">Kindle</OPTION>
        <OPTION VALUE="2" selected>Mobile</OPTION>
        <OPTION VALUE="3">Web</OPTION>
    </SELECT>
        
    <label for="date1">Date:</label>
    <input type="text" id="date1" name="date1" value="04/01/2014" />
    <label for="date2">to</label>
    <input type="text" id="date2" name="date2" value="04/02/2014" />
    
    </form>
</div>    
<div>
    <button id="btn">stack/unstack</button>
    <button id="generate">Generate</button>
    <button id="getcsv">Alert CSV</button>

</div>
<div>

</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
}];

for (var i = 0; i < data1.length; i++) {
    data1[i] = [(data1[i].date - (data1[i].date % (24 * 3600))) * 1000, data1[i].impressions];
}

data2 = [{
    "startDate": 1396263600.0,
        "adId": 2483231759355,
        "endDate": 1401101940.0,
        "impressions": 754831
}, {
    "startDate": 1393851600.0,
        "adId": 2750329551133,
        "endDate": 1404212340.0,
        "impressions": 3947368
}, {
    "startDate": 1401620400.0,
        "adId": 1311595275159,
        "endDate": 1404212340.0,
        "impressions": 630000
},{
    "startDate": 1398682800.0,
        "adId": 3301784671323,
        "endDate": 1401620340.0,
        "impressions": 535714
}];

preGroupData = data2.slice();

data2 = divideDays(data2);

data2.sort(function (a, b) {
    return a.date - b.date;
})

x = data2.slice();

var linq = Enumerable.From(data2);
data2 = linq.GroupBy(function (x) {
    return x.date;
})
    .Select(function (x) {
    return {
        date: x.Key(),
        impressions: x.Sum(function (y) {
            return y.impressions;
        })
    };
}).ToArray();

y = data2.slice();

for (var i = 0; i < data2.length; i++) {
    data2[i] = [data2[i].date, data2[i].impressions];
}

 totalityData = [
{"date": 1402963200000,"impressions":1327082558, "type":"MOBILE"},
{"date": 1403827200000,"impressions":1307940614, "type":"MOBILE"},
{"date": 1403222400000,"impressions":1307940614, "type":"MOBILE"},
{"date": 1404604800000,"impressions":1341482874, "type":"MOBILE"},
{"date": 1403481600000,"impressions":1340752686, "type":"MOBILE"},
{"date": 1402790400000,"impressions":1341482874, "type":"MOBILE"},
{"date": 1404432000000,"impressions":1307940614, "type":"MOBILE"},
{"date": 1402704000000,"impressions":1314203233,...