161 lines
5.4 KiB
HTML
161 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>D3.js Multiple Line Chart</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
|
|
<style>
|
|
.line {
|
|
fill: none;
|
|
stroke-width: 2px;
|
|
}
|
|
.axis-label {
|
|
font-size: 16px;
|
|
}
|
|
.legend {
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<input type="file" id="fileInput" />
|
|
<div id="chart"></div>
|
|
|
|
<script>
|
|
// Data
|
|
const sample_data = [
|
|
{"lux":1263.0,"timestamp":18188401,"lux_fast":1000.0,"lux_slow":900.0},
|
|
{"lux":1000.0,"timestamp":18188571,"lux_fast":1263.0,"lux_slow":1000.0},
|
|
{"lux":900.0,"timestamp":18188741,"lux_fast":1262.0,"lux_slow":1263.0}
|
|
];
|
|
|
|
function createChart(data) {
|
|
d3.select("#chart").select("svg").remove();
|
|
// Set the dimensions and margins of the graph
|
|
const margin = {top: 20, right: 80, bottom: 50, left: 60};
|
|
const width = 600 - margin.left - margin.right;
|
|
const height = 400 - margin.top - margin.bottom;
|
|
|
|
// Append the svg object to the body of the page
|
|
const svg = d3.select("#chart")
|
|
.append("svg")
|
|
.attr("width", width + margin.left + margin.right)
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
.append("g")
|
|
.attr("transform", `translate(${margin.left},${margin.top})`);
|
|
|
|
// X scale
|
|
const x = d3.scaleLinear()
|
|
.domain(d3.extent(data, d => d.timestamp))
|
|
.range([0, width]);
|
|
|
|
// Y scale
|
|
const y = d3.scaleLinear()
|
|
.domain([d3.min(data, d => Math.min(d.lux, d.lux_fast, d.lux_slow)) - 0.5,
|
|
d3.max(data, d => Math.max(d.lux, d.lux_fast, d.lux_slow)) + 0.5])
|
|
.range([height, 0]);
|
|
|
|
// Add X axis
|
|
svg.append("g")
|
|
.attr("transform", `translate(0,${height})`)
|
|
.call(d3.axisBottom(x));
|
|
|
|
// Add Y axis
|
|
svg.append("g")
|
|
.call(d3.axisLeft(y));
|
|
|
|
// X axis label
|
|
svg.append("text")
|
|
.attr("class", "axis-label")
|
|
.attr("text-anchor", "middle")
|
|
.attr("x", width / 2)
|
|
.attr("y", height + margin.bottom - 10)
|
|
.text("Timestamp");
|
|
|
|
// Y axis label
|
|
svg.append("text")
|
|
.attr("class", "axis-label")
|
|
.attr("text-anchor", "middle")
|
|
.attr("transform", "rotate(-90)")
|
|
.attr("y", -margin.left + 20)
|
|
.attr("x", -height / 2)
|
|
.text("Lux Value");
|
|
|
|
// Line generator
|
|
const line = d3.line()
|
|
.x(d => x(d.timestamp))
|
|
.y(d => y(d.lux));
|
|
|
|
// Add the lux line
|
|
svg.append("path")
|
|
.datum(data)
|
|
.attr("class", "line")
|
|
.attr("d", line)
|
|
.attr("stroke", "blue");
|
|
|
|
// Add the lux_fast
|
|
svg.append("path")
|
|
.datum(data)
|
|
.attr("class", "line")
|
|
.attr("d", d3.line()
|
|
.x(d => x(d.timestamp))
|
|
.y(d => y(d.lux_fast)))
|
|
.attr("stroke", "red");
|
|
|
|
// Add the lux_slow line
|
|
svg.append("path")
|
|
.datum(data)
|
|
.attr("class", "line")
|
|
.attr("d", d3.line()
|
|
.x(d => x(d.timestamp))
|
|
.y(d => y(d.lux_slow)))
|
|
.attr("stroke", "green");
|
|
|
|
// Add legend
|
|
const legend = svg.append("g")
|
|
.attr("class", "legend")
|
|
.attr("transform", `translate(${width + 10}, 0)`);
|
|
|
|
const legendItems = [
|
|
{ label: "Lux", color: "blue" },
|
|
{ label: "Lux Fast", color: "red" },
|
|
{ label: "Lux Slow", color: "green" }
|
|
];
|
|
|
|
legendItems.forEach((item, index) => {
|
|
const legendItem = legend.append("g")
|
|
.attr("transform", `translate(0, ${index * 20})`);
|
|
|
|
legendItem.append("rect")
|
|
.attr("width", 10)
|
|
.attr("height", 10)
|
|
.attr("fill", item.color);
|
|
|
|
legendItem.append("text")
|
|
.attr("x", 15)
|
|
.attr("y", 10)
|
|
.text(item.label);
|
|
});
|
|
}
|
|
// File input event listener
|
|
document.getElementById('fileInput').addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const contents = e.target.result;
|
|
try {
|
|
const data = JSON.parse(contents);
|
|
createChart(data);
|
|
} catch (error) {
|
|
console.error("Error parsing JSON:", error);
|
|
alert("Error parsing JSON file. Please make sure it's a valid JSON.");
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
});
|
|
createChart(sample_data);
|
|
</script>
|
|
</body>
|
|
</html> |