D3 Examples - Dimple

xxxxxxxxxx
 
<html>
<head>
<title>Dados Consolidados- Por Posição</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
​
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js"></script>
​
    <!--<script src="https://d3js.org/d3.v3.min.js" type="text/JavaScript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.2.0/dimple.latest.min.js"></script>-->
<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 id="chartContainer">
 
</div>
​
<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 paymentsByType = payments.dimension(function(d) { return d.type; }),
    paymentVolumeByType = paymentsByType.group().reduceSum(function(d) { return d.total; }),
    types = paymentVolumeByType.all();
    
var paymentsByQuantity = payments.dimension(function(d) { return d.quantity; }),
        paymentVolumeByQuantity = paymentsByQuantity.group().reduceSum(function(d) { return d.total; }),
    quantities = paymentVolumeByQuantity.all();
​
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>
    