Pie chart: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
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:'black',highlightStrokeColor:'black',strokeWidth:4,
         fillOpacity:0.9,center:[5,2],strokeColor:'white',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 06:32, 11 September 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="800" height="600">
    var dataArr = [30,16,12,8,8,8,6,4,4,2];
    var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 120, originY: 400, 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>