Template:PieChart: Difference between revisions
From FANTOM5_SSTAR
(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 |
||
| Line 4: | Line 4: | ||
<pre> | <pre> | ||
{{PieChart | {{PieChart | ||
|data= | |||
|chartTitle= | |chartTitle= | ||
| | |series= | ||
|chartSize= | |chartSize= | ||
|renderTo= | |renderTo= | ||
| Line 15: | Line 16: | ||
|cursor= | |cursor= | ||
|dataLabels= | |dataLabels= | ||
}} | }} | ||
</pre> | </pre> | ||
| Line 24: | Line 24: | ||
|- | |- | ||
! | ! | ||
| {{{ | | {{{series|}}} | ||
|- | |- | ||
! | ! | ||
| Line 54: | Line 54: | ||
|- | |- | ||
! | ! | ||
|} | |} | ||
</includeonly> | </includeonly> | ||
<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/highcharts/highcharts.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"> | |||
/* | |||
The code below will take parameters from a page and create a Pie_Chart extracting | |||
data from the values | |||
*/ | |||
$(document).ready(function (){ | |||
/* | |||
The code below is for chart settings | |||
*/ | |||
var chart_title = "</html>{{{chartTitle}}}<html>"; | |||
var series = "</html>{{{series}}}<html>"; | |||
var chart_size = "</html>{{{chartSize}}}<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 data_delimiter = series.split(",")[0]; | |||
var series_name = series.split(",")[1]; | |||
var series_data = series.split(",")[2].split("data_delimiter"); | |||
var data = []; | |||
for(var i=0, l=series_data .length; i<l; i++){ | |||
var tmp =series_data [i]; | |||
data.push(tmp); | |||
} | |||
var chart; | |||
// Build the chart | |||
chart = new Highcharts.Chart({ | |||
chart: { | |||
renderTo: 'render_to', | |||
plotBackgroundColor: plot_bg_color, | |||
plotBorderWidth: plot_border_width, | |||
plotShadow: plot_shadow | |||
}, | |||
title: { | |||
text: chart_title | |||
}, | |||
tooltip: { | |||
pointFormat: '{series.name}:<b>{point.y}</b>', | |||
percentageDecimals: percentage_decimals | |||
}, | |||
plotOptions: { | |||
pie: { | |||
allowPointSelect: allow_point_select, | |||
cursor: 'cursor', | |||
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 | |||
}] | |||
}); | |||
}); | |||
} | |||
</script> | |||
</html> | |||
<div id ="wrap" style="background-color:White; {round corners}} padding: 0.5em 1em;"> | |||
<div id="left_col"> | |||
<div id="container" style="min-width: 250px; height: 250px; margin: 0 auto"></div> | |||
</div> | |||
</div> | |||
Revision as of 12:04, 12 June 2013
This is the "PieChart" template. It should be called in the following format:
{{PieChart
|data=
|chartTitle=
|series=
|chartSize=
|renderTo=
|plotBackgroundColor=
|plotBorderWidth=
|plotShadow=
|percentageDecimals=
|allowPointSelect=
|cursor=
|dataLabels=
}}
Edit the page to see the template text.
