<div class="container-fluid">
  <div class="row mt-2">
    <div class="col-4">
      <div class="demo-card">
        <div class="theme-control">
          <h5 class="mb-1">Themes</h5>
            <button id="fusion-theme-switcher" class="btn btn-sm btn-selected" onClick="handler.switchTheme('fusion')">Fusion</button>
            <button id="gammel-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('gammel')">Gammel</button>
            <button id="candy-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('candy')">Candy</button>
            <button id="umber-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('umber')">Umber</button>
        </div>
        <div class="plot-control mt-2">
          <h5 class="mb-1">Plot Type</h5>
          <button id="area-plot-switcher" class="btn btn-sm btn-selected" onClick="handler.changePlotType('area')">Area</button>
          <button id="line-plot-switcher" class="btn btn-sm" onClick="handler.changePlotType('line')">Line</button>
          <button id="column-plot-switcher" class="btn btn-sm" onClick="handler.changePlotType('column')">Column</button>
        </div>
      </div>
    </div>
    <div class="col-8">
      <div id="chart-container"></div>
    </div>
  </div>
</div>
#chart-container {
  width: 100%;
  height: 500px;
}

.demo-card {
  margin: 10px;
  padding: 10px;
  border-radius: 3px;
  background: #b3b3b3;
  width: 100%;
}

.btn-sm:hover {
  background: #212344;
  color: #ffffff;
}

.btn-selected {
  background: #212344;
  color: #ffffff;
}
"use strict";

var schema = [
  {
    name: "Observation Time",
    type: "date",
    format: "%Y-%m-%d %H:%M:%S"
  },
  {
    name: "Temperature (in °C)",
    type: "number"
  },
  {
    name: "City",
    type: "string"
  }
];

