Pie chart II: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary  | 
				A WASSERMANN (talk | contribs) No edit summary  | 
				||
| (8 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
board.suspendUpdate();  | board.suspendUpdate();  | ||
var s = board.  | var s = board.create('slider', [[8,7],[11,7],[1,1,1.5]],{name:'S',strokeColor:'black',fillColor:'white'});  | ||
var f = [function(){return (s.Value()*  | var f = [function(){return (s.Value()*1).toFixed(2);},  | ||
	 function(){return (s.Value()*2).toFixed(2);},  | |||
	 function(){return (s.Value()*3).toFixed(2);},  | |||
	 function(){return (s.Value()*4).toFixed(2);},  | |||
	 function(){return 4;},  | |||
	 function(){return 2;},  | |||
	 function(){return 1;},  | |||
	 function(){return 1.2;},  | |||
	 function(){return 3;},  | |||
	 function(){return 1;},  | |||
	 function(){return 1.7;}  | |||
	];  | |||
var a = board.  | var a = board.create('chart', [f],  | ||
			{chartStyle:'pie',  | 			{chartStyle:'pie',  | ||
			 colorArray:  | 			 colorArray:  | ||
| Line 30: | Line 30: | ||
board.unsuspendUpdate();  | board.unsuspendUpdate();  | ||
</jsxgraph>  | </jsxgraph>  | ||
===The underlying JavaScript code===  | |||
<source lang="javascript">  | |||
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});  | |||
board.suspendUpdate();  | |||
var s = board.create('slider', [[8,7],[11,7],[1,1,1.5]],{name:'S',strokeColor:'black',fillColor:'white'});  | |||
var f = [function(){return (s.Value()*1).toFixed(2);},  | |||
	 function(){return (s.Value()*2).toFixed(2);},  | |||
	 function(){return (s.Value()*3).toFixed(2);},  | |||
	 function(){return (s.Value()*4).toFixed(2);},  | |||
	 function(){return 4;},  | |||
	 function(){return 2;},  | |||
	 function(){return 1;},  | |||
	 function(){return 1.2;},  | |||
	 function(){return 3;},  | |||
	 function(){return 1;},  | |||
	 function(){return 1.7;}  | |||
	];  | |||
var a = board.create('chart', [f],  | |||
            {  | |||
                chartStyle:'pie',  | |||
		colorArray: ['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#CA147A'],  | |||
                center:[5,2],   | |||
                strokeColor:'black',   | |||
                highlightStrokeColor:'black',  | |||
                strokeWidth:4,  | |||
                highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF','#B0D990'],  | |||
                highlightOnSector:true  | |||
            });  | |||
board.unsuspendUpdate();  | |||
</source>  | |||
[[Category:Examples]]  | |||
Latest revision as of 11:04, 17 March 2020
The underlying JavaScript code
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
board.suspendUpdate();
var s = board.create('slider', [[8,7],[11,7],[1,1,1.5]],{name:'S',strokeColor:'black',fillColor:'white'});
var f = [function(){return (s.Value()*1).toFixed(2);},
	 function(){return (s.Value()*2).toFixed(2);},
	 function(){return (s.Value()*3).toFixed(2);},
	 function(){return (s.Value()*4).toFixed(2);},
	 function(){return 4;},
	 function(){return 2;},
	 function(){return 1;},
	 function(){return 1.2;},
	 function(){return 3;},
	 function(){return 1;},
	 function(){return 1.7;}
	];
var a = board.create('chart', [f],
            {
                chartStyle:'pie',
		colorArray: ['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#CA147A'],
                center:[5,2], 
                strokeColor:'black', 
                highlightStrokeColor:'black',
                strokeWidth:4,
                highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF','#B0D990'],
                highlightOnSector:true
            });
board.unsuspendUpdate();