Class Index | File Index

Classes


Class LABKEY.vis.PieChart

PieChart which allows a user to programmatically create an interactive pie chart visualization (note: D3 rendering only).
Defined in: plot.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
The pie chart visualization is built off of the d3pie JS library.
Config Summary
Config Attributes Config Name and Description
 
The array of chart segment data.
 
The chart canvas height in pixels.
 
The id of the div/span to insert the svg element into.
 
The chart canvas width in pixels.
Class Detail
LABKEY.vis.PieChart(config)
The pie chart visualization is built off of the d3pie JS library. The config properties listed below are the only required properties to create a base pie chart. For additional display options and interaction options, you can provide any of the properties defined in the d3pie docs to the config object.
 Example of a simple pie chart (only required config properties).

 <div id='pie'></div>
 <script type="text/javascript">

 </script>
 var pieChartData = [
     {label: "test1", value: 1},
     {label: "test2", value: 2},
     {label: "test3", value: 3},
     {label: "test4", value: 4}
 ];

 var pieChart = new LABKEY.vis.PieChart({
    renderTo: "pie",
    data: pieChartData,
    width: 300,
    height: 250
 });

 Example of a customized pie chart using some d3pie lib properties.

 <div id='pie2'></div>
 <script type="text/javascript">
 var pieChartData = [
     {label: "test1", value: 1},
     {label: "test2", value: 2},
     {label: "test3", value: 3},
     {label: "test4", value: 4}
 ];

 var pieChart2 = new LABKEY.vis.PieChart({
    renderTo: "pie2",
    data: pieChartData,
    width: 300,
    height: 250,
    // d3pie lib config properties
    header: {
        title: {
            text: 'Pie Chart Example'
        }
    },
    labels: {
        outer: {
            format: 'label-value2',
            pieDistance: 15
        },
        inner: {
            hideWhenLessThanPercentage: 10
        },
        lines: {
            style: 'straight',
            color: 'black'
        }
    },
    effects: {
        load: {
            speed: 2000
        },
        pullOutSegmentOnClick: {
            effect: 'linear',
            speed: '1000'
        },
        highlightLuminosity: -0.75
    },
    misc: {
        colors: {
            segments: LABKEY.vis.Scale.DarkColorDiscrete(),
            segmentStroke: '#a1a1a1'
        },
        gradient: {
            enabled: true,
            percentage: 60
        }
    },
    callbacks: {
        onload: function() {
            pieChart2.openSegment(3);
        }
    }
 });
 </script>
Parameters:
{Object} config
An object that contains the following properties
Config Detail
{Array} config.data
The array of chart segment data. Each object is of the form: { label: "label", value: 123 }.

{Number} config.height
The chart canvas height in pixels.

{String} config.renderTo
The id of the div/span to insert the svg element into.

{Number} config.width
The chart canvas width in pixels.

Documentation generated by JsDoc Toolkit 2.3.2 on Thu Mar 14 2019 22:39:27 GMT-0000 (UTC)