Skip to content

Commit 3d3e3f7

Browse files
AsabenehAsabeneh
committed
some style added
1 parent c455b66 commit 3d3e3f7

File tree

4 files changed

+145
-114
lines changed

4 files changed

+145
-114
lines changed

‎index.html

+27-20
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>Chart Using JavaScript</title>
8-
<link rel="stylesheet" href="./style.css" />
9-
</head>
10-
<body>
11-
<main>
12-
<div class="buttons">
13-
<button id="add-bar-graph">Bar Graph</button>
14-
<button id="add-histograph">Histograph</button>
15-
<button id="add-circle-graph">Circles</button>
16-
</div>
173

18-
<div class="chart-wrapper"></div>
19-
</main>
20-
<footer></footer>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<title>Chart Using JavaScript</title>
9+
<link
10+
href="https://fonts.googleapis.com/css?family=Aldrich|Lato:300,400,700|Montserrat:300,400,500|Nunito:300,400,600|Oswald|Raleway+Dots|Raleway:300,400|Roboto:300,400,500&display=swap"
11+
rel="stylesheet">
12+
<link rel="stylesheet" href="./style.css" />
13+
</head>
2114

22-
<script src="./main.js"></script>
23-
</body>
24-
</html>
15+
<body>
16+
<main>
17+
<div class="buttons">
18+
<button id="add-bar-graph">Bar Graph</button>
19+
<button id="add-histograph">Histograph</button>
20+
<button id="add-circle-graph">Circles</button>
21+
</div>
22+
23+
<div class="chart-wrapper">
24+
25+
</div>
26+
</main>
27+
28+
<script src="./main.js"></script>
29+
</body>
30+
31+
</html>

‎main.js

+80-77
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,102 @@
1-
const data = [100, 150, 250, 300, 380, 400, 430, 460, 500];
2-
const chartWrapper = document.querySelector(".chart-wrapper");
3-
const addBarGraph = document.querySelector("#add-bar-graph");
4-
const addHistograph = document.querySelector("#add-histograph");
5-
const addCircleGraph = document.querySelector("#add-circle-graph");
1+
const data = [100, 150, 250, 300, 380, 400, 430, 450, 460, 500]
2+
const chartWrapper = document.querySelector('.chart-wrapper')
3+
const addBarGraph = document.querySelector('#add-bar-graph')
4+
const addHistograph = document.querySelector('#add-histograph')
5+
const addCircleGraph = document.querySelector('#add-circle-graph')
66

77
const createBarGraph = data => {
8-
let div;
8+
let div
99
data.forEach(number => {
10-
div = document.createElement("div");
11-
div.textContent = number;
12-
div.classList.add("bar", "bar-graph");
10+
div = document.createElement('div')
11+
div.textContent = number
12+
div.classList.add('bar', 'bar-graph')
1313
Object.assign(div.style, {
14-
width: (number / 500) * 100 + "%",
15-
backgroundColor: `rgba(233, 114, 77,${number / 500})`
16-
});
17-
chartWrapper.appendChild(div);
18-
});
19-
};
20-
createBarGraph(data);
14+
width: (number / 500) * 100 + '%',
15+
backgroundColor: `rgba(255, 165, 0,${number / 500})`
16+
})
17+
chartWrapper.appendChild(div)
18+
})
19+
}
20+
createBarGraph(data)
2121

