Difference between revisions of "Pie chart"

From JSXGraph Wiki
Jump to: navigation, search
Line 3: Line 3:
 
<jsxgraph width="800" height="600">
 
<jsxgraph width="800" height="600">
 
     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:false, originX: 120, originY: 400, unitX: 50, unitY: 50});
+
     var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, originX: 120, originY: 400, unitX: 50, unitY: 50});
 
     board.containerObj.style.backgroundColor = 'black';
 
     board.containerObj.style.backgroundColor = 'black';
 
     board.suspendUpdate();
 
     board.suspendUpdate();
Line 96: Line 96:
 
===JavaScript code to produce this chart===
 
===JavaScript code to produce this chart===
 
<source lang="xml">
 
<source lang="xml">
<jsxgraph width="800" height="600">
+
Soon ...
    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>
 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Charts]]
 
[[Category:Charts]]

Revision as of 09:53, 30 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

Soon ...