Pie chart: Difference between revisions
From JSXGraph Wiki
No edit summary |
No edit summary |
||
Line 25: | Line 25: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
var dataArr = [30,16,14,10,10,8,6,6,4,4]; | var dataArr = [30,16,14,10,10,8,6,6,4,4]; | ||
var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, | var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, boundingbox: [-2.4, 8, 13.6, -4]}); | ||
board.containerObj.style.backgroundColor = 'black'; | board.containerObj.style.backgroundColor = 'black'; | ||
board.options.label.strokeColor = 'yellow'; | board.options.label.strokeColor = 'yellow'; |
Revision as of 11:21, 31 January 2013
A pie chart with highlight on the whole sector, enlarging labels on highlight and a gradient fill.
JavaScript code to produce this chart
var dataArr = [30,16,14,10,10,8,6,6,4,4];
var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, boundingbox: [-2.4, 8, 13.6, -4]});
board.containerObj.style.backgroundColor = 'black';
board.options.label.strokeColor = 'yellow';
board.suspendUpdate();
var a = board.createElement('chart', dataArr,
{chartStyle:'pie',
colorArray:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
fillOpacity:0.8, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
labelArray::['War games','Sport games', 'Old games','Strategy games', '3D games', 'Puzzle games','Board games', 'I do not play games'],
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
highlightOnSector:true,
highlightBySize:true,
gradient:'linear'
}
);
board.unsuspendUpdate();