Pie chart - Revision history

A WASSERMANN at 13:29, 3 March 2021

2021-03-03T13:29:57Z

← Older revision		Revision as of 13:29, 3 March 2021
Line 8:		Line 8:
	board.suspendUpdate();		board.suspendUpdate();

	var a = board.~~createElement~~('chart', dataArr,		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 30:		Line 30:
	board.suspendUpdate();		board.suspendUpdate();

	var a = board.~~createElement~~('chart', dataArr,		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'],

A WASSERMANN at 15:02, 30 January 2015

2015-01-30T15:02:32Z

← Older revision		Revision as of 15:02, 30 January 2015
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~~,4,4~~];		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]});		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';
Line 32:		Line 32:
	var a = board.createElement('chart', dataArr,		var a = board.createElement('chart', dataArr,
	{chartStyle:'pie',		{chartStyle:'pie',
	~~colorArray~~:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],		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,
	~~labelArray:~~:['War games','Sport games', 'Old games','Strategy games', '3D games', 'Puzzle games','Board games', 'I do not play games'],		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,
	highlightBySize:true,		highlightBySize:true,

Michael at 11:21, 31 January 2013

2013-01-31T11:21:29Z

← Older revision		Revision as of 11:21, 31 January 2013
Line 25:		Line 25:
	<source lang="javascript">		<source lang="javascript">
	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:true, ~~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.options.label.strokeColor = 'yellow';

Michael at 11:21, 31 January 2013

2013-01-31T11:21:08Z

← Older revision		Revision as of 11:21, 31 January 2013
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, ~~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.options.label.strokeColor = 'yellow';

A WASSERMANN at 10:28, 24 July 2012

2012-07-24T10:28:26Z

← Older revision		Revision as of 10:28, 24 July 2012
Line 5:		Line 5:
	var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, 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.options.label.strokeColor = '~~white~~';		board.options.label.strokeColor = 'yellow';
	board.suspendUpdate();		board.suspendUpdate();

Line 27:		Line 27:
	var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, 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.options.label.strokeColor = 'yellow';
	board.suspendUpdate();		board.suspendUpdate();

A WASSERMANN at 10:27, 24 July 2012

2012-07-24T10:27:55Z

← Older revision		Revision as of 10:27, 24 July 2012
Line 5:		Line 5:
	var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, 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.options.~~text~~.strokeColor = 'white';		board.options.label.strokeColor = 'white';
	board.suspendUpdate();		board.suspendUpdate();

Michael at 15:11, 16 January 2012

2012-01-16T15:11:04Z

← Older revision		Revision as of 15:11, 16 January 2012
Line 5:		Line 5:
	var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, 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.options.text.strokeColor = 'white';
	board.suspendUpdate();		board.suspendUpdate();

Michael at 15:08, 16 January 2012

2012-01-16T15:08:42Z

← Older revision		Revision as of 15:08, 16 January 2012
Line 12:		Line 12:
	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'],		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,
	highlightBySize:true,		highlightBySize:true,

A WASSERMANN at 14:53, 29 July 2011

2011-07-29T14:53:18Z

← Older revision		Revision as of 14:53, 29 July 2011
Line 9:		Line 9:
	var a = board.createElement('chart', dataArr,		var a = board.createElement('chart', dataArr,
	{chartStyle:'pie',		{chartStyle:'pie',
	~~colorArray~~:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],		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,
	~~labelArray~~:['War games','Sport games', 'Old games','Strategy games', '3D games', 'Puzzle games','Board games', 'I do not play games'],		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'],		highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
	highlightOnSector:true,		highlightOnSector:true,

A WASSERMANN at 15:38, 9 October 2010

2010-10-09T15:38:19Z

New page

A pie chart with highlight on the whole sector, enlarging labels on highlight and a gradient fill.

<jsxgraph width="800" height="600">
var dataArr = [30,16,14,10,10,8,6,6];
var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, originX: 120, originY: 400, unitX: 50, unitY: 50});
board.containerObj.style.backgroundColor = 'black';
board.suspendUpdate();

var a = board.createElement('chart', dataArr,
{chartStyle:'pie',
colorArray:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
fillOpacity:0.8, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
labelArray:['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'],
highlightOnSector:true,
highlightBySize:true,
gradient:'linear'
}
);
board.unsuspendUpdate();
</jsxgraph>

===JavaScript code to produce this chart===
<source lang="javascript">
var dataArr = [30,16,14,10,10,8,6,6,4,4];
var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, originX: 120, originY: 400, unitX: 50, unitY: 50});
board.containerObj.style.backgroundColor = 'black';
board.suspendUpdate();

var a = board.createElement('chart', dataArr,
{chartStyle:'pie',
colorArray:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
fillOpacity:0.8, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
labelArray::['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'],
highlightOnSector:true,
highlightBySize:true,
gradient:'linear'
}
);
board.unsuspendUpdate();
</source>

[[Category:Examples]]
[[Category:Charts]]