var data = [
  ["2019-07-13 00:00:00", 23, "Kuala Lumpur"],
  ["2019-07-13 00:00:00", 19, "Panama City"],
  ["2019-07-13 00:00:01", 22, "Kuala Lumpur"],
  ["2019-07-13 00:00:01", 43, "Panama City"],
  ["2019-07-13 00:00:02", 18, "Kuala Lumpur"],
  ["2019-07-13 00:00:02", 25, "Panama City"],
  ["2019-07-13 00:00:03", 31, "Kuala Lumpur"],
  ["2019-07-13 00:00:03", 23, "Panama City"],
  ["2019-07-13 00:00:04", 41, "Kuala Lumpur"],
  ["2019-07-13 00:00:04", 18, "Panama City"],
  ["2019-07-13 00:00:05", 42, "Kuala Lumpur"],
  ["2019-07-13 00:00:05", 40, "Panama City"],
  ["2019-07-13 00:00:06", 31, "Kuala Lumpur"],
  ["2019-07-13 00:00:06", 22, "Panama City"],
  ["2019-07-13 00:00:07", 31, "Kuala Lumpur"],
  ["2019-07-13 00:00:07", 18, "Panama City"],
  ["2019-07-13 00:00:08", 15, "Kuala Lumpur"],
  ["2019-07-13 00:00:08", 44, "Panama City"],
  ["2019-07-13 00:00:09", 46, "Kuala Lumpur"],
  ["2019-07-13 00:00:09", 41, "Panama City"],
  ["2019-07-13 00:00:09", 18, "Kuala Lumpur"],
  ["2019-07-13 00:00:09", 45, "Panama City"],
  ["2019-07-13 00:00:10", 23, "Kuala Lumpur"],
  ["2019-07-13 00:00:10", 41, "Panama City"],
  ["2019-07-13 00:00:11", 13, "Kuala Lumpur"],
  ["2019-07-13 00:00:11", 30, "Panama City"],
  ["2019-07-13 00:00:12", 30, "Kuala Lumpur"],
  ["2019-07-13 00:00:12", 15, "Panama City"],
  ["2019-07-13 00:00:13", 19, "Kuala Lumpur"],
  ["2019-07-13 00:00:13", 26, "Panama City"],
  ["2019-07-13 00:00:14", 35, "Kuala Lumpur"],
  ["2019-07-13 00:00:14", 28, "Panama City"],
  ["2019-07-13 00:00:15", 22, "Kuala Lumpur"],
  ["2019-07-13 00:00:15", 35, "Panama City"],
  ["2019-07-13 00:00:16", 43, "Kuala Lumpur"],
  ["2019-07-13 00:00:16", 44, "Panama City"],
  ["2019-07-13 00:00:17", 41, "Kuala Lumpur"],
  ["2019-07-13 00:00:17", 13, "Panama City"],
  ["2019-07-13 00:00:18", 22, "Kuala Lumpur"],
  ["2019-07-13 00:00:18", 18, "Panama City"],
  ["2019-07-13 00:00:19", 39, "Kuala Lumpur"],
  ["2019-07-13 00:00:19", 15, "Panama City"],
  ["2019-07-13 00:00:20", 15, "Kuala Lumpur"],
  ["2019-07-13 00:00:20", 39, "Panama City"],
  ["2019-07-13 00:00:21", 20, "Kuala Lumpur"],
  ["2019-07-13 00:00:21", 28, "Panama City"],
  ["2019-07-13 00:00:22", 26, "Kuala Lumpur"],
  ["2019-07-13 00:00:22", 28, "Panama City"],
  ["2019-07-13 00:00:23", 31, "Kuala Lumpur"],
  ["2019-07-13 00:00:23", 13, "Panama City"],
  ["2019-07-13 00:00:24", 28, "Kuala Lumpur"],
  ["2019-07-13 00:00:24", 30, "Panama City"],
  ["2019-07-13 00:00:25", 44, "Kuala Lumpur"],
  ["2019-07-13 00:00:25", 42, "Panama City"],
  ["2019-07-13 00:00:26", 13, "Kuala Lumpur"],
  ["2019-07-13 00:00:26", 13, "Panama City"],
  ["2019-07-13 00:00:27", 37, "Kuala Lumpur"],
  ["2019-07-13 00:00:27", 25, "Panama City"],
  ["2019-07-13 00:00:28", 30, "Kuala Lumpur"],
  ["2019-07-13 00:00:28", 18, "Panama City"],
  ["2019-07-13 00:00:29", 28, "Kuala Lumpur"],
  ["2019-07-13 00:00:29", 32, "Panama City"],
  ["2019-07-13 00:00:30", 45, "Kuala Lumpur"],
  ["2019-07-13 00:00:30", 35, "Panama City"],
  ["2019-07-13 00:00:31", 36, "Kuala Lumpur"],
  ["2019-07-13 00:00:31", 40, "Panama City"],
  ["2019-07-13 00:00:32", 26, "Kuala Lumpur"],
  ["2019-07-13 00:00:32", 18, "Panama City"],
  ["2019-07-13 00:00:33", 24, "Kuala Lumpur"],
  ["2019-07-13 00:00:33", 21, "Panama City"],
  ["2019-07-13 00:00:34", 40, "Kuala Lumpur"],
  ["2019-07-13 00:00:34", 35, "Panama City"],
  ["2019-07-13 00:00:35", 46, "Kuala Lumpur"],
  ["2019-07-13 00:00:35", 44, "Panama City"],
  ["2019-07-13 00:00:36", 18, "Kuala Lumpur"],
  ["2019-07-13 00:00:36", 15, "Panama City"],
  ["2019-07-13 00:00:37", 28, "Kuala Lumpur"],
  ["2019-07-13 00:00:37", 44, "Panama City"],
  ["2019-07-13 00:00:38", 15, "Kuala Lumpur"],
  ["2019-07-13 00:00:38", 28, "Panama City"],
  ["2019-07-13 00:00:39", 36, "Kuala Lumpur"],
  ["2019-07-13 00:00:39", 27, "Panama City"],
  ["2019-07-13 00:00:40", 21, "Kuala Lumpur"],
  ["2019-07-13 00:00:40", 37, "Panama City"],
  ["2019-07-13 00:00:41", 43, "Kuala Lumpur"],
  ["2019-07-13 00:00:41", 32, "Panama City"],
  ["2019-07-13 00:00:42", 38, "Kuala Lumpur"],
  ["2019-07-13 00:00:42", 29, "Panama City"],
  ["2019-07-13 00:00:43", 27, "Kuala Lumpur"],
  ["2019-07-13 00:00:43", 32, "Panama City"],
  ["2019-07-13 00:00:44", 23, "Kuala Lumpur"],
  ["2019-07-13 00:00:44", 30, "Panama City"],
  ["2019-07-13 00:00:45", 14, "Kuala Lumpur"],
  ["2019-07-13 00:00:45", 21, "Panama City"],
  ["2019-07-13 00:00:46", 31, "Kuala Lumpur"],
  ["2019-07-13 00:00:46", 13, "Panama City"],
  ["2019-07-13 00:00:47", 41, "Kuala Lumpur"],
  ["2019-07-13 00:00:47", 46, "Panama City"],
  ["2019-07-13 00:00:48", 21, "Kuala Lumpur"],
  ["2019-07-13 00:00:48", 32, "Panama City"],
  ["2019-07-13 00:00:49", 21, "Kuala Lumpur"],
  ["2019-07-13 00:00:49", 22, "Panama City"],
  ["2019-07-13 00:00:50", 43, "Kuala Lumpur"],
  ["2019-07-13 00:00:50", 13, "Panama City"],
  ["2019-07-13 00:00:51", 45, "Kuala Lumpur"],
  ["2019-07-13 00:00:51", 33, "Panama City"],
  ["2019-07-13 00:00:52", 31, "Kuala Lumpur"],
  ["2019-07-13 00:00:52", 45, "Panama City"],
  ["2019-07-13 00:00:53", 34, "Kuala Lumpur"],
  ["2019-07-13 00:00:53", 14, "Panama City"],
  ["2019-07-13 00:00:54", 19, "Kuala Lumpur"],
  ["2019-07-13 00:00:54", 14, "Panama City"],
  ["2019-07-13 00:00:55", 24, "Kuala Lumpur"],
  ["2019-07-13 00:00:55", 30, "Panama City"],
  ["2019-07-13 00:00:56", 35, "Kuala Lumpur"],
  ["2019-07-13 00:00:56", 36, "Panama City"],
  ["2019-07-13 00:00:57", 36, "Kuala Lumpur"],
  ["2019-07-13 00:00:57", 21, "Panama City"],
  ["2019-07-13 00:00:58", 29, "Kuala Lumpur"],
  ["2019-07-13 00:00:58", 40, "Panama City"],
  ["2019-07-13 00:00:59", 34, "Kuala Lumpur"],
  ["2019-07-13 00:00:59", 39, "Panama City"],
  ["2019-07-13 00:01:00", 30, "Kuala Lumpur"],
  ["2019-07-13 00:01:00", 46, "Panama City"],
  ["2019-07-13 00:01:01", 43, "Kuala Lumpur"],
  ["2019-07-13 00:01:01", 38, "Panama City"],
  ["2019-07-13 00:01:02", 25, "Kuala Lumpur"],
  ["2019-07-13 00:01:02", 13, "Panama City"],
  ["2019-07-13 00:01:03", 21, "Kuala Lumpur"],
  ["2019-07-13 00:01:03", 17, "Panama City"],
  ["2019-07-13 00:01:04", 46, "Kuala Lumpur"],
  ["2019-07-13 00:01:04", 45, "Panama City"],
  ["2019-07-13 00:01:05", 13, "Kuala Lumpur"],
  ["2019-07-13 00:01:05", 29, "Panama City"],
  ["2019-07-13 00:01:06", 42, "Kuala Lumpur"],
  ["2019-07-13 00:01:06", 31, "Panama City"],
  ["2019-07-13 00:01:07", 33, "Kuala Lumpur"],
  ["2019-07-13 00:01:07", 27, "Panama City"],
  ["2019-07-13 00:01:08", 29, "Kuala Lumpur"],
  ["2019-07-13 00:01:08", 27, "Panama City"],
  ["2019-07-13 00:01:09", 16, "Kuala Lumpur"],
  ["2019-07-13 00:01:09", 43, "Panama City"],
  ["2019-07-13 00:01:09", 37, "Kuala Lumpur"],
  ["2019-07-13 00:01:09", 30, "Panama City"],
  ["2019-07-13 00:01:10", 40, "Kuala Lumpur"],
  ["2019-07-13 00:01:10", 32, "Panama City"],
  ["2019-07-13 00:01:11", 44, "Kuala Lumpur"],
  ["2019-07-13 00:01:11", 23, "Panama City"],
  ["2019-07-13 00:01:12", 18, "Kuala Lumpur"],
  ["2019-07-13 00:01:12", 46, "Panama City"],
  ["2019-07-13 00:01:13", 33, "Kuala Lumpur"],
  ["2019-07-13 00:01:13", 39, "Panama City"],
  ["2019-07-13 00:01:14", 38, "Kuala Lumpur"],
  ["2019-07-13 00:01:14", 43, "Panama City"],
  ["2019-07-13 00:01:15", 36, "Kuala Lumpur"],
  ["2019-07-13 00:01:15", 33, "Panama City"],
  ["2019-07-13 00:01:16", 17, "Kuala Lumpur"],
  ["2019-07-13 00:01:16", 29, "Panama City"],
  ["2019-07-13 00:01:17", 37, "Kuala Lumpur"],
  ["2019-07-13 00:01:17", 25, "Panama City"],
  ["2019-07-13 00:01:18", 35, "Kuala Lumpur"],
  ["2019-07-13 00:01:18", 35, "Panama City"],
  ["2019-07-13 00:01:19", 34, "Kuala Lumpur"],
  ["2019-07-13 00:01:19", 14, "Panama City"],
  ["2019-07-13 00:01:20", 32, "Kuala Lumpur"],
  ["2019-07-13 00:01:20", 44, "Panama City"],
  ["2019-07-13 00:01:21", 15, "Kuala Lumpur"],
  ["2019-07-13 00:01:21", 34, "Panama City"],
  ["2019-07-13 00:01:22", 28, "Kuala Lumpur"],
  ["2019-07-13 00:01:22", 28, "Panama City"],
  ["2019-07-13 00:01:23", 16, "Kuala Lumpur"],
  ["2019-07-13 00:01:23", 36, "Panama City"],
  ["2019-07-13 00:01:24", 13, "Kuala Lumpur"],
  ["2019-07-13 00:01:24", 35, "Panama City"],
  ["2019-07-13 00:01:25", 17, "Kuala Lumpur"],
  ["2019-07-13 00:01:25", 27, "Panama City"],
  ["2019-07-13 00:01:26", 18, "Kuala Lumpur"],
  ["2019-07-13 00:01:26", 37, "Panama City"],
  ["2019-07-13 00:01:27", 28, "Kuala Lumpur"],
  ["2019-07-13 00:01:27", 30, "Panama City"],
  ["2019-07-13 00:01:28", 42, "Kuala Lumpur"],
  ["2019-07-13 00:01:28", 27, "Panama City"],
  ["2019-07-13 00:01:29", 33, "Kuala Lumpur"],
  ["2019-07-13 00:01:29", 36, "Panama City"],
  ["2019-07-13 00:01:30", 19, "Kuala Lumpur"],
  ["2019-07-13 00:01:30", 46, "Panama City"],
  ["2019-07-13 00:01:31", 24, "Kuala Lumpur"],
  ["2019-07-13 00:01:31", 27, "Panama City"],
  ["2019-07-13 00:01:32", 41, "Kuala Lumpur"],
  ["2019-07-13 00:01:32", 15, "Panama City"],
  ["2019-07-13 00:01:33", 20, "Kuala Lumpur"],
  ["2019-07-13 00:01:33", 43, "Panama City"],
  ["2019-07-13 00:01:34", 39, "Kuala Lumpur"],
  ["2019-07-13 00:01:34", 30, "Panama City"],
  ["2019-07-13 00:01:35", 32, "Kuala Lumpur"],
  ["2019-07-13 00:01:35", 20, "Panama City"],
  ["2019-07-13 00:01:36", 37, "Kuala Lumpur"],
  ["2019-07-13 00:01:36", 26, "Panama City"],
  ["2019-07-13 00:01:37", 26, "Kuala Lumpur"],
  ["2019-07-13 00:01:37", 30, "Panama City"],
  ["2019-07-13 00:01:38", 43, "Kuala Lumpur"],
  ["2019-07-13 00:01:38", 20, "Panama City"],
  ["2019-07-13 00:01:39", 39, "Kuala Lumpur"],
  ["2019-07-13 00:01:39", 20, "Panama City"],
  ["2019-07-13 00:01:40", 28, "Kuala Lumpur"],
  ["2019-07-13 00:01:40", 45, "Panama City"],
  ["2019-07-13 00:01:41", 31, "Kuala Lumpur"],
  ["2019-07-13 00:01:41", 43, "Panama City"],
  ["2019-07-13 00:01:42", 34, "Kuala Lumpur"],
  ["2019-07-13 00:01:42", 36, "Panama City"],
  ["2019-07-13 00:01:43", 25, "Kuala Lumpur"],
  ["2019-07-13 00:01:43", 14, "Panama City"],
  ["2019-07-13 00:01:44", 35, "Kuala Lumpur"],
  ["2019-07-13 00:01:44", 43, "Panama City"],
  ["2019-07-13 00:01:45", 36, "Kuala Lumpur"],
  ["2019-07-13 00:01:45", 34, "Panama City"],
  ["2019-07-13 00:01:46", 19, "Kuala Lumpur"],
  ["2019-07-13 00:01:46", 36, "Panama City"],
  ["2019-07-13 00:01:47", 30, "Kuala Lumpur"],
  ["2019-07-13 00:01:47", 35, "Panama City"],
  ["2019-07-13 00:01:48", 30, "Kuala Lumpur"],
  ["2019-07-13 00:01:48", 26, "Panama City"],
  ["2019-07-13 00:01:49", 35, "Kuala Lumpur"],
  ["2019-07-13 00:01:49", 16, "Panama City"],
  ["2019-07-13 00:01:50", 43, "Kuala Lumpur"],
  ["2019-07-13 00:01:50", 38, "Panama City"],
  ["2019-07-13 00:01:51", 27, "Kuala Lumpur"],
  ["2019-07-13 00:01:51", 17, "Panama City"],
  ["2019-07-13 00:01:52", 24, "Kuala Lumpur"],
  ["2019-07-13 00:01:52", 23, "Panama City"],
  ["2019-07-13 00:01:53", 17, "Kuala Lumpur"],
  ["2019-07-13 00:01:53", 38, "Panama City"],
  ["2019-07-13 00:01:54", 18, "Kuala Lumpur"],
  ["2019-07-13 00:01:54", 14, "Panama City"],
  ["2019-07-13 00:01:55", 16, "Kuala Lumpur"],
  ["2019-07-13 00:01:55", 16, "Panama City"],
  ["2019-07-13 00:01:56", 36, "Kuala Lumpur"],
  ["2019-07-13 00:01:56", 14, "Panama City"],
  ["2019-07-13 00:01:57", 41, "Kuala Lumpur"],
  ["2019-07-13 00:01:57", 15, "Panama City"],
  ["2019-07-13 00:01:58", 40, "Kuala Lumpur"],
  ["2019-07-13 00:01:58", 24, "Panama City"],
  ["2019-07-13 00:01:59", 27, "Kuala Lumpur"],
  ["2019-07-13 00:01:59", 17, "Panama City"],
  ["2019-07-13 00:02:00", 38, "Kuala Lumpur"],
  ["2019-07-13 00:02:00", 20, "Panama City"],
  ["2019-07-13 00:02:01", 23, "Kuala Lumpur"],
  ["2019-07-13 00:02:01", 37, "Panama City"],
  ["2019-07-13 00:02:02", 37, "Kuala Lumpur"],
  ["2019-07-13 00:02:02", 27, "Panama City"],
  ["2019-07-13 00:02:03", 20, "Kuala Lumpur"],
  ["2019-07-13 00:02:03", 45, "Panama City"],
  ["2019-07-13 00:02:04", 33, "Kuala Lumpur"],
  ["2019-07-13 00:02:04", 40, "Panama City"],
  ["2019-07-13 00:02:05", 25, "Kuala Lumpur"],
  ["2019-07-13 00:02:05", 46, "Panama City"],
  ["2019-07-13 00:02:06", 27, "Kuala Lumpur"],
  ["2019-07-13 00:02:06", 14, "Panama City"],
  ["2019-07-13 00:02:07", 23, "Kuala Lumpur"],
  ["2019-07-13 00:02:07", 18, "Panama City"],
  ["2019-07-13 00:02:08", 16, "Kuala Lumpur"],
  ["2019-07-13 00:02:08", 15, "Panama City"],
  ["2019-07-13 00:02:09", 15, "Kuala Lumpur"],
  ["2019-07-13 00:02:09", 46, "Panama City"],
  ["2019-07-13 00:02:09", 24, "Kuala Lumpur"],
  ["2019-07-13 00:02:09", 30, "Panama City"],
  ["2019-07-13 00:02:10", 17, "Kuala Lumpur"],
  ["2019-07-13 00:02:10", 35, "Panama City"],
  ["2019-07-13 00:02:11", 44, "Kuala Lumpur"],
  ["2019-07-13 00:02:11", 17, "Panama City"],
  ["2019-07-13 00:02:12", 17, "Kuala Lumpur"],
  ["2019-07-13 00:02:12", 30, "Panama City"],
  ["2019-07-13 00:02:13", 37, "Kuala Lumpur"],
  ["2019-07-13 00:02:13", 21, "Panama City"],
  ["2019-07-13 00:02:14", 30, "Kuala Lumpur"],
  ["2019-07-13 00:02:14", 28, "Panama City"],
  ["2019-07-13 00:02:15", 43, "Kuala Lumpur"],
  ["2019-07-13 00:02:15", 13, "Panama City"],
  ["2019-07-13 00:02:16", 25, "Kuala Lumpur"],
  ["2019-07-13 00:02:16", 17, "Panama City"],
  ["2019-07-13 00:02:17", 46, "Kuala Lumpur"],
  ["2019-07-13 00:02:17", 18, "Panama City"],
  ["2019-07-13 00:02:18", 17, "Kuala Lumpur"],
  ["2019-07-13 00:02:18", 36, "Panama City"],
  ["2019-07-13 00:02:19", 15, "Kuala Lumpur"],
  ["2019-07-13 00:02:19", 45, "Panama City"],
  ["2019-07-13 00:02:20", 28, "Kuala Lumpur"],
  ["2019-07-13 00:02:20", 21, "Panama City"],
  ["2019-07-13 00:02:21", 30, "Kuala Lumpur"],
  ["2019-07-13 00:02:21", 41, "Panama City"],
  ["2019-07-13 00:02:22", 21, "Kuala Lumpur"],
  ["2019-07-13 00:02:22", 20, "Panama City"],
  ["2019-07-13 00:02:23", 19, "Kuala Lumpur"],
  ["2019-07-13 00:02:23", 14, "Panama City"],
  ["2019-07-13 00:02:24", 39, "Kuala Lumpur"],
  ["2019-07-13 00:02:24", 21, "Panama City"],
  ["2019-07-13 00:02:25", 14, "Kuala Lumpur"],
  ["2019-07-13 00:02:25", 32, "Panama City"],
  ["2019-07-13 00:02:26", 29, "Kuala Lumpur"],
  ["2019-07-13 00:02:26", 46, "Panama City"],
  ["2019-07-13 00:02:27", 22, "Kuala Lumpur"],
  ["2019-07-13 00:02:27", 32, "Panama City"],
  ["2019-07-13 00:02:28", 40, "Kuala Lumpur"],
  ["2019-07-13 00:02:28", 27, "Panama City"],
  ["2019-07-13 00:02:29", 17, "Kuala Lumpur"],
  ["2019-07-13 00:02:29", 18, "Panama City"],
  ["2019-07-13 00:02:30", 26, "Kuala Lumpur"],
  ["2019-07-13 00:02:30", 14, "Panama City"],
  ["2019-07-13 00:02:31", 41, "Kuala Lumpur"],
  ["2019-07-13 00:02:31", 36, "Panama City"],
  ["2019-07-13 00:02:32", 24, "Kuala Lumpur"],
  ["2019-07-13 00:02:32", 21, "Panama City"],
  ["2019-07-13 00:02:33", 16, "Kuala Lumpur"],
  ["2019-07-13 00:02:33", 15, "Panama City"],
  ["2019-07-13 00:02:34", 46, "Kuala Lumpur"],
  ["2019-07-13 00:02:34", 24, "Panama City"],
  ["2019-07-13 00:02:35", 21, "Kuala Lumpur"],
  ["2019-07-13 00:02:35", 22, "Panama City"],
  ["2019-07-13 00:02:36", 20, "Kuala Lumpur"],
  ["2019-07-13 00:02:36", 15, "Panama City"],
  ["2019-07-13 00:02:37", 29, "Kuala Lumpur"],
  ["2019-07-13 00:02:37", 24, "Panama City"],
  ["2019-07-13 00:02:38", 32, "Kuala Lumpur"],
  ["2019-07-13 00:02:38", 43, "Panama City"],
  ["2019-07-13 00:02:39", 37, "Kuala Lumpur"],
  ["2019-07-13 00:02:39", 41, "Panama City"],
  ["2019-07-13 00:02:40", 21, "Kuala Lumpur"],
  ["2019-07-13 00:02:40", 24, "Panama City"],
  ["2019-07-13 00:02:41", 38, "Kuala Lumpur"],
  ["2019-07-13 00:02:41", 29, "Panama City"],
  ["2019-07-13 00:02:42", 18, "Kuala Lumpur"],
  ["2019-07-13 00:02:42", 27, "Panama City"],
  ["2019-07-13 00:02:43", 41, "Kuala Lumpur"],
  ["2019-07-13 00:02:43", 43, "Panama City"],
  ["2019-07-13 00:02:44", 40, "Kuala Lumpur"],
  ["2019-07-13 00:02:44", 27, "Panama City"],
  ["2019-07-13 00:02:45", 37, "Kuala Lumpur"],
  ["2019-07-13 00:02:45", 14, "Panama City"],
  ["2019-07-13 00:02:46", 26, "Kuala Lumpur"],
  ["2019-07-13 00:02:46", 21, "Panama City"],
  ["2019-07-13 00:02:47", 36, "Kuala Lumpur"],
  ["2019-07-13 00:02:47", 42, "Panama City"],
  ["2019-07-13 00:02:48", 20, "Kuala Lumpur"],
  ["2019-07-13 00:02:48", 24, "Panama City"],
  ["2019-07-13 00:02:49", 46, "Kuala Lumpur"],
  ["2019-07-13 00:02:49", 37, "Panama City"],
  ["2019-07-13 00:02:50", 29, "Kuala Lumpur"],
  ["2019-07-13 00:02:50", 26, "Panama City"],
  ["2019-07-13 00:02:51", 18, "Kuala Lumpur"],
  ["2019-07-13 00:02:51", 27, "Panama City"],
  ["2019-07-13 00:02:52", 42, "Kuala Lumpur"],
  ["2019-07-13 00:02:52", 40, "Panama City"],
  ["2019-07-13 00:02:53", 14, "Kuala Lumpur"],
  ["2019-07-13 00:02:53", 37, "Panama City"],
  ["2019-07-13 00:02:54", 31, "Kuala Lumpur"],
  ["2019-07-13 00:02:54", 35, "Panama City"],
  ["2019-07-13 00:02:55", 32, "Kuala Lumpur"],
  ["2019-07-13 00:02:55", 19, "Panama City"],
  ["2019-07-13 00:02:56", 41, "Kuala Lumpur"],
  ["2019-07-13 00:02:56", 27, "Panama City"],
  ["2019-07-13 00:02:57", 23, "Kuala Lumpur"],
  ["2019-07-13 00:02:57", 17, "Panama City"],
  ["2019-07-13 00:02:58", 34, "Kuala Lumpur"],
  ["2019-07-13 00:02:58", 28, "Panama City"],
  ["2019-07-13 00:02:59", 13, "Kuala Lumpur"],
  ["2019-07-13 00:02:59", 14, "Panama City"]
];

