Dimple

<html>
<head>
<title>Dados Consolidados- Por Posição</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>

<style>

body {
	font-family: "Lato", sans-serif;
    background-repeat: no-repeat;
	
	}
</style>

</head>

<body >

<div>
    <form action="/action_page.php">
  <select name="cars">
    <option value="ByType">ByType</option>
    <option value="ByQuantity">ByQuantity</option>
     </select>
  <br><br>
  <input id='value'  name='switch' >
</form>
    
    <input id="ByType" type='radio' value=0 name='switch' checked> By Type 
  <input id="ByQuantity" type='radio' value=1 name='switch'> By Quantity

</div>
    
    
    
    <script type="text/javascript"> 
    
    var svg = dimple.newSvg("#chartContainer", 590, 400);

d3.tsv("data_dimple.tsv", function (data) {    
        
/*var initialData = [
  {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
  {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
  {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
]; */
        
var initialData =data ;
var dataForCrossFilter = initialData;
var payments = crossfilter(dataForCrossFilter);

var dataForChart = [types, quantities]
var dataIndex=0

var myChart = new dimple.chart(svg, dataForChart[dataIndex]);
myChart.setBounds(20, 20, 460, 360)
myChart.addMeasureAxis("p", "value");
myChart.addSeries("key", dimple.plot.pie);
myChart.addLegend(500, 20, 90, 300, "left");
myChart.draw();

function updateChart(dataIndex){
    myChart.data = dataForChart[dataIndex];
    
  myChart.draw();  
}

function triggerChange(ev){
    
	updateChart(this.getAttribute('value'));
}

d3.select("#ByType").on('click', triggerChange);
d3.select("#ByQuantity").on('click', triggerChange);

});

</script>
    
    </body>
</html>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://code.jquery.com/jquery-3.1.1.js

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/dimple/2.2.0/dimple.latest.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js