Difference between revisions of "Pie chart"

From JSXGraph Wiki
Jump to: navigation, search
 
(27 intermediate revisions by 3 users not shown)
Line 2: Line 2:
  
 
<jsxgraph width="800" height="600">
 
<jsxgraph width="800" height="600">
     var dataArr = [30,16,12,8,8,8,6,4,4,2];
+
     var dataArr = [30,16,14,10,10,8,6,6];
     var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 120, originY: 400, unitX: 50, unitY: 50});
+
     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.suspendUpdate();
 +
 
 
     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',
         fillOpacity:0.9,center:[5,2],strokeColor:'black',highlightStrokeColor:'black',strokeWidth:4,
+
        colors:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
         labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],
+
         fillOpacity:0.8, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
         highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
+
         labels:['War games','Sport games', 'Old games','Strategy games', '3D games', 'Puzzle games','Board games', 'I do not play games'],
         highlightOnSector:true,
+
         highlightColors:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
         gradient:'linear'}
+
         highlightOnSector:true,
 +
        highlightBySize:true,
 +
         gradient:'linear'
 +
        }
 
     );
 
     );
 +
    board.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
  
 
===JavaScript code to produce this chart===
 
===JavaScript code to produce this chart===
<source lang="xml">
+
<source lang="javascript">
<jsxgraph width="900" height="600">
+
     var dataArr = [30,16,14,10,10,8,6,6];
     var dataArr = [30,16,12,8,8,8,6,4,4,2];
+
     var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, boundingbox: [-2.4, 8, 13.6, -4]});
     var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 450, unitX: 50, unitY: 50});
 
 
     board.containerObj.style.backgroundColor = 'black';
 
     board.containerObj.style.backgroundColor = 'black';
      
+
     board.options.label.strokeColor = 'yellow';
 +
    board.suspendUpdate();
 +
 
 
     var a = board.createElement('chart', dataArr,  
 
     var a = board.createElement('chart', dataArr,  
 
         {chartStyle:'pie',   
 
         {chartStyle:'pie',   
         colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'],
+
         colors:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
         fillOpacity:0.9, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
+
         fillOpacity:0.8, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
         labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],
+
         labels:['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'],
+
         highlightColors:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
         highlightOnSector:true,
+
         highlightOnSector:true,
         gradient:'linear'}
+
        highlightBySize:true,
 +
         gradient:'linear'
 +
        }
 
     );
 
     );
</jsxgraph>
+
    board.unsuspendUpdate();
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Charts]]
 
[[Category:Charts]]

Latest revision as of 16:02, 30 January 2015

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];
    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',  
         colors:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
         fillOpacity:0.8, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
         labels:['War games','Sport games', 'Old games','Strategy games', '3D games', 'Puzzle games','Board games', 'I do not play games'],
         highlightColors:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
         highlightOnSector:true, 
         highlightBySize:true,
         gradient:'linear'
        }
    );
    board.unsuspendUpdate();