NVD3.js Sample: A Pie Chart

The following Pie Chart, drawn by NVD3.js library:

Regular pie chart
Donut chart

Using our plugin, named Blazing Charts, I added the following shortcode to this post:

(left-bracket)BlazingChart charttype="d3" source="nvd3-js-pie-chart-sample" options="nvd3"(right bracket)

The first parameter specifies which charting library is used. The second parameter is the slug of a Custom Post Type, named Chart Snippets, introduced by that plugin. The third parameter can be a comma-separated list of auxiliary libraries loaded after the main one. For drawing these pie charts, NVD3.js is used.

The source of the script for the drawing is added as plain text to a Chart Snippet. The content of the chart snippet for the above chart is as following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<div id='chart'>Regular pie chart
  <svg style='height:500px;width:400px'> </svg>
</div>
<div id='chart2'>Donut chart
  <svg style='height:500px;width:400px'> </svg>
</div>
<style>
.nvtooltip {
   max-width: 150px;
}
</style>
 
<script type="text/javascript">
window.onload = function () {
 
//Regular pie chart example
nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true);
 
    d3.select("#chart svg")
        .datum(exampleData())
        .transition().duration(350)
        .call(chart);
 
  return chart;
});
 
//Donut chart example
nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)     //Display pie labels
      .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
      .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
      .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
      .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
      ;
 
    d3.select("#chart2 svg")
        .datum(exampleData())
        .transition().duration(350)
        .call(chart);
 
  return chart;
});
 
//Pie chart example data. Note how there is only a single array of key-value pairs.
function exampleData() {
  return  [
      { 
        "label": "One",
        "value" : 29.765957771107
      } , 
      { 
        "label": "Two",
        "value" : 0
      } , 
      { 
        "label": "Three",
        "value" : 32.807804682612
      } , 
      { 
        "label": "Four",
        "value" : 196.45946739256
      } , 
      { 
        "label": "Five",
        "value" : 0.19434030906893
      } , 
      { 
        "label": "Six",
        "value" : 98.079782601442
      } , 
      { 
        "label": "Seven",
        "value" : 13.925743130903
      } , 
      { 
        "label": "Eight",
        "value" : 5.1387322875705
      }
    ];
}
}
</script>
<div id='chart'>Regular pie chart
  <svg style='height:500px;width:400px'> </svg>
</div>
<div id='chart2'>Donut chart
  <svg style='height:500px;width:400px'> </svg>
</div>
<style>
.nvtooltip {
   max-width: 150px;
}
</style>

<script type="text/javascript">
window.onload = function () {

//Regular pie chart example
nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true);

    d3.select("#chart svg")
        .datum(exampleData())
        .transition().duration(350)
        .call(chart);

  return chart;
});

//Donut chart example
nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)     //Display pie labels
      .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
      .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
      .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
      .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
      ;

    d3.select("#chart2 svg")
        .datum(exampleData())
        .transition().duration(350)
        .call(chart);

  return chart;
});

//Pie chart example data. Note how there is only a single array of key-value pairs.
function exampleData() {
  return  [
      { 
        "label": "One",
        "value" : 29.765957771107
      } , 
      { 
        "label": "Two",
        "value" : 0
      } , 
      { 
        "label": "Three",
        "value" : 32.807804682612
      } , 
      { 
        "label": "Four",
        "value" : 196.45946739256
      } , 
      { 
        "label": "Five",
        "value" : 0.19434030906893
      } , 
      { 
        "label": "Six",
        "value" : 98.079782601442
      } , 
      { 
        "label": "Seven",
        "value" : 13.925743130903
      } , 
      { 
        "label": "Eight",
        "value" : 5.1387322875705
      }
    ];
}
}
</script>

6 thoughts on “NVD3.js Sample: A Pie Chart”

  1. Can’t make it work with WordPress. This code is copied and pasted as-is to WordPress without modification. Still doesn’t work.

    1. Hi,
      would you please check if the shortcode is entered exactly the same. The shortcode is case-sensitive. Moreover, please make sure that the slug of the chart snippet in “source” option is typed correctly. The source option should point to the chart snippet.
      If these hints does not solve it, would please give me the url of the page that contains that chart?

  2. Hello! Love your plugin.

    Quick issue: NVD3 isn’t listed in the documentation as a possible option for charttype d3, and when I call it, it doesn’t seem to work.

    I actually ask because I’m interested in using C3 with Blazing charts -( http://c3js.org/ ), and wanted to know if I can add my own libraries? Or if it’s not too much trouble, you could include this as a D3 option? MUCH appreciated!

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.