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.
Constructor Attributes | Constructor Name and Description |
---|---|
LABKEY.vis.PieChart(config)
The pie chart visualization is built off of the d3pie JS library.
|
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.