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> |