Pie Chart¶

Short Description¶

This module features a simple pie chart diagram. It uses some animations and provides some customization options.

Example Code¶

<div id="table-sparql-query" class="plastic-js" style="height: 300px; width: 100%;">

    <script class="plastic-data" type="application/json" data-url="/docs/_static/data/countries.json" data-format="sparql-json"></script>

    <script class="plastic-display" data-module="pie-chart" type="application/json">
        {
            "showLabels": false,
            "tooltips": true
        }
    </script>

</div>

Live Example¶

Example Data¶

Link to the JSON file - click here.

Dependencies¶

Note

plastic.js manages the dependencies automatically. There is no need to include them manually, but you can do so if you want.

D3.js¶

Website: http://d3js.org/
Version: 3.4.6
JavaScript: http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js

NVD3¶

Website: http://nvd3.org/
Version: 1.1.15-beta
JavaScript: http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js
CSS: http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css

Available Options¶

This example snippet contains all available options with their default values:

<script class="plastic-display" data-module="pie-chart" type="application/json>
    {
        "showLabels": true
        "tooltips": true
        "transitionDuration": 350
    }
</script>

Properties details:

Display Labels

Description	Show the labels.
Keyword	showLabels
Type	boolean
Default	true

"showLabels": true

Tooltips

Description	Show tooltips
Keyword	tooltips
Type	boolean
Default	true

"tooltips": true

Transition Duration

Description	Duration of the animation in milliseconds.
Keyword	transitionDuration
Type	number
Default	350

"transitionDuration": 350