Manually draw yaxis in time intervals using Teechart

Question

I am using Teechart library to display y axes in the time intervals of 1 second. Chart1.axes.left.increment = 1; helps me to increment the yaxis in the interval of 1. What i need is to lay out dotted lines in between these Solid lines. I want to manually add the line series for dotted lines in time interval of 0.20 seconds. How can I use line series to add dotted lines here.

 function draw_TeeChart() {

            var w = window.innerWidth, h = window.innerHeight;

            // Initialize Teechart[![enter image description here][1]][1]
            Chart1 = new Tee.Chart("canvas");

            document.getElementById("canvas").style.position  = "relative";
            document.getElementById("canvas").width= Math.round(0.82*w);document.getElementById("canvas").height= Math.round(0.89*h);   //Chart1.bounds.x = Math.round(0.01*w);

            Chart1.bounds.x = 14;Chart1.bounds.y= 10;
            Chart1.bounds.width = Math.round(chartW*w);Chart1.bounds.height= Math.round(0.88*h);
            Chart1.legend.visible = false; Chart1.panel.transparent = true;
            Chart1.title.visible = false;Chart1.axes.bottom.title.text = " ";
            Chart1.axes.left.increment = 1;


            Chart1.axes.bottom.increment=1;

Chart1.axes.bottom.innerTicks.visible = true;
        Chart1.axes.bottom.ticks.length = 9;
        Chart1.axes.bottom.ticks.stroke.fill = "blue";

        Chart1.axes.bottom.minorTicks.visible = true;
        Chart1.axes.bottom.minorTicks.length = 4;
        Chart1.axes.bottom.minorTicks.count = 4;
        Chart1.axes.bottom.minorTicks.stroke.fill = "green";



            // var dottedLines =  Chart1.axes.bottom.increment=.2;


                // var increment = 0.20;
                // var dottedLines =  Chart1.axes.bottom.grid.format.stroke.dash = [5,3]; 
                // var solidLines = Chart1.axes.bottom.increment=1;


            // for(increment =0.20;increment<100;increment =increment+0.20){

            //  if (increment % 1 == 0) {

            //  Chart1.axes.bottom.increment=1;
            //      }
            //  else {
            //      Chart1.axes.bottom.increment=0.20;
            //      Chart1.axes.bottom.grid.format.stroke.dash = [5,3]; 
            //  }

            // }

            Chart1.walls.back.format.fill = wallColorCode;
            Chart1.walls.back.format.shadow.visible = false;
            document.body.style.cursor = "pointer";

            document.getElementById("EventCount").value = event_time.length.toFixed(0);

    }

Image1:

Image2:

Answer 1

Here an example showing how you could extend the bottom axis adding a new innerGrid property and using it at drawLabel override.

var Chart1;

function draw() {
  Chart1 = new Tee.Chart("canvas1");

  var line1 = Chart1.addSeries(new Tee.Line());
  line1.data.values = [10, 20, 30, 20, 50];

  Chart1.legend.visible = false;

  Chart1.axes.bottom.setMinMax(0, 5);
  Chart1.axes.bottom.increment = 1;
  Chart1.axes.bottom.innerTicks.visible = true;
  Chart1.axes.bottom.ticks.length = 9;
  Chart1.axes.bottom.ticks.stroke.fill = "blue";
  Chart1.axes.bottom.minorTicks.visible = true;
  Chart1.axes.bottom.minorTicks.length = 4;
  Chart1.axes.bottom.minorTicks.count = 4;
  Chart1.axes.bottom.minorTicks.stroke.fill = "green";

  Chart1.axes.bottom.innerGrid = [];
  Chart1.axes.bottom.innerGrid.increment = 0.20;
  Chart1.axes.bottom.innerGrid.format = new Tee.Format(Chart1);
  Chart1.axes.bottom.innerGrid.format.stroke.fill = Chart1.axes.bottom.grid.format.stroke.fill;
  Chart1.axes.bottom.innerGrid.format.stroke.dash = [5, 3];
  Chart1.axes.bottom.oldDrawLabel = Chart1.axes.bottom.drawLabel;

  Chart1.axes.bottom.drawLabel = function(value, r) {
    this.oldDrawLabel(value, r);

    var c = this.chart.ctx,
      rect = this.chart.chartRect,
      f = this.innerGrid.format,
      tmpX;

    var tmpValue = value + this.innerGrid.increment;

    while (tmpValue < value + this.increment) {
      tmpX = Chart1.axes.bottom.calc(tmpValue);

      if ((tmpX > rect.x) && (tmpX < rect.x + rect.width)) {
        c.beginPath();

        c.moveTo(tmpX, rect.y);
        c.lineTo(tmpX, rect.y + rect.height);

        f.stroke.prepare();
        c.stroke();
      }

      tmpValue += this.innerGrid.increment;
    }

    //draw innerGrid between the axis minimum and the first label. Happens when scrolled
    if (value - this.increment <= this.minimum) {
      tmpValue = value - this.innerGrid.increment;

      while (tmpValue > value - this.increment) {
        tmpX = Chart1.axes.bottom.calc(tmpValue);

        if ((tmpX > rect.x) && (tmpX < rect.x + rect.width)) {
          c.beginPath();

          c.moveTo(tmpX, rect.y);
          c.lineTo(tmpX, rect.y + rect.height);

          f.stroke.prepare();
          c.stroke();
        }

        tmpValue -= this.innerGrid.increment;
      }
    }
  };
  Chart1.draw();
}

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="http://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>
</head>

<body onload="draw()">
  <canvas id="canvas1" width="500" height="300">
    This browser does not seem to support HTML5 Canvas.
</canvas>
</body>

</html>