Zoom into background image #639

heinemannj · 2022-01-29T09:57:51Z

heinemannj
Jan 29, 2022

I've embedded an background image via

const chartAreaBackgroundImage = {
	id: 'chartAreaBackgroundImage',
	afterInit: (chart) => {
		if (chart.config.options.chartArea.backgroundCanvas && chart.config.options.chartArea.backgroundImage && chart.config.options.chartArea.backgroundImageURL) {
			const backgroundImage = new Image();
			backgroundImage.src = chart.config.options.chartArea.backgroundImageURL;
			backgroundImage.alt = chart.config.options.chartArea.backgroundImage;
			backgroundImage.id = chart.config.options.chartArea.backgroundImage;
			backgroundImage.style = 'display:none';
			document.body.appendChild(backgroundImage);

			let backgroundCanvas = document.createElement('canvas');
			backgroundCanvas.id = chart.config.options.chartArea.backgroundCanvas;
			backgroundCanvas.style = 'display:none';
			document.body.appendChild(backgroundCanvas);

			backgroundImage.onload = function() {
				backgroundCanvas.width = backgroundImage.width;
				backgroundCanvas.height = backgroundImage.height;

				let backgroundCtx = backgroundCanvas.getContext('2d');

				const dx = 0;
				const dy = 0;
				const dWidth = backgroundCanvas.width;
				const dHeight = backgroundCanvas.height;

				backgroundCtx.drawImage(backgroundImage, dx, dy, dWidth, dHeight);
			}
		}
	}
};

// plugin
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
const chartAreaBackground = {
	id: 'chartAreaBackground',
	beforeDraw: (chart) => {
		if (chart.config.options.chartArea.backgroundCanvas && chart.config.options.chartArea.backgroundImage && chart.config.options.chartArea.backgroundImageURL) {
			const backgroundImage = document.getElementById(chart.config.options.chartArea.backgroundImage);
			const backgroundCanvas = document.getElementById(chart.config.options.chartArea.backgroundCanvas);
			if (backgroundImage.onload && backgroundCanvas != null) {
				const width = backgroundCanvas.width + chart.chartArea.left + chart.width - chart.chartArea.right;
				const height = backgroundCanvas.height + chart.chartArea.top + chart.height - chart.chartArea.bottom;
				chart.resize(width, height);

				const ctx = chart.canvas.getContext('2d');
				ctx.drawImage(backgroundCanvas, chart.chartArea.left, chart.chartArea.top, backgroundCanvas.width, backgroundCanvas.height);
			} else {
				backgroundImage.onload = () => chart.draw();
			}
		}
	}
};

const CIELabChartConfig = {
	type: 'scatter',
	data: CIELabChartData,
	options: {
		responsive: false,
		chartArea: {
			backgroundImage: 'CIELabChartAreaBackgroundImage',
			backgroundImageURL: './assets/images/CIE-Lab.png',
			backgroundCanvas: 'CIELabChartAreaBackground'
		},
		plugins: {
			legend: {
				position: 'top',
			},
			title: {
				display: true,
				text: 'CIE-L*a*b* Chromaticity Diagram (L=100)'
			},
			subtitle: {
				display: true,
				text: 'CIE-L*a*b* chart subtitle',
				color: 'blue',
				font: {
					size: 12,
					family: 'tahoma',
					weight: 'normal',
					style: 'italic'
				},
				padding: {
					bottom: 10
				}
			},
			zoom: chartZoomOptions,
		},
		scales: {
			x: {
				display: true,
				title: {
					display: true,
					text: 'a'
				},
				min: -150,
				max: 150,
				minInit: -150,
				maxInit: 150,
				//suggestedMin: 0,
				//suggestedMax: 1400,
				ticks: {
					stepSize: 25
				},
				grid: {
					drawBorder: false,
					color: function(context) {
						if (context.tick.label != 0) {
							return(Chart.defaults.borderColor);
						} else {
							return 'black';
						}
					},
				},
			},
			y: {
				display: true,
				title: {
					display: true,
					text: 'b'
				},
				min: -150,
				max: 150,
				minInit: -150,
				maxInit: 150,
				//suggestedMin: 0,
				//suggestedMax: 120,
				ticks: {
					stepSize: 25
				},
				grid: {
					drawBorder: false,
					color: function(context) {
						if (context.tick.value != 0) {
							return(Chart.defaults.borderColor);
						} else {
							return 'black';
						}
					},
				},
			}
		}
	},
	plugins: [chartAreaBackgroundImage, chartAreaBackground]
};

