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:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Canvas Diagramm</title>
</head>
<body>
<script type="text / javascript">
var canvas = document.getElementById("canvas_diagramm");
var canvasWidth = 400;
var canvasHeight = 350;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
var cv = canvas.getContext("2d");
var graphGridSize = 20;
var graphGridX = (canvasWidth / graphGridSize).toFixed();
for (var i = 0; i < graphGridX; i ++) {
cv.moveTo(canvasWidth, graphGridSize * i);
cv.lineTo(0, graphGridSize * i);
}
cv.strokeStyle = "#dbdbdb";
cv.stroke();
//Data Graph
var data = { values:[
{A: "Jan", B: 32, C: "#E65858"},
{A: "Feb", B: 70, C: "#E65858"},
{A: "Mrz", B: 25, C: "#E65858"},
{A: "Apr", B: 20, C: "#E65858"},
{A: "Mai", B: 40, C: "#E65858"},
{A: "Jun", B: 60, C: "#E65858"},
{A: "Jul", B: 90, C: "#E65858"},
{A: "Aug", B: 75, C: "#E65858"},
{A: "Sep", B: 95, C: "#5692B8"},
{A: "Okt", B: 120, C: "#E65858"},
{A: "Nov", B: 160, C: "#EECD32"},
{A: "Dez", B: 100, C: "#E65858"},
]};
//Options Graph
var graphMax = 160;
var graphPadding = 10;
var graphFaktor = (canvasHeight-(2*graphPadding)) / graphMax;
var graphWidth = (canvasWidth-graphPadding) / data.values.length;
var graphTextcolor = '#000000';
//Draw Graph
for(var i = 0; i < data.values.length; i ++){
tmpTop = (canvasHeight-(graphFaktor*data.values[i].B)).toFixed()-graphPadding;
tmpHeight = ((data.values[i].B*graphFaktor)).toFixed();
cv.fillStyle = data.values[i].C;
cv.fillRect(graphWidth+((i-1)*graphWidth)+graphPadding, tmpTop, graphWidth-graphPadding, tmpHeight);
cv.fillStyle = graphTextcolor;
cv.fillText(data.values[i].A, graphWidth+((i-1)*graphWidth)+graphPadding+2, canvasHeight-2, graphWidth);
}
</script>
<canvas id="canvas_diagramm" style="border: 1px solid #E65858;border-radius:4px;">
</canvas>
</body>
</html> |
Narses
