Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="pie-chart-sales-by-company"></div>
</body>
</html>
 
var data = crossfilter([
     {date: new Date(2014, 1, 4), total: 1412.00, user: "Paul", status: "lead", company: "Acme"},
     {date: new Date(2014, 5, 27), total: 1202.11, user: "Michael", status: "closed", company: "Acme"},
     {date: new Date(2014, 6, 12), total: 412.00, user: "Paul", status: "lead", company: "Acme"},
     {date: new Date(2014, 6, 22), total: 402.00, user: "John", status: "open", company: "Billings Corp"},
     {date: new Date(2014, 7, 4), total: 412.00, user: "Paul", status: "closed", company: "Acme"},
     {date: new Date(2014, 9, 4), total: 0, user: "Paul", status: "lead", company: "Billings Corp"},
     {date: new Date(2014, 10, 4), total: 0, user: "Paul", status: "lead", company: "Coffees"},
     {date: new Date(2014, 10, 1), total: 412.00, user: "Pete", status: "lost", company: "Dundler Mifflen"},
     {date: new Date(2014, 11, 9), total: 3200.00, user: "John", status: "closed", company: "Dundler Mifflen"},
     {date: new Date(2014, 6, 22), total: 402.00, user: "John", status: "open", company: "Billings Corp"},
     {date: new Date(2014, 7, 4), total: 412.00, user: "Paul", status: "closed", company: "Acme"},
     {date: new Date(2014, 9, 4), total: 0, user: "Paul", status: "lead", company: "Billings Corp"},
     {date: new Date(2014, 10, 4), total: 0, user: "Paul", status: "lead", company: "Coffees"},
     {date: new Date(2014, 10, 1), total: 412.00, user: "Pete", status: "lost", company: "Dundler Mifflen"},
     {date: new Date(2014, 11, 9), total: 3200.00, user: "John", status: "closed", company: "Dundler Mifflen"},
     {date: new Date(2014, 6, 22), total: 402.00, user: "John", status: "open", company: "Billings Corp"},
     {date: new Date(2014, 7, 4), total: 412.00, user: "Paul", status: "closed", company: "Acme"},
     {date: new Date(2014, 9, 4), total: 0, user: "Paul", status: "lead", company: "Billings Corp"},
     {date: new Date(2014, 10, 4), total: 0, user: "Paul", status: "lead", company: "Coffees"},
     {date: new Date(2014, 10, 1), total: 412.00, user: "Pete", status: "lost", company: "Dundler Mifflen"},
     {date: new Date(2014, 11, 9), total: 3200.00, user: "John", status: "closed", company: "Dundler Mifflen"},
     {date: new Date(2014, 6, 22), total: 402.00, user: "John", status: "open", company: "Billings Corp"},
     {date: new Date(2014, 7, 4), total: 412.00, user: "Paul", status: "closed", company: "Acme"},
     {date: new Date(2014, 9, 4), total: 0, user: "Paul", status: "lead", company: "Billings Corp"},
     {date: new Date(2014, 10, 4), total: 0, user: "Paul", status: "lead", company: "Coffees"},
     {date: new Date(2014, 10, 1), total: 412.00, user: "Pete", status: "lost", company: "Dundler Mifflen"},
     {date: new Date(2014, 11, 9), total: 3200.00, user: "John", status: "closed", company: "Dundler Mifflen"},
     {date: new Date(2014, 6, 22), total: 402.00, user: "John", status: "open", company: "Billings Corp"},
     {date: new Date(2014, 7, 4), total: 412.00, user: "Paul", status: "closed", company: "Acme"},
     {date: new Date(2014, 9, 4), total: 0, user: "Paul", status: "lead", company: "Billings Corp"},
     {date: new Date(2014, 10, 4), total: 0, user: "Paul", status: "lead", company: "Coffees"},
     {date: new Date(2014, 10, 1), total: 412.00, user: "Pete", status: "lost", company: "Dundler Mifflen"},
     {date: new Date(2014, 11, 9), total: 3200.00, user: "John", status: "closed", company: "Dundler Mifflen"}
   ]);
​
  var byTotal = function(d) {
    return d.total;
  }
​
  var companyDimension = data.dimension(function(d) {return d.company;});
  var totalSalesByCompany = companyDimension.group().reduceSum(byTotal);
  var pieChartCompanySales = dc.pieChart("#pie-chart-sales-by-company");
  pieChartCompanySales
    .width(150).height(150)
    .dimension(companyDimension)
    .group(totalSalesByCompany)
    .innerRadius(50)
    .legend(dc.legend().x(80).y(70).itemHeight(13).gap(5));
​
  dc.renderAll();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jeffreybilespro
0viewers