const chartZoomOptions = {
	pan: {
		enabled: true,
		mode: 'xy',
		modifierKey: 'ctrl',
	},
	zoom: {
		mode: 'xy',
		drag: {
			enabled: true,
			borderColor: 'rgb(54, 162, 235)',
			borderWidth: 1,
			backgroundColor: 'rgba(54, 162, 235, 0.3)'
		},
		onZoomComplete: function({chart}) {
			console.log('onZoomComplete', chart);
                }
	}
};

Zooming in general works fine but I'm lost how to zoom into the background image too.
To embed the background image via css is for sure an possible option ...

Any help is appriciated.

heinemannj · 2022-01-31T14:50:17Z

heinemannj
Jan 31, 2022
Author

I've found a suitable workarround:

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js" integrity="sha256-Y26AMvaIfrZ1EQU49pf6H4QzVTrOI8m9wQYKkftBt4s=" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js" integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88=" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.0/dist/chartjs-plugin-zoom.min.js" integrity="sha256-23gWVYds+PNFbnldeTaY5stxoJ6j+5QmR/vGLWpNcOg=" crossorigin="anonymous"></script>
	</head>
	<body>
		<div><canvas id='CIELabChart' width='673' height='742'></canvas></div>

		<script>

// plugin
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
const chartAreaBackgroundImage = {
	id: 'chartAreaBackgroundImage',
	afterInit: (chart) => {
		if (chart.config.options.chartArea.backgroundCanvas && chart.config.options.chartArea.backgroundImage && chart.config.options.chartArea.backgroundImageURL) {
			const backgroundImage = new Image();
			backgroundImage.src = chart.config.options.chartArea.backgroundImageURL;
			backgroundImage.alt = chart.config.options.chartArea.backgroundImage;
			backgroundImage.id = chart.config.options.chartArea.backgroundImage;
			backgroundImage.style = 'display:none';
			document.body.appendChild(backgroundImage);

			let backgroundCanvas = document.createElement('canvas');
			backgroundCanvas.id = chart.config.options.chartArea.backgroundCanvas;
			backgroundCanvas.style = 'display:none';
			document.body.appendChild(backgroundCanvas);

			backgroundImage.onload = function() {
				backgroundCanvas.width = backgroundImage.width;
				backgroundCanvas.height = backgroundImage.height;

				let backgroundCtx = backgroundCanvas.getContext('2d');

				const dx = 0;
				const dy = 0;
				const dWidth = backgroundCanvas.width;
				const dHeight = backgroundCanvas.height;

				backgroundCtx.drawImage(backgroundImage, dx, dy, dWidth, dHeight);
			}
		}
	}
};

// plugin
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
const chartAreaBackground = {
	id: 'chartAreaBackground',
	beforeDraw: (chart) => {
		if (chart.config.options.chartArea.backgroundCanvas && chart.config.options.chartArea.backgroundImage && chart.config.options.chartArea.backgroundImageURL) {
			const backgroundImage = document.getElementById(chart.config.options.chartArea.backgroundImage);
			const backgroundCanvas = document.getElementById(chart.config.options.chartArea.backgroundCanvas);
			if (backgroundImage.onload && backgroundCanvas != null) {
				const width = backgroundCanvas.width + chart.chartArea.left + chart.width - chart.chartArea.right;
				const height = backgroundCanvas.height + chart.chartArea.top + chart.height - chart.chartArea.bottom;
				chart.resize(width, height);

				const ctx = chart.canvas.getContext('2d');
				ctx.drawImage(backgroundCanvas, chart.chartArea.left, chart.chartArea.top, backgroundCanvas.width, backgroundCanvas.height);
			} else {
				backgroundImage.onload = () => chart.draw();
			}
		}
	}
};