2222
const createHistograph = data => {
23-
let div;
23+
let div
2424
data.forEach(number => {
25-
div = document.createElement("div");
26-
div.textContent = number;
27-
div.classList.add("bar", "histograph");
25+
div = document.createElement('div')
26+
div.textContent = number
27+
div.classList.add('bar', 'histograph')
28+
//rgb(255, 165, 0)
2829
Object.assign(div.style, {
29-
height: number + "px",
30-
top: 500 - number + "px",
31-
backgroundColor: `rgba(233, 114, 77,${number / 500})`
32-
});
30+
height: number + 'px',
31+
top: 500 - number + 'px',
32+
backgroundColor: `rgba(255, 165, 0,${number / 500})`
33+
})
3334

34-
chartWrapper.appendChild(div);
35-
});
36-
};
35+
chartWrapper.appendChild(div)
36+
})
37+
}
3738
const createCircleGraph = data => {
38-
let div;
39+
let div
3940
data.forEach(number => {
40-
div = document.createElement("div");
41-
div.textContent = number;
41+
div = document.createElement('div')
42+
div.textContent = number
4243
Object.assign(div.style, {
43-
width: number / 4 + "px",
44-
height: number / 4 + "px",
45-
borderRadius: number / 2 + "px",
46-
textAlign: "center",
47-
lineHeight: number / 4 + "px",
48-
display: "inline-block",
49-
marginLeft: "3px",
50-
fontSize: number / 20 + "px",
51-
backgroundColor: `rgba(233, 114, 77,${number / 500})`
52-
});
53-
chartWrapper.appendChild(div);
54-
});
55-
};
44+
width: number / 2.5 + 'px',
45+
height: number / 2.5 + 'px',
46+
borderRadius: number / 2.5 + 'px',
47+
textAlign: 'center',
48+
lineHeight: number / 2.5 + 'px',
49+
fontFamily: 'Lato',
50+
fontWeight: 300,
51+
display: 'inline-block',
52+
marginLeft: '3px',
53+
fontSize: number / 20 + 'px',
54+
backgroundColor: `rgba(255, 165, 0,${number / 500})`
55+
})
56+
chartWrapper.appendChild(div)
57+
})
58+
}
5659

57-
addBarGraph.addEventListener("click", () => {
58-
chartWrapper.innerHTML = "";
59-
addHistograph.classList.remove("active");
60-
addCircleGraph.classList.remove("active");
61-
addBarGraph.className = "active";
62-
createBarGraph(data);
63-
});
60+
addBarGraph.addEventListener('click', () => {
61+
chartWrapper.innerHTML = ''
62+
addHistograph.classList.remove('active')
63+
addCircleGraph.classList.remove('active')
64+
addBarGraph.className = 'active'
65+
createBarGraph(data)
66+
})
6467

65-
addHistograph.addEventListener("click", () => {
66-
chartWrapper.innerHTML = "";
68+
addHistograph.addEventListener('click', () => {
69+
chartWrapper.innerHTML = ''
6770
if (window.innerWidth < 525) {
68-
addHistograph.classList.remove("active");
69-
addCircleGraph.classList.remove("active");
70-
addBarGraph.className = "active";
71-
createBarGraph(data);
71+
addHistograph.classList.remove('active')
72+
addCircleGraph.classList.remove('active')
73+
addBarGraph.className = 'active'
74+
createBarGraph(data)
7275
} else {
73-
addBarGraph.classList.remove("active");
74-
addCircleGraph.classList.remove("active");
75-
addHistograph.className = "active";
76-
createHistograph(data);
76+
addBarGraph.classList.remove('active')
77+
addCircleGraph.classList.remove('active')
78+
addHistograph.className = 'active'
79+
createHistograph(data)
7780
}
78-
});
81+
})
7982

80-
addCircleGraph.addEventListener("click", () => {
81-
chartWrapper.innerHTML = "";
82-
addHistograph.classList.remove("active");
83-
addBarGraph.classList.remove("active");
84-
addCircleGraph.className = "active";
85-
createCircleGraph(data);
86-
});
83+
addCircleGraph.addEventListener('click', () => {
84+
chartWrapper.innerHTML = ''
85+
addHistograph.classList.remove('active')
86+
addBarGraph.classList.remove('active')
87+
addCircleGraph.className = 'active'
88+
createCircleGraph(data)
89+
})
8790

