show error message on invalid column type combo

index.html

@@ -364,6 +364,43 @@
 						(xIsNumeric || yIsNumeric));
 			}
 
+			// Get error message for invalid column combination
+			function getInvalidCombinationError(xCol, yCol) {
+				if (!xCol || !yCol) {
+					return 'Please select both X and Y columns';
+				}
+
+				if (xCol === yCol) {
+					return 'Cannot visualize a column against itself. Please select different columns for X and Y axes';
+				}
+
+				const xColInfo = columnInfo.find(c => c.name === xCol);
+				const yColInfo = columnInfo.find(c => c.name === yCol);
+
+				if (!xColInfo || !yColInfo) {
+					return 'Selected column not found';
+				}
+
+				const xIsNumeric = isNumericType(xColInfo.type);
+				const xIsText = isTextType(xColInfo.type);
+				const yIsNumeric = isNumericType(yColInfo.type);
+				const yIsText = isTextType(yColInfo.type);
+
+				if (xIsText && yIsText) {
+					return `Cannot visualize text × text. At least one axis must be numeric. X: ${xColInfo.type}, Y: ${yColInfo.type}`;
+				}
+
+				if (!xIsNumeric && !xIsText) {
+					return `X column type "${xColInfo.type}" is not supported. Please select a numeric or text column`;
+				}
+
+				if (!yIsNumeric && !yIsText) {
+					return `Y column type "${yColInfo.type}" is not supported. Please select a numeric or text column`;
+				}
+
+				return 'Invalid column combination';
+			}
+
 			// Handle X axis selection
 			document.getElementById('xColSelect').addEventListener('change', async function(e) {
 				const xCol = e.target.value;
@@ -371,6 +408,11 @@
 
 				if (isValidCombination(xCol, yCol)) {
 					await renderVisualization(xCol, yCol, 'scatter');
+				} else if (xCol || yCol) {
+					// Show error and clear visualization
+					const errorMsg = getInvalidCombinationError(xCol, yCol);
+					setStatus(errorMsg, 'error');
+					document.getElementById('vizContainer').innerHTML = '';
 				}
 			});
 
@@ -381,6 +423,11 @@
 
 				if (isValidCombination(xCol, yCol)) {
 					await renderVisualization(xCol, yCol, 'scatter');
+				} else if (xCol || yCol) {
+					// Show error and clear visualization
+					const errorMsg = getInvalidCombinationError(xCol, yCol);
+					setStatus(errorMsg, 'error');
+					document.getElementById('vizContainer').innerHTML = '';
 				}
 			});