Widget:Chart - Revision history

Plyroth at 06:24, 7 January 2023

2023-01-07T06:24:10Z

← Older revision		Revision as of 06:24, 7 January 2023
Line 5:		Line 5:

	<script>		<script>
			var data = JSON.parse('<!--{$data\|escape:'quotes'}-->');
	var data = JSON.parse('<!--{$data\|escape:'quotes'}-->')
	var color = '<!--{$color\|escape:'quotes'}-->';		var color = '<!--{$color\|escape:'quotes'}-->';
	~~var backgroundColor = '<!--{$backgroundColor\|escape:'quotes'}-->';~~
	var gridColor = '<!--{$gridColor\|escape:'quotes'}-->';		var gridColor = '<!--{$gridColor\|escape:'quotes'}-->';
	var axisColor = '<!--{$axisColor\|escape:'quotes'}-->';		var axisColor = '<!--{$axisColor\|escape:'quotes'}-->';
Line 42:		Line 40:
	var range = [...Array(max - min + 1).keys()].map((x) => x + min);		var range = [...Array(max - min + 1).keys()].map((x) => x + min);

	new Chart(document.getElementById('<!--{$id\|escape:'html'}-->'), {		new Chart(document.getElementById('<!--{$uniqueId\|escape:'html'}-->'), {
	type: "line",		type: "line",
	axisX: {		axisX: {
Line 91:		Line 89:
	}		}
	});		});

	~~document.getElementById('<!--{$id\|escape:'html'}-->').style.backgroundColor = backgroundColor;~~


	</script>		</script>
	</includeonly>		</includeonly>

2023-01-07T06:22:55Z

← Older revision		Revision as of 06:22, 7 January 2023
Line 1:		Line 1:
	<includeonly>		<includeonly>
	<div>		<div>
	<canvas id="<!--{$id\|escape:'html'}-->"></canvas>		<canvas id="<!--{$uniqueId\|escape:'html'}-->"></canvas>
	</div>		</div>

	~~<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>~~

	<script>		<script>

	var data = JSON.parse('<!--{$data\|escape:'quotes'}-->')		var data = JSON.parse('<!--{$data\|escape:'quotes'}-->')
	~~var label = '<!--{$label\|escape:'quotes'}-->';~~
	var color = '<!--{$color\|escape:'quotes'}-->';		var color = '<!--{$color\|escape:'quotes'}-->';
	var backgroundColor = '<!--{$backgroundColor\|escape:'quotes'}-->';		var backgroundColor = '<!--{$backgroundColor\|escape:'quotes'}-->';
Line 55:		Line 52:
	{		{
	data: data,		data: data,
	~~label: label,~~
	borderColor: color,		borderColor: color,
	backgroundColor: color,		backgroundColor: color,

2023-01-07T06:20:52Z

2023-01-07T06:18:00Z

2023-01-07T06:17:36Z

← Older revision		Revision as of 06:17, 7 January 2023
Line 14:		Line 14:
	var gridColor = '<!--{$gridColor\|escape:'quotes'}-->';		var gridColor = '<!--{$gridColor\|escape:'quotes'}-->';
	var axisColor = '<!--{$axisColor\|escape:'quotes'}-->';		var axisColor = '<!--{$axisColor\|escape:'quotes'}-->';
			var fontColor = '<!--{$fontColor\|escape:'quotes'}-->';

	if (color == "") {		if (color == "") {
Line 23:		Line 24:
	}		}

	if (axisColor == "") {		if (axisColor == "") {
	axisColor = gridColor;		axisColor = gridColor;
	}		}

			if (fontColor == "") {
			fontColor = gridColor;
			}

	var max = data[0]["x"];		var max = data[0]["x"];
	var min = max;		var min = max;
Line 67:		Line 72:
	},		},
	ticks: {		ticks: {
	color: ~~"red"~~		color: fontColor
	}		}
	},		},
Line 77:		Line 82:
	border: {		border: {
	color: axisColor		color: axisColor
			},
			ticks: {
			color: fontColor
	}		}
	}		}

2023-01-07T06:15:56Z

2023-01-07T06:15:04Z

← Older revision		Revision as of 06:15, 7 January 2023
Line 39:		Line 39:

	var range = [...Array(max - min + 1).keys()].map((x) => x + min);		var range = [...Array(max - min + 1).keys()].map((x) => x + min);
	~~var range = [1, 3];~~

	new Chart(document.getElementById('<!--{$id\|escape:'html'}-->'), {		new Chart(document.getElementById('<!--{$id\|escape:'html'}-->'), {

2023-01-07T06:14:39Z

← Older revision		Revision as of 06:14, 7 January 2023
Line 39:		Line 39:

	var range = [...Array(max - min + 1).keys()].map((x) => x + min);		var range = [...Array(max - min + 1).keys()].map((x) => x + min);
			var range = [1, 3];

	new Chart(document.getElementById('<!--{$id\|escape:'html'}-->'), {		new Chart(document.getElementById('<!--{$id\|escape:'html'}-->'), {

2023-01-07T06:13:12Z

2023-01-07T06:05:31Z

← Older revision		Revision as of 06:05, 7 January 2023
Line 13:		Line 13:
	var backgroundColor = '<!--{$backgroundColor\|escape:'quotes'}-->';		var backgroundColor = '<!--{$backgroundColor\|escape:'quotes'}-->';
	var gridColor = '<!--{$gridColor\|escape:'quotes'}-->';		var gridColor = '<!--{$gridColor\|escape:'quotes'}-->';
			var axisColor = '<!--{$axisColor\|escape:'quotes'}-->';

	if (color == "") {		if (color == "") {
Line 18:		Line 19:
	}		}

	if (gridColor == "") {		if (gridColor == "") {
	gridColor = "lightgray";		gridColor = "lightgray";
			}

			if (axisColor == "") {
			axisColor = gridColor;
	}		}

Line 59:		Line 64:
	},		},
	border: {		border: {
	color: ~~gridColor~~		color: axisColor
	}		}
	},		},
Line 67:		Line 72:
	},		},
	border: {		border: {
	color: ~~gridColor~~		color: axisColor
	}		}
	}		}