-
Notifications
You must be signed in to change notification settings - Fork 4
Pie Charts
This module offers 3 different types of pie chart:
- simplepie: a typical single-series pie chart
- simpledonut: a single-series pie chart with a hole in the center. Some feel this makes comparison between categories more reliable.
- multidonut: a pie chart consisting of multiple rings, each of which represents a series of data.
All three pie charts share the same basic data structure. Each category (piece of pie) is an object with a label and a count and all categories in a single series are stored in an array. For the first two pie types (simplepie and simpledonut), that fully describes the data structure. For example, the following data structure describes a single-series dataset with four categories (Accession, Breeder's Cross, Recombinant Inbred Line, and Cultivated Variety) that can be used with either simplepie or simpledonut.
var simplePieData = [
{
"label": "Accession",
"count": 2390,
},
{
"label": "Breeders Cross",
"count": 567,
},
{
"label": "Recombinant Inbred Line",
"count": 115,
},
{
"label": "Cultivated Variety",
"count": 78,
},
];For a multi-series dataset a similar data structure is used. Each series is an object in an array with the keys label, which is the name of the series, and parts, which is an array of the same format used by simplepie and simpledonut. For example, the following dataset describes 3 series of data (allele counts for MarkerA, MarkerB and MarkerC) with each series consisting of 2-3 categories (GG, AA, AG). By combining these data into a single, multi-ring pie chart, researchers can easily see the difference in allele counts between markers.
var multiDonutData = [
{
"label": "MarkerA",
"parts": [
{ "label": "GG", "count": 16 },
{ "label": "AA", "count": 10 },
{ "label": "AG", "count": 2},
],
},
{
"label": "MarkerB",
"parts": [
{ "label": "GG", "count": 145 },
{ "label": "AA", "count": 99 },
{ "label": "AG", "count": 19 },
],
},
{
"label": "MarkerC",
"parts": [
{ "label": "GG", "count": 78 },
{ "label": "AA", "count": 73 },
],
},
];These data structures are simple, yet powerful and can be easily built from a single SQL query. For example, the following coding example, pulls all records from the organism_feature_counts materialized view for the "Tripalus" organism and assembles it into a single series dataset.
<?php
// The name of the materialized view to pull results from.
$mview_name = 'organism_feature_count';
// The name of the column in that materialized view containing the human-readable label
// for the category.
$label_column = 'feature_type';
// The name of the column in that materialized view containing the value for that category.
$count_column = 'num_features';
// The name of the column in that materialized view to filter results on.
$filter_column = 'genus';
// The value of the filter_column for this particular chart.
$filter_value = 'Tripalus';
// The Query to pull out the results. This query uses the values set above to make it more generic.
$query = "SELECT $label_column as label, $count_column as count
FROM {" . $mview_name . "}
WHERE $filter_column = :filter_value";
$resource = chado_query($query, array(':filter_value' => $filter_value));
// Store the dataset for use in the chart as $data.
$data = array();
foreach ($resource as $r) {
$data[] = array(
'label' => $r->label,
'count' => $r->count,
);
}
?>This is best done in a preprocess field so that the results can be added to Drupal Javascript settings as documented here.
Figures are drawn by passing options to tripald3.drawFigure(). In addition to a number of general options such as height, width, etc (see documentation here), you can also pass chart-specific options through the chartOptions key as shown in the following example (chart-specific option: maxRadius).
// The following code uses the Tripal D3 module to draw a multi-series chart
// and attach it to an #tripald3-multidonut element.
// Notice that the data for the pie chart is passed in directly.
tripalD3.drawFigure(
multiDonutData,
{
// General Options which apply to all charts.
"chartType" : "multidonut",
"elementId": "tripald3-multidonut",
"height": 250,
"width": 650,
"title": "Comparison of allele calls across 3 FBA-1 markers",
"legend": "The above chart shows the allele ratios for three separate markers assaying the FBA-1 (fictional but amazing) gene.",
// All chart-specific options should be passed in through the chartOptions object.
"chartOptions": {
"maxRadius": 200,
},
}
);The following options are supported for a simple pie chart:
- maxRadius: the outside radius of the pie chart.
- labelPadding: the number of pixels between the series labels and the right edge of the pie chart.
- drawKey: whether or not to draw the key; default is "true".
The following example (from the demo), draws a simple pie chart. It uses all the chart-specific defaults and the site-specific color-scheme chosen in the Tripal D3 configuration.
<div id="tripald3-simplepie" class="tripald3-diagram">
<!-- Javascript will add the Simple Pie Chart, Title and Figure legend here -->
</div>
<script type="text/javascript">
Drupal.behaviors.tripalD3demoSimplePie = {
attach: function (context, settings) {
// The following code uses the Tripal D3 module to draw a pie chart
// and attach it to an #tripald3-simplepie element.
// Notice that the data for the pie chart is passed in directly.
tripalD3.drawFigure(
simplePieData,
{
"chartType" : "simplepie",
"elementId": "tripald3-simplepie",
"height": 250,
"width": 500,
"keyPosition": "right",
"title": "Proportion of <em>Tripalus databasica</em> Germplasm Types",
"legend": "The above pie chart depicts the ratio of germplasm types available for <em>Tripalus databasica</em>.",
}
);
}
};
</script>The following options are supported for a simple pie chart:
- maxRadius: the outside radius of the pie chart.
- donutWidth: the width of the donut (difference between inner and outer radius).
- timbitRadius: the inside radius of the donut.
- labelPadding: the number of pixels between the series labels and the right edge of the pie chart.
- drawKey: whether or not to draw the key; default is "true".
The following example (from the demo), draws a simple donut chart. It uses all the chart-specific defaults and the site-specific color-scheme chosen in the Tripal D3 configuration.
<div id="tripald3-simpledonut" class="tripald3-diagram">
<!-- Javascript will add the Simple Donut Chart, Title and Figure legend here -->
</div>
<script type="text/javascript">
Drupal.behaviors.tripalD3demoSimplePie = {
attach: function (context, settings) {
// The following code uses the Tripal D3 module to draw a donut pie chart
// and attach it to an #tripald3-simpledonut element.
// Notice that the data for the donut pie chart is passed in directly.
tripalD3.drawFigure(
simplePieData,
{
"chartType" : "simpledonut",
"elementId": "tripald3-simpledonut",
"height": 250,
"width": 500,
"keyPosition": "left",
"title": "Proportion of <em>Tripalus databasica</em> Germplasm Types",
"legend": "The above pie chart depicts the ratio of germplasm types available for <em>Tripalus databasica</em>.",
}
);
}
};
</script>The following options are supported for a simple pie chart:
- maxRadius: the outside radius of the pie chart.
- donutWidth: the width of the donut (difference between inner and outer radius).
- timbitRadius: the inside radius of the donut.
- labelPadding: the number of pixels between the series labels and the right edge of the pie chart.
- drawKey: whether or not to draw the key; default is "true".
The following example (from the demo), draws a multi-series pie chart. It uses all the chart-specific defaults and the site-specific color-scheme chosen in the Tripal D3 configuration.
<div id="tripald3-multidonut" class="tripald3-diagram">
<!-- Javascript will add the Multiple Series Donut Chart, Title and Figure legend here -->
</div>
<script type="text/javascript">
Drupal.behaviors.tripalD3demoMultiDonut = {
attach: function (context, settings) {
// The following code uses the Tripal D3 module to draw a multi-series chart
// and attach it to an #tripald3-multidonut element.
// Notice that the data for the pie chart is passed in directly.
tripalD3.drawFigure(
multiDonutData,
{
"chartType" : "multidonut",
"elementId": "tripald3-multidonut",
"height": 250,
"width": 650,
"keyPosition": "right",
"title": "Comparison of allele calls across 3 FBA-1 markers",
"legend": "The above chart shows the allele ratios for three seperate markers assaying the FBA-1 (fictional but amazing) gene.",
"key": {"title": "Alleles"},
}
);
}
};
</script>