JSFiddle - React, Tailwind, and code Playground

by adama gomis

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/ui-lightness/jquery-ui.css">
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a>
        </li>
        <li><a href="#tab2">Chart Tab</a>
        </li>
        <li><a href="#tab3">Tab 3</a>
        </li>
    </ul>
    <div id="tab1" class="tab">
        <p>This is just some empty tab. Click "Chart Tab" to display the chart.</p>
        <p>Once you do jQuery UI Tabs "select" event is executed and chart.invalidateSize() is called</p>
        <p>Make sure you're running at least 2.7.6 version of amCharts</p>
    </div>
        var graph = new AmCharts.AmGraph();
    graph.valueField = "visits";
    graph.colorField = "color";
    graph.balloonText = "<span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    chart.addGraph(graph);
    <div id="tab3" class="tab">This is too an empty tab</div>
</div>

CSS

#tabs {
    width: 100%:
}
#tabs .tab {
    height: 300px;
}
p {
    margin: 10px 0;
}

JavaScript

var chart;
var graph;

// note, some of tada points don't have value field
var chartData = [{
    year: new Date(1950, 0),
    value: -0.307
}, {
    year: new Date(1951, 0),
    value: -0.168
}, {
    year: new Date(1952, 0),
    value: -0.073
}, {
    year: new Date(1953, 0),
    value: -0.027
}, {
    year: new Date(1954, 0),
    value: -0.251
}, {
    year: new Date(1955, 0),
    value: -0.281
}, {
    year: new Date(1956, 0),
    value: -0.348
}, {
    year: new Date(1957, 0),
    value: -0.074
}, {
    year: new Date(1958, 0),
    value: -0.011
}, {
    year: new Date(1959, 0),
    value: -0.074
}, {
    year: new Date(1960, 0),
    value: -0.124
}, {
    year: new Date(1961, 0),
    value: -0.024
}, {
    year: new Date(1962, 0),
    value: -0.022
}, {
    year: new Date(1963, 0),
    value: 0.000
}, {
    year: new Date(1964, 0),
    value: -0.296
}, {
    year: new Date(1965, 0),
    value: -0.217
}, {
    year: new Date(1966, 0),
    value: -0.147
}, {
    year: new Date(1967, 0)
}, {
    year: new Date(1968, 0)
}, {
    year: new Date(1969, 0)
}, {
    year: new Date(1970, 0)
}, {
    year: new Date(1971, 0),
    value: -0.190
}, {
    year: new Date(1972, 0),
    value: -0.056
}, {
    year: new Date(1973, 0),
    value: 0.077
}, {
    year: new Date(1974, 0),
    value: -0.213
}, {
    year: new Date(1975, 0),
    value: -0.170
}, {
    year: new Date(1976, 0),
    value: -0.254
}, {
    year: new Date(1977, 0),
    value: 0.019
}, {
    year: new Date(1978, 0),
    value: -0.063
}, {
    year: new Date(1979, 0),
    value: 0.050
}, {
    year: new Date(1980, 0),
    value: 0.077
}, {
    year: new Date(1981, 0),
    value: 0.120
}, {
    year: new Date(1982, 0),
    value: 0.011
}, {
    year: new Date(1983, 0),
    value: 0.177
}, {
    year: new Date(1984, 0)
}, {
    year: new Date(1985, 0)
}, {
    year: new Date(1986, 0)
}, {
    year: new Date(1987, 0)
}, {
    year: new Date(1988, 0)
}, {
    year: new Date(1989, 0),
    value: 0.104
}, {
   ...