// update date
var getNextRandomDate = function getNextRandomDate(d) {
  return new Date(new Date(d).getTime() + 1000);
};

var fd = function fd(d) {
  var e = new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString();
  var f = e.split(".")[0];
  var g = f.split("T");
  var h = g.join(" ");
  return h;
};

// random data generator
var randBetween = function randBetween(min, max) {
  var ceilMin = Math.ceil(min);

  return Math.floor(Math.random() * (Math.floor(max) - ceilMin + 1)) + ceilMin;
};

// Fusioncharts data store
var dataStore = new FusionCharts.DataStore().createDataTable(data, schema);
// time series chart instance
var realtimeChart = new FusionCharts({
  type: "timeseries",
  renderAt: "chart-container",
  id: "real-time-demo-chart",
  width: "100%",
  height: "100%",
  dataSource: {
    caption: {
      text: "Temperature Reading"
    },
    subcaption: {
      text: "Panama City & Kuala Lumpur"
    },
    extensions: {
      standardRangeSelector: {
        enabled: "0"
      },
      customRangeSelector: {
        enabled: "0"
      }
    },
    data: dataStore,
    yAxis: { plottype: "area" },
    series: "City"
  }
}).render();

let lastTimeStr = data[data.length - 1][0];
lastTimeStr = getNextRandomDate(lastTimeStr);
let newDate = new Date(lastTimeStr);
let formattedNewDate = fd(newDate);

