Personal tools

Template:PieChart: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(39 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>
This is the "PieChart" template.
It should be called in the following format:
<pre>
{{PieChart
|data=
|chartTitle=
|series=
|chartSize=
|renderTo=
|plotBackgroundColor=
|plotBorderWidth=
|plotShadow=
|percentageDecimals=
|allowPointSelect=
|cursor=
|dataLabels=
}}
</pre>
Edit the page to see the template text.
</noinclude><includeonly>{| class="wikitable"
!
| {{{chartTitle|}}}
|-
!
| {{{series|}}}
|-
!
| {{{chartSize|}}}
|-
!
| {{{renderTo|}}}
|-
!
| {{{plotBackgroundColor|}}}
|-
!
| {{{plotBorderWidth|}}}
|-
!
| {{{plotShadow|}}}
|-
!
| {{{percentageDecimals|}}}
|-
!
| {{{allowPointSelect|}}}
|-
!
| {{{cursor|}}}
|-
!
| {{{dataLabels|}}}
|-
!
|}
</includeonly>
<html>
<html>
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/highcharts/highcharts.js""></script>
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/highcharts/highcharts.js"></script>
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/highcharts/modules/exporting.js"></script>
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/highcharts/modules/exporting.js"></script>
<style type="text/css">
 
#wrap{
clear: both;
width: 1000px;
padding-bottom: 5px;
background:#fff;
overflow:hidden;
}
#left_col{
float: left;
display:inline;
width:650px;
margin: 10px;
background:#fff;
}
#right_col{
float: right;
display:inline;
width: 350px;
padding-top: 0px;
margin:10px;
background:#fff;
}
</style>


<script type="text/javascript">
<script type="text/javascript">
Line 96: Line 15:
The code below is for chart settings
The code below is for chart settings
*/
*/
var content = "</html>{{{data}}}<html>";
var data_delimiter  = "</html>{{{delimiter}}}<html>";
var chart_title = "</html>{{{chartTitle}}}<html>";
var chart_title = "</html>{{{chartTitle}}}<html>";
var series = "</html>{{{series}}}<html>";
var series_name = "</html>{{{seriesName}}}<html>";
var chart_size  = "</html>{{{chartSize}}}<html>";
var chart_size  = "</html>{{{chartSize}}}<html>";
var render_to  = "</html>{{{renderTo}}}<html>";
var render_to  = "</html>{{{renderTo}}}<html>";
var plot_bg_color=
var percentage_decimals="</html>{{{percentageDecimals}}}<html>";
var plot_border_width=
 
var plot_shadow=
var table_name  = "</html>{{{tableName}}}<html>";
var percentage_decimals=
 
var allow_point_select=
 
var cursor=
var content_array = content.split(data_delimiter);
var dataLabels=
var result_tmp = getDistinctElements(content_array);
var data_delimiter = series.split(",")[0];
 
var series_name = series.split(",")[1];
var series_data = series.split(",")[2].split("data_delimiter");


var data = [];
var data = [];
for(var i=0, l=series_data .length; i<l; i++){
 
var tmp =series_data [i];
for(var i=0, l=result_tmp .length; i<l; i++){
data.push(tmp);
var tmp =result_tmp [i];
var counted = countItems(content,tmp);
 
var point = [tmp , counted];
data.push(point);
}
}
var chart;
var chart;
Line 120: Line 43:
         chart = new Highcharts.Chart({
         chart = new Highcharts.Chart({
         chart: {
         chart: {
                 renderTo: 'render_to',
                 renderTo: 'container',
                 plotBackgroundColor: plot_bg_color,
                 plotBackgroundColor: null,
                 plotBorderWidth: plot_border_width,
                 plotBorderWidth: null,
                 plotShadow: plot_shadow
                 plotShadow: true
             },
             },
  title: {
  title: {
Line 134: Line 57:
             plotOptions: {
             plotOptions: {
                 pie: {
                 pie: {
                     allowPointSelect: allow_point_select,
                     allowPointSelect: true,
                     cursor: 'cursor',
                     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: {
                     dataLabels: {
                         enabled: true,
                         enabled: true,
Line 155: Line 87:
});
});


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>
</script>
</html>
</html>
<div id ="wrap" style="background-color:White; {round corners}} padding: 0.5em 1em;">
<div id="container" style="min-width:250px; height: 250px; margin: 0 auto"></div>
<div id="left_col">
<div id="container" style="min-width: 250px; height: 250px; margin: 0 auto"></div>
</div>
</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"