JSFiddle - React, Tailwind, and code Playground

by alcosbarco

HTML

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div class="buttons">
  <button class="filterButton" data-quarter="Q1">Q1</button>
  <button class="filterButton" data-quarter="Q2">Q2</button>
  <button class="filterButton" data-quarter="Q3">Q3</button>
  <button class="filterButton" data-quarter="Q4">Q4</button>
  <button class="filterButton" data-quarter="reset">Reset</button>
</div>
<div id="chartdiv">asdf adsf</div>
<div id="chartdiv2">asdf adsf</div>

JavaScript

var chartData = [{
  "CountY": 31,
  "CountX": 16,
  "CountZ": 63,
  "quarter": "2001 Q1"
}, {
  "CountY": 35,
  "CountX": 19,
  "CountZ": 53,
  "quarter": "2001 Q2"
}, {
  "CountY": 46,
  "CountX": 20,
  "CountZ": 60,
  "quarter": "2001 Q3"
}, {
  "CountY": 39,
  "CountX": 16,
  "CountZ": 52,
  "quarter": "2001 Q4"
}, {
  "CountY": 34,
  "CountX": 21,
  "CountZ": 63,
  "quarter": "2002 Q1"
}, {
  "CountY": 41,
  "CountX": 24,
  "CountZ": 62,
  "quarter": "2002 Q2"
}, {
  "CountY": 32,
  "CountX": 29,
  "CountZ": 67,
  "quarter": "2002 Q3"
}, {
  "CountY": 33,
  "CountX": 20,
  "CountZ": 54,
  "quarter": "2002 Q4"
}, {
  "CountY": 47,
  "CountX": 15,
  "CountZ": 70,
  "quarter": "2003 Q1"
}, {
  "CountY": 48,
  "CountX": 25,
  "CountZ": 52,
  "quarter": "2003 Q2"
}, {
  "CountY": 40,
  "CountX": 25,
  "CountZ": 51,
  "quarter": "2003 Q3"
}, {
  "CountY": 39,
  "CountX": 25,
  "CountZ": 65,
  "quarter": "2003 Q4"
}, {
  "CountY": 49,
  "CountX": 29,
  "CountZ": 64,
  "quarter": "2004 Q1"
}, {
  "CountY": 34,
  "CountX": 20,
  "CountZ": 62,
  "quarter": "2004 Q2"
}, {
  "CountY": 32,
  "CountX": 27,
  "CountZ": 57,
  "quarter": "2004 Q3"
}, {
  "CountY": 31,
  "CountX": 24,
  "CountZ": 52,
  "quarter": "2004 Q4"
}, {
  "CountY": 41,
  "CountX": 30,
  "CountZ": 60,
  "quarter": "2005 Q1"
}, {
  "CountY": 40,
  "CountX": 27,
  "CountZ": 65,
  "quarter": "2005 Q2"
}, {
  "CountY": 31,
  "CountX": 17,
  "CountZ": 56,
  "quarter": "2005 Q3"
}, {
  "CountY": 41,
  "CountX": 26,
  "CountZ": 65,
  "quarter": "2005 Q4"
}, {
  "CountY": 49,
  "CountX": 20,
  "CountZ": 59,
  "quarter": "2006 Q1"
}, {
  "CountY": 43,
  "CountX": 17,
  "CountZ": 60,
  "quarter": "2006 Q2"
}, {
  "CountY": 33,
  "CountX": 24,
  "CountZ": 62,
  "quarter": "2006 Q3"
}, {
  "CountY": 40,
  "CountX": 22,
  "CountZ": 68,
  "quarter": "2006 Q4"
}, {
  "CountY": 37,
  "CountX": 25,
  "CountZ": 57,
  "quarter": "2007 Q1"
}, {
  "CountY": 33,
  "CountX": 15,
  "CountZ": 65,
  "quarter": "2007 Q2"
}, {
 ...