const chartZoomOptions = {
	pan: {
		enabled: true,
		mode: 'xy',
		modifierKey: 'ctrl',
	},
	zoom: {
		mode: 'xy',
		drag: {
			enabled: true,
			borderColor: 'rgb(54, 162, 235)',
			borderWidth: 1,
			backgroundColor: 'rgba(54, 162, 235, 0.3)'
		},
		onZoomComplete: function({chart}) {
//			console.log('onZoomComplete', chart);

			if (chart.config.options.chartArea.backgroundCanvas) {
				// Background image and canvas
				const backgroundImage = document.getElementById(chart.config.options.chartArea.backgroundImage);
				const backgroundCanvas = document.getElementById(chart.config.options.chartArea.backgroundCanvas);
				let backgroundCtx = backgroundCanvas.getContext('2d');

				// Initial scale
				let scaleFactorX = scaleFactorY = 0.0;

				let initScaleMinX = scaleMinX  = chart.config.options.scales.x.minInit;
				if (initScaleMinX < 0) {
					scaleFactorX = -1 * initScaleMinX;
					scaleMinX = 0;
				}
				const scaleMaxX = chart.config.options.scales.x.maxInit + scaleFactorX;

				let initScaleMinY = scaleMinY = chart.config.options.scales.y.minInit;
				if (initScaleMinY < 0) {
					scaleFactorY = -1 * initScaleMinY;
					scaleMinY = 0;
				}
				const scaleMaxY = chart.config.options.scales.y.maxInit + scaleFactorY;

				const unitCountX = scaleMaxX - scaleMinX;
				const unitCountY = scaleMaxY - scaleMinY;

				// Zoomed scale
				let newScaleMinX = chart.scales.x.start;
				if (newScaleMinX < 0) {
					newScaleMinX = Math.abs(initScaleMinX) - Math.abs(newScaleMinX);
				} else {
					newScaleMinX += scaleFactorX;
				}
				const newScaleMaxX = chart.scales.x.end + scaleFactorX;

				let newScaleMinY = chart.scales.y.start;
				if (newScaleMinY < 0) {
					newScaleMinY = Math.abs(initScaleMinY) - Math.abs(newScaleMinY);
				} else {
					newScaleMinY += scaleFactorY;
				}
				const newScaleMaxY = chart.scales.y.end + scaleFactorY;

				const newUnitCountX = newScaleMaxX - newScaleMinX;
				const newUnitCountY = newScaleMaxY - newScaleMinY;

				// Reset and zoom backgroundCanvas
				const sx = Math.round(newScaleMinX / unitCountX * backgroundCanvas.width);
				const sy = Math.round((unitCountY - newScaleMaxY) / unitCountY * backgroundCanvas.height);
				const sWidth = Math.round(newUnitCountX / unitCountX * backgroundCanvas.width);
				const sHeight = Math.round(newUnitCountY / unitCountY * backgroundCanvas.height);
				const dx = 0;
				const dy = 0;
				const dWidth = backgroundCanvas.width;
				const dHeight = backgroundCanvas.height;

				backgroundCtx.clearRect(dx, dy, dWidth, dHeight);
				backgroundCtx.drawImage(backgroundImage, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
/*
				console.log('initScaleMinX', initScaleMinX);
				console.log('initScaleMinY', initScaleMinY);
				console.log('scaleMinX', scaleMinX);
				console.log('scaleMaxX', scaleMaxX);
				console.log('scaleMinY', scaleMinY);
				console.log('scaleMaxY', scaleMaxY);
				console.log('scaleFactorX', scaleFactorX);
				console.log('scaleFactorY', scaleFactorY);
				console.log('unitCountX', unitCountX);
				console.log('unitCountY', unitCountY);
				console.log('');
				console.log('newScaleMinX', newScaleMinX);
				console.log('newScaleMaxX', newScaleMaxX);
				console.log('newScaleMinY', newScaleMinY);
				console.log('newScaleMaxY', newScaleMaxY);
				console.log('newUnitCountX', newUnitCountX);
				console.log('newUnitCountY', newUnitCountY);
				console.log('');
				console.log('sx', sx);
				console.log('sy', sy);
				console.log('sWidth', sWidth);
				console.log('sHeight', sHeight);
				console.log('dx', dx);
				console.log('dy', dy);
				console.log('dWidth', dWidth);
				console.log('dHeight', dHeight);
*/
			};
		},
	}
};

// CIELabChartData
const CIELabChartData = {
//	labels: '',
	datasets: [ {
		label: 'Empty sample',
		data: [{
			x: -10,
			y: 0
		}, {
			x: 0,
			y: 10
		}, {
			x: 10,
			y: 5
		}, {
			x: 0.5,
			y: 5.5
		}
		],
		showLine: false,
		borderColor: 'red',
		backgroundColor: 'red',
		borderWidth: 1,
		pointRadius: 3,
		fill: false,

		// Linear interpolation (default)
		tension: 0.0

		// Cubic interpolation
		// cubicInterpolationMode: 'default',
		// tension: 0.4

		// Cubic interpolation (monotone)
		// cubicInterpolationMode: 'monotone',
		//tension: 0.4
	},
	{
		label: 'Sample',
		data: [{
			x: -100,
			y: 10
		}, {
			x: 10,
			y: 100
		}, {
			x: 100,
			y: 50
		}, {
			x: 5,
			y: 10
		}],
		showLine: false,
		borderColor: 'blue',
		backgroundColor: 'blue',
		borderWidth: 1,
		pointRadius: 3,
		fill: false,

		// Linear interpolation (default)
		tension: 0.0

		// Cubic interpolation
		// cubicInterpolationMode: 'default',
		// tension: 0.4

		// Cubic interpolation (monotone)
		// cubicInterpolationMode: 'monotone',
		// tension: 0.4
	} ]
};

const CIELabChartConfig = {
	type: 'scatter',
	data: CIELabChartData,
	options: {
		responsive: false,
		chartArea: {
			backgroundImage: 'CIELabChartAreaBackgroundImage',
			backgroundImageURL: './assets/images/CIE-Lab.png',
			backgroundCanvas: 'CIELabChartAreaBackground'
		},
		plugins: {
			legend: {
				position: 'top',
			},
			title: {
				display: true,
				text: 'CIE-L*a*b* Chromaticity Diagram (L=100)'
			},
			subtitle: {
				display: true,
				text: 'CIE-L*a*b* chart subtitle',
				color: 'blue',
				font: {
					size: 12,
					family: 'tahoma',
					weight: 'normal',
					style: 'italic'
				},
				padding: {
					bottom: 10
				}
			},
			zoom: chartZoomOptions,
		},
		scales: {
			x: {
				display: true,
				title: {
					display: true,
					text: 'a'
				},
				min: -150,
				max: 150,
				minInit: -150,
				maxInit: 150,
				//suggestedMin: 0,
				//suggestedMax: 1400,
				ticks: {
					stepSize: 25
				},
				grid: {
					drawBorder: false,
					color: function(context) {
						if (context.tick.label != 0) {
							return(Chart.defaults.borderColor);
						} else {
							return 'black';
						}
					},
				},
			},
			y: {
				display: true,
				title: {
					display: true,
					text: 'b'
				},
				min: -150,
				max: 150,
				minInit: -150,
				maxInit: 150,
				//suggestedMin: 0,
				//suggestedMax: 120,
				ticks: {
					stepSize: 25
				},
				grid: {
					drawBorder: false,
					color: function(context) {
						if (context.tick.value != 0) {
							return(Chart.defaults.borderColor);
						} else {
							return 'black';
						}
					},
				},
			}
		}
	},
	plugins: [chartAreaBackgroundImage, chartAreaBackground]
};

// render / init block
const CIELabChartCtx = document.getElementById('CIELabChart').getContext('2d');
const CIELabChart = new Chart(CIELabChartCtx, CIELabChartConfig);

$('#CIELabChart').dblclick( function (e) {
	//left mouse button double click restores zoom and pan - resetZoom
	if (e.button === 0) {
		if (CIELabChart && CIELabChart.resetZoom) {
			CIELabChart.resetZoom();
		}
	}
});

		</script>
	</body>
</html>

Zoom in within the central part of the chart is workingbut with no background colur in the last lines:

If I zoom over the chart borders it is getter much more strange:

0 replies

heinemannj · 2022-01-31T15:02:40Z

heinemannj
Jan 31, 2022
Author

Potentially previous issue will help to mitigate: #611

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Zoom into background image #639

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Zoom into background image #639

heinemannj Jan 29, 2022

Replies: 2 comments

heinemannj Jan 31, 2022 Author

heinemannj Jan 31, 2022 Author

heinemannj
Jan 29, 2022

heinemannj
Jan 31, 2022
Author

heinemannj
Jan 31, 2022
Author