88-
window.addEventListener("resize", e => {
89-
chartWrapper.innerHTML = "";
91+
window.addEventListener('resize', e => {
92+
chartWrapper.innerHTML = ''
9093
if (e.currentTarget.innerWidth <= 525) {
91-
addHistograph.classList.remove("active");
92-
addBarGraph.className = "active";
93-
createBarGraph(data);
94+
addHistograph.classList.remove('active')
95+
addBarGraph.className = 'active'
96+
createBarGraph(data)
9497
} else {
95-
addBarGraph.classList.remove("active");
96-
addHistograph.className = "active";
97-
createHistograph(data);
98+
addBarGraph.classList.remove('active')
99+
addHistograph.className = 'active'
100+
createHistograph(data)
98101
}
99-
});
102+
})

‎readme.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# JavaScript Chart
2-
How to create bar graph, histograph and circle graphs using pure HTML, CSS and JavaScript.
2+
3+
How to create horizontal and vertical bar graph and circle graphs using pure HTML, CSS and JavaScript.
34

45
## [Chart Demo](https://asabeneh.github.io/charts/)

‎style.css

+36-16
Original file line numberDiff line numberDiff line change
@@ -9,72 +9,92 @@
99

1010
/*=== MAIN ===*/
1111
main {
12+
1213
margin: auto;
1314
text-align: center;
15+
1416
}
17+
1518
.chart-wrapper {
16-
box-shadow: 0px 0px 6px 1px rgb(235, 230, 230);
19+
min-height: 25vh;
20+
box-shadow: 1px 1px 20px 10px rgb(7, 7, 7);
21+
box-shadow: 1px 1px 20px 10px rgb(235, 230, 230);
22+
box-shadow: 1px 1px 8px 5px rgba(0, 0, 0, 0.3);
1723
height: 100%;
18-
padding: 5px;
24+
padding: 15px;
1925
margin: auto;
20-
width: 80%;
26+
width: 75%;
27+
line-height: 35vh;
2128
}
29+
2230
.chart-wrapper div {
23-
border: 1px solid rgba(102, 4, 69, 0.1);
2431
border-top-right-radius: 2px;
2532
border-bottom-right-radius: 2px;
2633
color: #333;
27-
font-size: 18px;
28-
font-weight: 400;
29-
30-
height: 40px;
31-
line-height: 38px;
34+
font-size: 20px;
35+
height: 50px;
36+
line-height: 48px;
3237
margin-bottom: 5px;
38+
3339
}
40+
3441
.bar-graph {
3542
padding-right: 10px;
3643
text-align: right;
44+
font-family: 'Lato';
45+
font-weight: 300;
46+
3747
}
48+
3849
.histograph {
3950
border-top-left-radius: 2px;
4051
border-bottom-right-radius: 2px;
4152
display: inline-block;
42-
margin-left: 3px;
53+
margin-left: 5px;
4354
position: relative;
4455
text-align: center;
45-
width: 40px;
56+
width: 50px;
57+
font-family: 'Lato';
58+
font-weight: 300;
4659
}
60+
4761
.histograph:hover {
4862
transform: scaleX(1.075);
4963
-webkit-transform: scaleX(1.075);
5064
}
65+
5166
.bar-graph:hover {
5267
transform: scaleY(1.075);
5368
-webkit-transform: scaleY(1.075);
5469
}
5570

5671
.buttons {
5772
padding: 5px;
58-
margin: auto;
73+
margin: 10px auto;
5974
text-align: center;
6075
}
76+
6177
button {
62-
background: #ffa500;
78+
79+
background: rgb(255, 165, 0);
6380
border: 1px solid #ffa500;
6481
border-radius: 2px;
6582
font-size: 18px;
66-
font-weight: 100;
6783
height: 40px;
6884
margin: 0 1px 0 1px;
6985
outline: none;
70-
transition: 0.3s ease all;
86+
transition: 0.5s ease all;
7187
width: 120px;
88+
font-family: 'Lato';
89+
font-weight: 400;
7290
}
91+
7392
button:focus {
7493
outline: none;
7594
}
95+
7696
.active {
7797
background: orange;
7898
border-bottom: 3px solid rgb(255, 69, 0);
7999
color: white;
80-
}
100+
}

0 commit comments

Comments
 (0)