Pie chart II: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 8: Line 8:
function(){return (s.Value()*3).toFixed(2);},
function(){return (s.Value()*3).toFixed(2);},
function(){return (s.Value()*4).toFixed(2);},
function(){return (s.Value()*4).toFixed(2);},
function(){return (s.Value()*5).toFixed(2);},
function(){return 4;},
function(){return (s.Value()*2).toFixed(2);},
function(){return 2;},
function(){return (s.Value()*2).toFixed(2);},
function(){return 1;},
function(){return (s.Value()*2).toFixed(2);},
function(){return 1.2;},
function(){return (s.Value()*2).toFixed(2);},
function(){return 3;},
function(){return (s.Value()*2).toFixed(2);},
function(){return 1;},
function(){return (s.Value()*2).toFixed(2);}
function(){return 1.7;}
];
];


Line 37: Line 37:


var s = board.create('slider', [[8,7],[11,7],[1,1,1.5]],{name:'S',strokeColor:'black',fillColor:'white'});
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()*2).toFixed(2);},
var f = [function(){return (s.Value()*1).toFixed(2);},
        function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*2).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', [1,2,3,4,5],
var a = board.create('chart', [f],
{chartStyle:'pie',
            {
colorArray:
                chartStyle:'pie',
['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#CA147A'],
colorArray: ['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#CA147A'],
center:[5,2], strokeColor:'black', highlightStrokeColor:'black',
                center:[5,2],  
strokeWidth:4,
                strokeColor:'black',  
highlightColorArray:
                highlightStrokeColor:'black',
['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF','#B0D990'],
                strokeWidth:4,
highlightOnSector:true}
                highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF','#B0D990'],
);
                highlightOnSector:true
            });


board.unsuspendUpdate();
board.unsuspendUpdate();

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();