renderPoints method

void renderPoints()

Implementation

void renderPoints() {
  var ctx = startRender();
  ctx.fillStyle = 'black'.toJS;
  ctx.font = '8pt Arial';

  ctx.lineWidth = 1;
  ctx.strokeStyle = '#ddd'.toJS;
  var chartWidth = width - smallMargin - valueMargin;
  var chartHeight = height - timeMargin - smallMargin;
  ctx.strokeRect(valueMargin, smallMargin, chartWidth, chartHeight);

  ctx.strokeStyle = 'black'.toJS;
  ctx.save();
  ctx.textAlign = "right";
  ctx.textBaseline = "middle";
  var valueStepWidth = (height - timeMargin - smallMargin) / (valueLabels.length - 1);
  for (var i = 0; i < valueLabels.length; i++) {
    ctx.strokeStyle = '#ccc'.toJS;
    ctx.beginPath();
    ctx.moveTo(valueMargin, smallMargin + (i * valueStepWidth));
    ctx.lineTo(width - smallMargin, smallMargin + (i * valueStepWidth));
    ctx.stroke();
    ctx.fillText(formatValue(valueLabels[i]), valueMargin - textMargin, smallMargin + (i * valueStepWidth));
  }

  ctx.translate(valueMargin, height - timeMargin);
  ctx.rotate(-pi / 2);
  ctx.textAlign = "right";
  ctx.textBaseline = "middle";
  for (var time in timeLabels.keys) {
    ctx.save();
    ctx.translate(0, chartWidth * ((time - minTime!) / (maxTime! - minTime!)));
    ctx.strokeStyle = '#ccc'.toJS;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(chartHeight, 0);
    ctx.stroke();
    ctx.fillText(timeLabels[time]!, -textMargin, 0);
    ctx.restore();
  }
  ctx.restore();

  bool first = true;
  ctx.beginPath();
  ctx.strokeStyle = _lineColor.toJS;
  ctx.fillStyle = _lineColor.toJS;
  ctx.lineWidth = _lineWidth;

  for (int i = 0; i < points.length; i++) {
    if (first) {
      ctx.moveTo(points[i].x, points[i].y);
      first = false;
    } else {
      Point cp1 = Point((points[i - 1].x + points[i].x) / 2, points[i - 1].y);
      Point cp2 = Point((points[i - 1].x + points[i].x) / 2, points[i].y);
      ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, points[i].x, points[i].y);
      //ctx.lineTo(points[i].x, points[i].y);
    }
  }
  ctx.stroke();
  for (int i = 0; i < points.length; i++) {
    ctx.beginPath();
    if (points[i].active) {
      ctx.arc(points[i].x, points[i].y, _pointSize, 0, 2 * pi);
    } else {
      ctx.arc(points[i].x, points[i].y, _pointSize / 2, 0, 2 * pi);
    }
    ctx.stroke();
    ctx.fill();
  }
}