<div class="container-fluid">
  <div class="card shadow mt-2 mb-2 mr-2 ml-2">
    <div class="card-body">
      <div id="chart-container"></div>
      <div class="control-panel mt-2 ml-5 mr-5">
        <button id="exportBtn" type="button" class="btn btn-sm btn-outline-secondary">Get CSV Data</button>
        <div id="myModal" class="modal">
          <div class="modal-content">
            <span class="close">&times;</span>
            <div>
              <pre id="csv-data" style="height: 250px;"></pre>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
</div>
</div>

.shadow {
  text-align: center !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 6px 14px 0 rgba(33, 35, 68, 0.09) !important;
}

#chart-container {
  width: 100%;
  height: 400px;
}

*,
*:focus {
  outline: none;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 30px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 75%;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

const dataSource = {
  chart: {
    caption: "Annual Retail Industry Sales Distribution for US",
    subcaption: "2010-2016",
    yaxisname: "Sales (in million $)",
    yaxismaxvalue: "28000",
    palettecolors: "#5D62B5, #979AD0",
    yaxisminvalue: "9000",
    theme: "fusion",
    showlegend: "0",
    plotspacepercent: "55",
    showalloutliers: "1",
    outliericonsides: "20",
    outliericonalpha: "40",
    outliericonshape: "triangle",
    outliericonradius: "4",
    mediancolor: "#FFFFFF",
    plottooltext:
      "<b>Sales for $label:</b><br>Max: <b>$maxDataValue million</b><br>Q3: <b>$Q3 million</b><br>Median: <b>$median million</b><br>Q1: <b>$Q1 million</b><br>Min: <b>$minDataValue million</b>"
  },
  categories: [
    {
      category: [
        {
          label: "2010"
        },
        {
          label: "2011"
        },
        {
          label: "2012"
        },
        {
          label: "2013"
        },
        {
          label: "2014"
        },
        {
          label: "2015"
        },
        {
          label: "2016"
        }
      ]
    }
  ],
  dataset: [
    {
      seriesname: "US",
      data: [
        {
          value:
            "12297, 12819, 14632, 14184, 14922, 14273, 13955, 14709, 13520, 14387",
          outliers: "18415, 26642"
        },
        {
          value:
            "12857, 14178, 14513, 14485, 14719, 13901, 14675, 13597, 14263",
          outliers: "11895, 18035, 26243"
        },
        {
          value:
            "11428, 13165, 14445, 13576, 14108, 13908, 13145, 14710, 13124, 13485",
          outliers: "17615, 24604"
        },
        {
          value:
            "11313, 12047, 13927, 12474, 13944, 13251, 12594, 14139, 12500, 13309",
          outliers: "16882, 23814"
        },
        {
          value:
            "10579, 11583, 13223, 13055, 13970, 12957, 12670, 14113, 12111, 13150, 16804",
          outliers: "23853"
        },
        {
          value:
            "10797, 11231, 13178, 12349, 13692, 12561, 12555, 13653, 12023, 12936",
          outliers: "16301, 23425"
        },
        {
          value:
            "10221, 11208, 12648, 11925, 12536, 12308, 11836, 12628, 11355, 11945",
          outliers: "17473, 23962"
        }
      ]
    }
  ]
};

new FusionCharts({
  type: "boxandwhisker2d",
  renderAt: "chart-container",
  width: "100%",
  height: "100%",
  dataFormat: "json",
  id: "demo-chart",
  dataSource
}).render();

var modal = document.getElementById("myModal");
var btn = document.getElementById("exportBtn");
var span = document.getElementsByClassName("close")[0];
var dataDisplayElem = document.getElementById("csv-data");

span.onclick = function () {
  modal.style.display = "none";
};

window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

btn.onclick = function () {
  modal.style.display = "block";
  dataDisplayElem.innerHTML = FusionCharts.items["demo-chart"].getCSVData();
};