Pie chart: Difference between revisions
From JSXGraph Wiki
m (Dynamic pie chart moved to Pie chart) |
m (just for a short impression: strokeColor changed to black. better than white?) |
||
Line 8: | Line 8: | ||
var a = board.createElement('chart', dataArr, | var a = board.createElement('chart', dataArr, | ||
{chartStyle:'pie', colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'], | {chartStyle:'pie', colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'], | ||
fillOpacity:0.9,center:[5,2],strokeColor:' | fillOpacity:0.9,center:[5,2],strokeColor:'black',highlightStrokeColor:'black',strokeWidth:4, | ||
labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'], | labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'], | ||
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'], | highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'], | ||
Line 26: | Line 26: | ||
{chartStyle:'pie', | {chartStyle:'pie', | ||
colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'], | colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'], | ||
fillOpacity:0.9, center:[5,2], strokeColor:' | fillOpacity:0.9, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4, | ||
labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'], | labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'], | ||
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'], | highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'], |
Revision as of 20:33, 20 August 2009
A pie chart with highlight on the whole sector, enlarging labels on highlight and a gradient fill.
JavaScript code to produce this chart
<jsxgraph width="900" height="600">
var dataArr = [30,16,12,8,8,8,6,4,4,2];
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 450, unitX: 50, unitY: 50});
board.containerObj.style.backgroundColor = 'black';
var a = board.createElement('chart', dataArr,
{chartStyle:'pie',
colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'],
fillOpacity:0.9, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
highlightOnSector:true,
gradient:'linear'}
);
</jsxgraph>