Pie chart: Difference between revisions
From JSXGraph Wiki
| A WASSERMANN (talk | contribs) No edit summary | A WASSERMANN (talk | contribs) No edit summary | ||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 3: | Line 3: | ||
| <jsxgraph width="800" height="600"> | <jsxgraph width="800" height="600"> | ||
|      var dataArr = [30,16,14,10,10,8,6,6]; |      var dataArr = [30,16,14,10,10,8,6,6]; | ||
|      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'; | ||
|      board.suspendUpdate(); |      board.suspendUpdate(); | ||
|      var a = board. |      var a = board.create('chart', dataArr,   | ||
|          {chartStyle:'pie',    |          {chartStyle:'pie',    | ||
|           colors:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'], |           colors:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'], | ||
| Line 24: | Line 24: | ||
| ===JavaScript code to produce this chart=== | ===JavaScript code to produce this chart=== | ||
| <source lang="javascript"> | <source lang="javascript"> | ||
|      var dataArr = [30,16,14,10,10,8,6,6 |      var dataArr = [30,16,14,10,10,8,6,6]; | ||
|      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'; | ||
|      board.suspendUpdate(); |      board.suspendUpdate(); | ||
|      var a = board. |      var a = board.create('chart', dataArr,   | ||
|          {chartStyle:'pie',    |          {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, |           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,   |           highlightOnSector:true,   | ||
|           highlightBySize:true, |           highlightBySize:true, | ||
Latest revision as of 13:29, 3 March 2021
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.create('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();
