How to create Pie chart using Plottable.js

Question

I tried to create a pie chart using Plottable.js. Does anyone know how? I get confused on how to pass the value and put a label in.

Here is my sample data:

var store = [{ Name:"Item 1", Total:18 },
             { Name:"Item 2", Total:7 },
             { Name:"Item 3", Total:3},
             { Name:"Item 4", Total:12}];

Thanks again!

score 4 · Accepted Answer · answered Oct 17 '15 at 00:25

You can specify the value of each slice with Pie.sectorValue and you can turn on the label with Pie.labelsEnabled which shows the corresponding value for each sector. You can also format the labels with Pie.labelFormatter

However, I don't think there is a way to show data other than the sector value as the label, but depending on what you want, a legend might work

Here's an example of Pie chart with Legend:

window.onload = function(){
  var store = [{ Name:"Item 1", Total:18 },
               { Name:"Item 2", Total:7 },
               { Name:"Item 3", Total:3},
               { Name:"Item 4", Total:12}];
  

  var colorScale = new Plottable.Scales.Color();
  var legend = new Plottable.Components.Legend(colorScale);

  var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d){ return d.Name; }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .sectorValue(function(d){ return d.Total; } )
  .labelsEnabled(true)
  .labelFormatter(function(n){ return "$ " + n ;});
    
  new Plottable.Components.Table([[pie, legend]]).renderTo("#chart");
    
     
}

<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>

Or, if all the values are unique, then you can probably hack it with labelFormatter

window.onload = function(){
  var store = [{ Name:"Item 1", Total:18 },
               { Name:"Item 2", Total:7 },
               { Name:"Item 3", Total:3},
               { Name:"Item 4", Total:12}];
  var reverseMap = {};
  store.forEach(function(s) { reverseMap[s.Total] = s.Name;});
    
  var ds = new Plottable.Dataset(store);  
  

  var pie = new Plottable.Plots.Pie()
  .addDataset(ds)
  .sectorValue(function(d){ return d.Total; } )
  .labelsEnabled(true)
  .labelFormatter(function(n){ return reverseMap[n] ;})
  .renderTo("#chart");
}

<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>

Zoe, btw, how did you find out about Pie? Is there any documentations or sample about Plottable.js? The API (http://plottablejs.org/docs/modules/plottable.html) isn't very useful as there is no explanation nor example. — Sam, Oct 17 '15 at 03:30
there's a couple examples on the components page: http://plottablejs.org/components/plots/pie/ — Zoe, Oct 19 '15 at 21:44
LOL... I don't know why I missed that! I guess, I went straight to example page :( Thanks Zoe! — Sam, Oct 20 '15 at 23:12

How to create Pie chart using Plottable.js

1 Answers1