blob: c2d7518cbbd6550119c71ed52fb0c9929367a068 (
plain)
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
39
40
41
42
43
44
45
46
47
48
49
50
|
<html>
<head>
<script>
function draw() {
/* Accepting and seperating comma seperated values */
var n = document.getElementById("num").value;
var values = n.split(',');
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var width = 40; //bar width
var X = 50; // first bar position
var base = 200;
for (var i =0; i<values.length; i++) {
ctx.fillStyle = '#008080';
var h = values[i];
ctx.fillRect(X,canvas.height - h,width,h);
X += width+15;
/* text to display Bar number */
ctx.fillStyle = '#4da6ff';
ctx.fillText('Bar '+i,X-50,canvas.height - h -10);
}
/* Text to display scale */
ctx.fillStyle = '#000000';
ctx.fillText('Scale X : '+canvas.width+' Y : '+canvas.height,800,10);
}
function reset(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
</head>
<body align="center">
Enter the values seperated by a comma<br>
<input type="text" name="number" id="num"><br>
<input type="button" value="submit" name="submit" onclick="draw()">
<input type="button" value="Clear" name="Clear" onclick="reset()"><br><br>
<canvas id="myCanvas" width="900" height="500" style="border:1px solid #c3c3c3;">
</canvas>
</body>
</html>
|
