<JavaScript> <HTML>
<CSS> <SQL>
<Git>
name: Iliya Ashirov
position: FRONT-END developer
education: Kazan Federal University
age:
>
  1. function renderSignalChart(elementClass) {
  2. var elements = document.querySelectorAll("." + elementClass);
  3. if (!elements) {
  4. return false;
  5. }
  6. for (var i = 0; i < elements.length; i++) {
  7. var points = elements[i].querySelector("input"),
  8. canvas = elements[i].querySelector("canvas"),
  9. t = 0,
  10. context, pointsCount, step, width, height, middleline, min, max, middleHeigh, equator, colors = {};
  11. colors.bg = {};
  12. colors.bg.red = '#fee8e8';
  13. colors.bg.blue = '#e8f4fe';
  14. colors.line = {};
  15. colors.line.red = '#ff0000';
  16. colors.line.blue = '#00afef';
  17. width = elements[i].clientWidth - 4;
  18. height = elements[i].clientHeight - 4;
  19. middleHeigh = height / 2;
  20.  
  21. points = points.value.split(",");
  22. points.shift();
  23. pointsCount = points.length;
  24.  
  25. min = points.min();
  26. max = points.max();
  27.  
  28. middleline = (max + min) / 2;
  29.  
  30. oneStepY = middleHeigh / (max - middleline);
  31. step = width / pointsCount;
  32.  
  33. equator = middleHeigh + oneStepY * middleline;
  34. context = canvas.getContext("2d");
  35.  
  36. function createPointsCoord() {
  37. for (t; t < pointsCount; t++) {
  38. points[t] = {
  39. x: t * step,
  40. y: (middleHeigh - (points[t] - middleline) * oneStepY)
  41. };
  42. }
  43. }
  44. createPointsCoord();
  45.  
  46. function quadraticBezier(p1, p2, p3, t) {
  47. return t * (t * (p3 - p2 * 2 + p1) + 2 * (p2 - p1)) + p1;
  48. }
  49.  
  50. context.beginPath();
  51. context.lineWidth = 2;
  52. context.strokeStyle = points[1].y > equator ? colors.line.red : colors.line.blue;
  53. context.fillStyle = points[1].y > equator ? colors.bg.red : colors.bg.blue;
  54. context.moveTo(points[0].x, points[0].y);
  55. var exit = false,
  56. liney = 0;
  57.  
  58. for (t = 1; t < points.length - 2; t++) {
  59.  
  60. var xc = (points[t].x + points[t + 1].x) / 2;
  61. var yc = (points[t].y + points[t + 1].y) / 2;
  62.  
  63.  
  64. liney++;