Problem while trying to show graphics about computer usage #3613
-
|
I have two files in this project, one HTML page: <!DOCTYPE html>
<html>
<head>
<title>Usage Graphs</title>
<style>
.graph-container {
width: 500px;
height: 300px;
margin: 20px auto;
}
.line-chart {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
</style>
</head>
<body>
<h1>Usage Graphs</h1>
<h2>System Uptime</h2>
<div class="graph-container"></div>
<h2>Memory Usage</h2>
<div class="graph-container"></div>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="./usage-graphs.js"></script>
</html>This is the second file, which is been using the d3 to generate graphs. // Define a function to generate usage data for the computer
function getUsageData() {
// Get the current system time
var currentTime = new Date();
// Use the performance API to get the system uptime
var uptime = performance.now() / 1000;
// Use the performance API to get the system memory usage
var memoryUsage = performance.memory;
// Return an object with the usage data
return {
time: currentTime,
uptime: uptime,
memoryUsage: memoryUsage,
};
}
// Define a function to generate a graph of the usage data
function generateGraph(usageData) {
// Use D3.js to select the element to add the graph to
var graphContainer = d3.select(".graph-container");
// Use D3.js to create a line chart
var lineChart = d3
.line()
.x(function (d) {
return d.time;
})
.y(function (d) {
return d.uptime;
});
// Use D3.js to add the line chart to the graph container
graphContainer
.append("path")
.datum(usageData)
.attr("class", "line-chart")
.attr("d", lineChart);
}
// Generate the initial usage data
var usageData = getUsageData();
// Generate the initial graph
generateGraph(usageData);
// Update the usage data and graph every second
setInterval(function () {
usageData = getUsageData();
console.log(usageData);
generateGraph(usageData);
}, 1000);I'm getting this output (no idea why to be honest): There is no error in the console. And there is informations being logged by the console.log(usageData). What am I doing wrong? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
@Fil could you help me? |
Beta Was this translation helpful? Give feedback.
-
|
It seems that there is only one point of data, which is not enough to draw a line? |
Beta Was this translation helpful? Give feedback.
-
|
Also graph-container is a div, and you’re appending a path element to it, so you’re getting an HTML path element (unknown) rather than SVG. You need to create an SVG element. |
Beta Was this translation helpful? Give feedback.
@Fil could you help me?