<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<button onclick="updateDataCSV()">Update data from CSV</button>
<div id="wdr-component"></div>
button {
    border: 2px solid #0598df;
    background: #fff;
    color: #0598df;
    text-transform: uppercase;
    cursor: pointer;
    margin: 5px 0;
    display: inline-block;
    -webkit-transition: all .3s;
    transition: all .3s;
    font-weight: normal;
    padding: 10px 10px;
    font-size: 14px;
}

button:hover {
    background: #0598df;
    color: #fff;
}

button:focus {
    outline: none;
}
function updateDataCSV() {
  webdatarocks.updateData({
    filename: 'https://cdn.webdatarocks.com/data/data.csv'
  });
}

var pivot = new WebDataRocks({
	container: "#wdr-component",
	height: 345,
	report: {
    dataSource: {
      data: [{
    "Color": "green",
    "M": "September",
    "W": "Wed",
    "Country": "Canada",
    "State": "Ontario",
    "City": "Toronto",
    "Price": 174,
    "Quantity": 22
  },
  {
    "Color": "red",
    "M": "September",
    "W": "Wed",
    "Country": "Canada",
    "State": "Ontario",
    "City": "Toronto",
    "Price": 224,
    "Quantity": 22
  }]
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.