Difference between revisions of "Pie chart"

From JSXGraph Wiki
Jump to: navigation, search
Line 15: Line 15:
 
         highlightOnSector:true,  
 
         highlightOnSector:true,  
 
         highlightBySize:true,
 
         highlightBySize:true,
         //gradient:'linear'
+
         gradient:'linear'
 
         }
 
         }
 
     );
 
     );
Line 36: Line 36:
 
         highlightOnSector:true,  
 
         highlightOnSector:true,  
 
         highlightBySize:true,
 
         highlightBySize:true,
         //gradient:'linear'
+
         gradient:'linear'
 
         }
 
         }
 
     );
 
     );

Revision as of 16:38, 9 October 2010

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, originX: 120, originY: 400, unitX: 50, unitY: 50});
    board.containerObj.style.backgroundColor = 'black';
    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();