Skip to content

Instantly share code, notes, and snippets.

@prasoon2211

prasoon2211/index.htlm

Created March 7, 2024 00:22
Show Gist options
  • Save prasoon2211/65489bb464db924b7f51b95a9f61d981 to your computer and use it in GitHub Desktop.
Save prasoon2211/65489bb464db924b7f51b95a9f61d981 to your computer and use it in GitHub Desktop.
Download ZIP
generate charts
Raw
index.htlm
<!DOCTYPE html>
<html>
<head>
<title>Data Visualization Tool</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#chart-container {
width: 800px;
height: 600px;
}
.options {
margin-bottom: 20px;
}
.column-select {
margin-right: 10px;
}
</style>
</head>
<body>
<h1>Data Visualization Tool</h1>
<input type="file" id="csv-file" accept=".csv" />
<div class="options">
<label for="chart-type">Chart Type:</label>
<select id="chart-type" onchange="createChart()">
<option value="line">Line</option>
<option value="bar">Bar</option>
<option value="pie">Pie</option>
<option value="scatter">Scatter</option>
<option value="stackedBar">Stacked Bar</option>
<option value="area">Area</option>
<option value="radar">Radar</option>
<option value="heatmap">Heatmap</option>
</select>
<label for="chart-title">Chart Title:</label>
<input
type="text"
id="chart-title"
placeholder="Enter chart title"
onchange="createChart()"
/>
<label for="x-axis-label">X-Axis Label:</label>
<input
type="text"
id="x-axis-label"
placeholder="Enter x-axis label"
onchange="createChart()"
/>
<label for="y-axis-label">Y-Axis Label:</label>
<input
type="text"
id="y-axis-label"
placeholder="Enter y-axis label"
onchange="createChart()"
/>
<div id="column-options"></div>
<button id="export-btn">Export to PNG</button>
</div>
<div id="chart-container"></div>
<script>
document
.getElementById("csv-file")
.addEventListener("change", handleFileUpload);
document
.getElementById("export-btn")
.addEventListener("click", exportToPNG);
let chart;
let csvData;
function handleFileUpload(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const csv = e.target.result;
csvData = parseCSV(csv);
updateColumnOptions();
createChart();
};
reader.readAsText(file);
}
function parseCSV(csv) {
const lines = csv.split("\n");
const headers = lines[0].split(",");
const data = [];
for (let i = 1; i < lines.length; i++) {
const values = lines[i].split(",");
const obj = {};
for (let j = 0; j < headers.length; j++) {
obj[headers[j]] = values[j];
}
data.push(obj);
}
return data;
}
function updateColumnOptions() {
const columnOptions = document.getElementById("column-options");
columnOptions.innerHTML = "";
if (csvData && csvData.length > 0) {
const columns = Object.keys(csvData[0]);
const xAxisLabel = document.createElement("label");
xAxisLabel.textContent = "X-Axis Column: ";
const xAxisSelect = document.createElement("select");
xAxisSelect.id = "x-axis-select";
xAxisSelect.classList.add("column-select");
xAxisSelect.addEventListener("change", createChart);
columns.forEach((column) => {
const option = document.createElement("option");
option.value = column;
option.textContent = column;
xAxisSelect.appendChild(option);
});
columnOptions.appendChild(xAxisLabel);
columnOptions.appendChild(xAxisSelect);
const yAxisLabel = document.createElement("label");
yAxisLabel.textContent = "Y-Axis Column: ";
const yAxisSelect = document.createElement("select");
yAxisSelect.id = "y-axis-select";
yAxisSelect.classList.add("column-select");
yAxisSelect.addEventListener("change", createChart);
columns.forEach((column) => {
const option = document.createElement("option");
option.value = column;
option.textContent = column;
yAxisSelect.appendChild(option);
});
columnOptions.appendChild(yAxisLabel);
columnOptions.appendChild(yAxisSelect);
}
}
function createChart() {
if (!csvData || csvData.length === 0) {
return;
}
const chartType = document.getElementById("chart-type").value;
const chartTitle = document.getElementById("chart-title").value;
const xAxisLabel = document.getElementById("x-axis-label").value;
const yAxisLabel = document.getElementById("y-axis-label").value;
const xAxisColumn = document.getElementById("x-axis-select").value;
const yAxisColumn = document.getElementById("y-axis-select").value;
const option = {
title: {
text: chartTitle,
},
xAxis: {
name: xAxisLabel,
axisLabel: {
rotate: 60,
interval: 0,
},
},
yAxis: {
name: yAxisLabel,
},
series: [],
};
if (chartType === "stackedBar") {
const categories = [
...new Set(csvData.map((item) => item[xAxisColumn])),
];
const series = [];
const columns = Object.keys(csvData[0]);
columns.forEach((column) => {
if (column !== xAxisColumn) {
const seriesData = [];
categories.forEach((category) => {
const value = csvData.find(
(item) => item[xAxisColumn] === category
)[column];
seriesData.push(parseFloat(value));
});
series.push({
name: column,
type: "bar",
stack: "total",
data: seriesData,
});
}
});
option.xAxis.data = categories;
option.series = series;
} else if (chartType === "pie") {
const seriesData = csvData.map((item) => ({
name: item[xAxisColumn],
value: parseFloat(item[yAxisColumn]),
}));
option.series = [
{
type: "pie",
data: seriesData,
radius: "60%",
label: {
formatter: "{b}: {c} ({d}%)",
},
},
];
} else if (chartType === "radar") {
const indicators = csvData.map((item) => ({
name: item[xAxisColumn],
max: Math.max(
...csvData.map((item) => parseFloat(item[yAxisColumn]))
),
}));
const seriesData = csvData.map((item) =>
parseFloat(item[yAxisColumn])
);
option.radar = {
indicator: indicators,
};
option.series = [
{
type: "radar",
data: [
{
value: seriesData,
},
],
},
];
} else if (chartType === "heatmap") {
const xAxisData = [
...new Set(csvData.map((item) => item[xAxisColumn])),
];
const yAxisData = [
...new Set(csvData.map((item) => item[yAxisColumn])),
];
const data = [];
xAxisData.forEach((xValue, xIndex) => {
yAxisData.forEach((yValue, yIndex) => {
const value = csvData.find(
(item) =>
item[xAxisColumn] === xValue && item[yAxisColumn] === yValue
);
if (value) {
data.push([
xIndex,
yIndex,
parseFloat(value[Object.keys(value)[2]]),
]);
}
});
});
option.xAxis.data = xAxisData;
option.yAxis.data = yAxisData;
option.series = [
{
type: "heatmap",
data: data,
},
];
} else {
const xAxisData = csvData.map((item) => item[xAxisColumn]);
const yAxisData = csvData.map((item) =>
parseFloat(item[yAxisColumn])
);
option.xAxis.data = xAxisData;
option.series = [
{
type: chartType,
data: yAxisData,
},
];
}
if (chart) {
chart.dispose();
}
chart = echarts.init(document.getElementById("chart-container"));
chart.setOption(option);
}
function exportToPNG() {
if (chart) {
const dataURL = chart.getDataURL({
type: "png",
pixelRatio: 2,
backgroundColor: "#fff",
});
const link = document.createElement("a");
link.href = dataURL;
link.download = "chart.png";
link.click();
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment