I am having trouble with a graph I'm creating in JavaScript. My graph takes data from the sales object and displays it in a graph. I am trying to add a button so that if it is clicked, all the sales.Sales values are set to 0, therefore resetting the graph to blank. I have tried using a loop to iterate through it, however, it only removes the December div and not the other 11 months. I included the HTML and JavaScript below.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "css/styles.css">
</head>
<body>
<script src = "js/sales-graph.js"></script>
<h1 id = "main_title">Titan Sports and Apparel LLC</h1>
<div id = "labels"></div><br />
<footer>© Titan Sports and Apparel LLC | Email: TitanSportsApparel@gmail.com</footer>
<br />
<br />
<br />
<br />
<button id = "resetgraph">Reset Graph</button>
</body>
</html>
function barGraph (sales) {
//Create graph
var graph = document.createElement("div");
graph.style.position = "relative";
graph.style.marginTop = "20%";
//Set height
var Maxheight = 0;
for (var i = 0; i < sales.length; i = 1) {
Maxheight = Math.max(Maxheight, sales[i].value);
}
graph.style.height = (Maxheight 10) "px";
//Give graph border
graph.style.borderBottomStyle = "solid";
graph.style.borderBottomWidth = "1px";
//Iterate through data
var position = 0;
var width = 80;
for (i = 0; i < sales.length; i = 1) {
var salesItem = sales[i];
var bar = document.createElement("div");
//Bar styling
bar.style.position = "absolute";
bar.style.left = position "px";
bar.style.width = width "px";
bar.style.backgroundColor = salesItem.Color;
bar.style.height = salesItem.Sales "px";
bar.style.bottom = "0px";
bar.innerHTML = salesItem.Sales;
bar.style.fontSize = "20px";
bar.style.textAlign = "center";
//Only removes december?
document.getElementById("resetgraph").addEventListener("click", function() {
for (j = 0; j < sales.length; j ) {
bar.style.height = "0px";
bar.innerText = "";
}
});
//Append
graph.appendChild(bar);
//Set bar width
position = (width * 2);
}
return graph;
};
function addlabel (sales) {
var labels = document.getElementById("labels")
labels.style.marginTop = "1px";
var width = 158.5;
for (var i = 0; i < sales.length; i = 1) {
var labelcontent = sales[i];
var label = document.createElement("span");
label.innerHTML = labelcontent.Month;
label.style.display = "inline-block";
label.style.width = width "px";
label.style.paddingLeft = "0px"
labels.appendChild(label);
}
return labels;
}
window.onload = function () {
var sales = [
{Month: "January", Sales: 40, Color: "Red"},
{Month: "February", Sales: 10, Color: "Green"},
{Month: "March", Sales: 100, Color: "Blue"},
{Month: "April", Sales: 65, Color: "Yellow"},
{Month: "May", Sales: 75, Color: "Brown"},
{Month: "June", Sales: 120, Color: "Grey"},
{Month: "July", Sales: 121, Color: "Turquoise"},
{Month: "August", Sales: 175, Color: "Cyan"},
{Month: "September", Sales: 220, Color: "Gold"},
{Month: "October", Sales: 275, Color: "Grey"},
{Month: "November", Sales: 300, Color: "Purple"},
{Month: "December", Sales: 15, Color: "Pink"},
]
var annotation = document.createElement("div")
width = 1750;
annotation.style.width = width "px";
annotation.style.textAlign = "center";
annotation.innerHTML = "Sales are in thousands";
var graph = barGraph(sales);
var labels = addlabel(sales)
document.body.appendChild(graph);
document.body.appendChild(labels);
document.body.appendChild(annotation);
};
CodePudding user response：
In your code, you were looping through all the sales items but you were applying the style only on the current bar, which was for your case the last item, December.
So, what I did is, set a unique ID, gave them the name of the month for each of your bars, and then on button click, I looped through all the sales items, tried to find if they exist or not. If they do then just applied your style on that bar.
var sales = [];
document.getElementById("resetgraph").addEventListener("click", function() {
for (j = 0; j < sales.length; j ) {
//check if all the element exist according to their id
var bar = document.getElementById(sales[j].Month);
if(bar){
//if exist then remove
bar.style.height = "0px";
bar.innerText = "";
}else{
console.log("element not exist");
}
}
});
function barGraph (sales) {
//Create graph
var graph = document.createElement("div");
graph.id = "mainGraph";
graph.style.position = "relative";
graph.style.marginTop = "20%";
//Set height
var Maxheight = 0;
for (var i = 0; i < sales.length; i = 1) {
Maxheight = Math.max(Maxheight, sales[i].value);
}
graph.style.height = (Maxheight 10) "px";
//Give graph border
graph.style.borderBottomStyle = "solid";
graph.style.borderBottomWidth = "1px";
//Iterate through data
var position = 0;
var width = 80;
for (i = 0; i < sales.length; i = 1) {
var salesItem = sales[i];
var bar = document.createElement("div");
//set an unique id for each of the bar graph
bar.id = sales[i].Month;
//Bar styling
bar.style.position = "absolute";
bar.style.left = position "px";
bar.style.width = width "px";
bar.style.backgroundColor = salesItem.Color;
bar.style.height = salesItem.Sales "px";
bar.style.bottom = "0px";
bar.innerHTML = salesItem.Sales;
bar.style.fontSize = "20px";
bar.style.textAlign = "center";
//Append
graph.appendChild(bar);
//Set bar width
position = (width * 2);
}
return graph;
};
function addlabel (sales) {
var labels = document.getElementById("labels")
labels.style.marginTop = "1px";
var width = 158.5;
for (var i = 0; i < sales.length; i = 1) {
var labelcontent = sales[i];
var label = document.createElement("span");
label.innerHTML = labelcontent.Month;
label.style.display = "inline-block";
label.style.width = width "px";
label.style.paddingLeft = "0px"
labels.appendChild(label);
}
return labels;
}
window.onload = function () {
sales = [
{Month: "January", Sales: 40, Color: "Red"},
{Month: "February", Sales: 10, Color: "Green"},
{Month: "March", Sales: 100, Color: "Blue"},
{Month: "April", Sales: 65, Color: "Yellow"},
{Month: "May", Sales: 75, Color: "Brown"},
{Month: "June", Sales: 120, Color: "Grey"},
{Month: "July", Sales: 121, Color: "Turquoise"},
{Month: "August", Sales: 175, Color: "Cyan"},
{Month: "September", Sales: 220, Color: "Gold"},
{Month: "October", Sales: 275, Color: "Grey"},
{Month: "November", Sales: 300, Color: "Purple"},
{Month: "December", Sales: 15, Color: "Pink"},
];
var annotation = document.createElement("div")
width = 1750;
annotation.style.width = width "px";
annotation.style.textAlign = "center";
annotation.innerHTML = "Sales are in thousands";
var graph = barGraph(sales);
var labels = addlabel(sales)
document.body.appendChild(graph);
document.body.appendChild(labels);
document.body.appendChild(annotation);
}; <h1 id = "main_title">Titan Sports and Apparel LLC</h1>
<div id = "labels"></div><br />
<footer>© Titan Sports and Apparel LLC | Email: [email protected]</footer>
<br />
<br />
<br />
<br />
<button id = "resetgraph">Reset Graph</button>