JSFiddle - React, Tailwind, and code Playground

by TS111

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div class="chart-container">
  <div id="placeholder" style="float:left; width:675px; height:300px;"></div>
  <p id="choices" style="float:right; width:135px;"></p>
</div>

CSS

.chart-container {
  width: 600px;
  height: 300px;
  font-family: Helvetica, Sans-serif;
}

JavaScript

var datasets = {
  "usa": {
    label: "USA",
    data: [
      [1988, 483994],
      [1989, 479060],
      [1990, 457648],
      [1991, 401949],
      [1992, 424705],
      [1993, 402375],
      [1994, 377867],
      [1995, 357382],
      [1996, 337946],
      [1997, 336185],
      [1998, 328611],
      [1999, 329421],
      [2000, 342172],
      [2001, 344932],
      [2002, 387303],
      [2003, 440813],
      [2004, 480451],
      [2005, 504638],
      [2006, 528692]
    ],
    //yaxis: 1
  },
  "russia": {
    label: "Russia",
    data: [
      [1988, 218000],
      [1989, 203000],
      [1990, 171000],
      [1992, 42500],
      [1993, 37600],
      [1994, 36600],
      [1995, 21700],
      [1996, 19200],
      [1997, 21300],
      [1998, 13600],
      [1999, 14000],
      [2000, 19100],
      [2001, 21300],
      [2002, 23600],
      [2003, 25100],
      [2004, 26100],
      [2005, 31100],
      [2006, 34700]
    ],
    //yaxis: 1
  },
  "uk": {
    label: "UK",
    data: [
      [1988, 62982],
      [1989, 62027],
      [1990, 60696],
      [1991, 62348],
      [1992, 58560],
      [1993, 56393],
      [1994, 54579],
      [1995, 50818],
      [1996, 50554],
      [1997, 48276],
      [1998, 47691],
      [1999, 47529],
      [2000, 47778],
      [2001, 48760],
      [2002, 50949],
      [2003, 57452],
      [2004, 60234],
      [2005, 60076],
      [2006, 59213]
    ],
    //yaxis: 1
  },
  "germany": {
    label: "Germany",
    data: [
      [1988, 55627],
      [1989, 55475],
      [1990, 58464],
      [1991, 55134],
      [1992, 52436],
      [1993, 47139],
      [1994, 43962],
      [1995, 43238],
      [1996, 42395],
      [1997, 40854],
      [1998, 40993],
      [1999, 41822],
      [2000, 41147],
      [2001, 40474],
      [2002, 40604],
      [2003, 40044],
      [2004, 38816],
      [2005, 38060],
      [2006, 36984]
    ],
    yaxis: 2
  }
};

// hard-code color indices to prevent them from shifting as
// countries are turned on/off

var i =...