let incrementor = setInterval(function() {
  newDate = getNextRandomDate(formattedNewDate);
  formattedNewDate = fd(newDate);

  realtimeChart.feedData([
    [formattedNewDate, randBetween(13, 45), "Kuala Lumpur"],
    [formattedNewDate, randBetween(13, 45), "Panama City"]
  ]);
}, 1000);

const handler = {
  switchTheme: function(val) {
    let fusionThemeElem = document.getElementById("fusion-theme-switcher");
    let gammelThemeElem = document.getElementById("gammel-theme-switcher");
    let candyThemeElem = document.getElementById("candy-theme-switcher");
    let umberThemeElem = document.getElementById("umber-theme-switcher");

    fusionThemeElem.classList.remove("btn-selected");
    gammelThemeElem.classList.remove("btn-selected");
    candyThemeElem.classList.remove("btn-selected");
    umberThemeElem.classList.remove("btn-selected");

    if (val === "fusion") {
      fusionThemeElem.classList.add("btn-selected");
    } else if (val === "gammel") {
      gammelThemeElem.classList.add("btn-selected");
    } else if (val === "candy") {
      candyThemeElem.classList.add("btn-selected");
    } else if (val === "umber") {
      umberThemeElem.classList.add("btn-selected");
    }

    FusionCharts.items["real-time-demo-chart"].setChartAttribute("theme", val);
  },

  changePlotType: function(val) {
    let ds = {
      caption: {
        text: "Temperature Reading"
      },
      subcaption: {
        text: "Panama City & Kuala Lumpur"
      },
      extensions: {
        standardRangeSelector: {
          enabled: "0"
        },
        customRangeSelector: {
          enabled: "0"
        }
      },
      data: dataStore,
      yAxis: { plotType: val },
      series: "City"
    };

    console.log(ds.yAxis);

    let areaPlotElem = document.getElementById("area-plot-switcher");
    let linePlotElem = document.getElementById("line-plot-switcher");
    let columnPlotElem = document.getElementById("column-plot-switcher");

    areaPlotElem.classList.remove("btn-selected");
    linePlotElem.classList.remove("btn-selected");
    columnPlotElem.classList.remove("btn-selected");

    if (val === "area") {
      areaPlotElem.classList.add("btn-selected");
    } else if (val === "line") {
      linePlotElem.classList.add("btn-selected");
    } else if (val === "column") {
      columnPlotElem.classList.add("btn-selected");
    }

    FusionCharts.items["real-time-demo-chart"].setJSONData(ds);
  }
};

External CSS

  1. https://ds.fusioncharts.com/2.0.42/css/ds.css

External JavaScript

  1. https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js
  2. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js
  3. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.gammel.js
  4. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.candy.js
  5. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.umber.js