Personal tools

Template:PieChart: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(35 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=
|delimiter=
|chartTitle=
|seriesName=
|chartSize=
|renderTo=
|plotBackgroundColor=
|plotBorderWidth=
|plotShadow=
|percentageDecimals=
|allowPointSelect=
|cursor=
|dataLabels=
}}
</pre>
Edit the page to see the template text.
</noinclude><includeonly>{| class="wikitable"
!
| {{{data|}}}
|-
!
| {{{delimiter|}}}
|-
!
| {{{chartTitle|}}}
|-
!
| {{{seriesName|}}}
|-
!
| {{{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 108: Line 20:
var series_name = "</html>{{{seriesName}}}<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 percentage_decimals="</html>{{{percentageDecimals}}}<html>";
var table_name  = "</html>{{{tableName}}}<html>";


var render_to  = "</html>{{{renderTo}}}<html>";
var plot_bg_color="";
var plot_border_width="";
var plot_shadow="";
var percentage_decimals="";
var allow_point_select="";
var cursor="";
var dataLabels="";


var content_array = content.split(data_delimiter);
var content_array = content.split(data_delimiter);
Line 127: Line 35:
var tmp =result_tmp [i];
var tmp =result_tmp [i];
var counted = countItems(content,tmp);
var counted = countItems(content,tmp);
var x = [tmp , counted];
 
data.push(x);
var point = [tmp , counted];
data.push(point);
}
}
var chart;
var chart;
Line 134: 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 148: 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 191: Line 109:
</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"