-
Notifications
You must be signed in to change notification settings - Fork 0
/
default.html
38 lines (38 loc) · 2.28 KB
/
default.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart.JS</title>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="js/scss/chartist.css">
<link rel="stylesheet" href="js/scss/chartist-plugin-tooltip.css">
</head>
<body>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Login</a></li>
<li><a href="">Signup</a></li>
</ul>
</nav>
<div class="container">
<div class="chart"><h1>Very Important Chart</h1><div class="description">This is a simple line graph, it displays data in a line based on the x and y inputs chosen. They can be scaled infinitely and will always display the graph based on the largest number on the chart. Can be animated in mutiple ways.</div>
<div class="ct-chart ct-perfect-fourth" id="chart1"></div>
</div>
<div class="chart"><h1>GPU Performance Chart</h1><div class="description">This is a simple bar graph. The bar graphs can be displayed either horizontally or vertically based on your preference, and can have a large amount of comparisons stacked in multiple arrangements. They can also be animated though in more limited ways</div><div class="ct-chart ct-perfect-fourth" id="chart2"></div></div>
<div class="chart"><h1>Pie Is Great Chart</h1><div class="description">This is a simple pie chart. Can use numbers not adding up to 100% but is probably best used with 100% in mind. Labels are optional and can be placed inside or outside of the chart. Cannot be animated without using third-party frameworks</div><div class="ct-chart ct-perfect-fourth" id="chart3"></div></div>
<div class="chart"><h1>Delicious Donuts Chart</h1><div class="description">A slightly cleaner way of viewing pie charts, options are the same as pie charts but this one can be animated to an extent.</div><div class="ct-chart ct-perfect-fourth" id="chart4"></div></div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/chartist.min.js"></script>
<script src="js/chartist-plugin-accessibility.min.js"></script>
<script src="js/chartist-plugin-legend.js"></script>
<script src="js/chartist-plugin-tooltip.min.js"></script>
<script src="js/chart1.js"></script>
<script src="js/chart2.js"></script>
<script src="js/chart3.js"></script>
<script src="js/chart4.js"></script>
</body>
</html>