Personal tools

Template:PieChart: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
(Created page with "<noinclude> This is the "PieChart" template. It should be called in the following format: <pre> {{PieChart |chartTitle= |seriesName= |chartSize= |renderTo= |plotBackgroundColo...")
 
No edit summary
 
(40 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>
<html>
This is the "PieChart" template.
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/flot/jquery.flot.js"></script>
It should be called in the following format:
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/highcharts/highcharts.js"></script>
<pre>
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/highcharts/modules/exporting.js"></script>
{{PieChart
 
|chartTitle=
 
|seriesName=
<script type="text/javascript">
|chartSize=
/*
|renderTo=
The code below will take parameters from a page and create a Pie_Chart extracting
|plotBackgroundColor=
data from the values
|plotBorderWidth=
*/
|plotShadow=
$(document).ready(function (){
|percentageDecimals=
 
|allowPointSelect=
/*
|cursor=
The code below is for chart settings
|dataLabels=
*/
|series=
var content = "</html>{{{data}}}<html>";
}}
var data_delimiter  = "</html>{{{delimiter}}}<html>";
</pre>
var chart_title = "</html>{{{chartTitle}}}<html>";
Edit the page to see the template text.
var series_name = "</html>{{{seriesName}}}<html>";
</noinclude><includeonly>{| class="wikitable"
var chart_size  = "</html>{{{chartSize}}}<html>";
!
var render_to  = "</html>{{{renderTo}}}<html>";
| {{{chartTitle|}}}
var percentage_decimals="</html>{{{percentageDecimals}}}<html>";
|-
 
!
var table_name  = "</html>{{{tableName}}}<html>";
| {{{seriesName|}}}
 
|-
 
!
var content_array = content.split(data_delimiter);
| {{{chartSize|}}}
var result_tmp = getDistinctElements(content_array);
|-
 
!
 
| {{{renderTo|}}}
var data = [];
|-
 
!
for(var i=0, l=result_tmp .length; i<l; i++){
| {{{plotBackgroundColor|}}}
var tmp =result_tmp [i];
|-
var counted = countItems(content,tmp);
!
 
| {{{plotBorderWidth|}}}
var point = [tmp , counted];
|-
data.push(point);
!
}
| {{{plotShadow|}}}
var chart;
|-
    // Build the chart
!
        chart = new Highcharts.Chart({
| {{{percentageDecimals|}}}
        chart: {
|-
                renderTo: 'container',
!
                plotBackgroundColor: null,
| {{{allowPointSelect|}}}
                plotBorderWidth: null,
|-
                plotShadow: true
!
            },
| {{{cursor|}}}
title: {
|-
                text: chart_title 
!
            },
| {{{dataLabels|}}}
            tooltip: {
|-
            pointFormat: '{series.name}:<b>{point.y}</b>',
!
            percentageDecimals: percentage_decimals
| {{{series|}}}
            },
|}
            plotOptions: {
</includeonly>
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    point: {
                    events: {
                        click: function() {
//alert ('Category: '+ this.category +', value: '+ this.y+', X value: '+this.x+', Point Name: '+ this.name);
// document.getElementsByClassName(table_name).fnFilter(this.name, 2);
                           
                        }
                    }
                  },
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(1) +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: series_name,
                data: data
            }]
        });
 
});
 
 
 
function getDistinctElements(anArray) {
      var result = [];
      $.each(anArray, function(i,v){
          if ($.inArray(v, result) == -1) result.push(v);
      });
      return result;
    }
 
 
function countItems(arr, what){
    var count= 0, i;
    while((i= arr.indexOf(what, i))!= -1){
        ++count;
        ++i;
    }
    return count;
}
 
</script>
</html>
<div id="container" style="min-width:250px; height: 250px; margin: 0 auto"></div>

Latest revision as of 15:37, 10 July 2013

Retrieved from "http://f5-webapp4.gsc.riken.jp/resource_browser/index.php?title=Template:PieChart&oldid=2747051"