update

Sheraz885 · Jan 25, 2017 · 286fb58 · 286fb58
1 parent c975248
commit 286fb58
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 0 deletions.
diff --git a/bar.html b/bar.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ChartJS - Bar</title>
+
+    <link href="css/default.css" rel="stylesheet">
+
+</head>
+<body>
+
+	<div class="chart-container">
+		<canvas id="bar-chartcanvas"></canvas>
+	</div>
+
+	<!-- javascript -->
+    <script src="js/jquery.min.js"></script>
+    <script src="js/Chart.min.js"></script>
+
+    <script src="js/bar.js"></script>
+
+</body>
+</html>
diff --git a/js/bar.js b/js/bar.js
@@ -0,0 +1,76 @@
+$(document).ready(function () {
+
+	var ctx = $("#bar-chartcanvas");
+
+	var data = {
+		labels : ["match1", "match2", "match3", "match4", "match5"],
+		datasets : [
+			{
+				label : "TeamA score",
+				data : [10, 50, 25, 70, 40],
+				backgroundColor : [
+					"rgba(10, 20, 30, 0.3)",
+					"rgba(10, 20, 30, 0.3)",
+					"rgba(10, 20, 30, 0.3)",
+					"rgba(10, 20, 30, 0.3)",
+					"rgba(10, 20, 30, 0.3)"
+				],
+				borderColor : [
+					"rgba(10, 20, 30, 1)",
+					"rgba(10, 20, 30, 1)",
+					"rgba(10, 20, 30, 1)",
+					"rgba(10, 20, 30, 1)",
+					"rgba(10, 20, 30, 1)"
+				],
+				borderWidth : 1
+			},
+			{
+				label : "TeamB score",
+				data : [20, 35, 40, 60, 50],
+				backgroundColor : [
+					"rgba(50, 150, 250, 0.3)",
+					"rgba(50, 150, 250, 0.3)",
+					"rgba(50, 150, 250, 0.3)",
+					"rgba(50, 150, 250, 0.3)",
+					"rgba(50, 150, 250, 0.3)"
+				],
+				borderColor : [
+					"rgba(50, 150, 250, 1)",
+					"rgba(50, 150, 250, 1)",
+					"rgba(50, 150, 250, 1)",
+					"rgba(50, 150, 250, 1)",
+					"rgba(50, 150, 250, 1)"
+				],
+				borderWidth : 1
+			}
+		]
+	};
+
+	var options = {
+		title : {
+			display : true,
+			position : "top",
+			text : "Bar Graph",
+			fontSize : 18,
+			fontColor : "#111"
+		},
+		legend : {
+			display : true,
+			position : "bottom"
+		},
+		scales : {
+			yAxes : [{
+				ticks : {
+					min : 0
+				}
+			}]
+		}
+	};
+
+	var chart = new Chart( ctx, {
+		type : "bar",
+		data : data,
+		options : options
+	});
+
+});