repaint canvas onclick event using Teechart

I have a sample code here to draw randomly generated signal on a canvas using Teechart. I have defined 2 canvas sections. One is generating the signal for 10000 samples. Whereas second canvas bar is depicting the preview of the main canvas. However, I do not want that preview to be displayed on 2nd canvas which is also a works as a scrollbar.

My second question is is it possible to repaint the canvas on the scrollbar when I move the ranger from one sample of the canvas bar to other. In simple words when I scroll across the scroller which is the second canvas.
I have added a mock-up, where it shows how the color on the bar has marked in blue showing that segment on the progress bar is been viewed. when the entire chart is scrolled the whole progress bar will turn to blue colour.

var Chart1, scroller;

function draw() {
  Chart1 = new Tee.Chart("canvas");
  Chart1.addSeries(new Tee.Area()).addRandom(10000).format.shadow.visible = false;
  Chart1.addSeries(new Tee.Line()).addRandom(10000);

  Chart1.title.text = "Chart Scroller";

  Chart1.panel.transparent = true;

  Chart1.legend.visible = false;
  Chart1.axes.bottom.setMinMax(200, 499);

  Chart1.zoom.enabled = false;
  Chart1.scroll.mouseButton = 0;
  Chart1.cursor = "pointer";
  Chart1.scroll.direction = "horizontal";

  scroller = new Tee.Scroller("canvas2", Chart1);
  scroller.onChanging = function(s, min, max) {
    document.getElementById("data").textContent = "Showing data from " + min.toFixed(0) + " to " + max.toFixed(0);
  }

  //   changeTheme(Chart1, "minimal");
  Chart1.draw();
}

<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js"></script>
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-extras.js"></script>

<body onload="draw()">
<div class="x_content">
  <br><canvas id="canvas" width="600" height="400">
  This browser does not seem to support HTML5 Canvas.
  </canvas>
  <br/>
  <canvas id="canvas2" width="550" height="80" style="margin-left : 55px;">
  This browser does not seem to support HTML5 Canvas.
  </canvas>
  <br/>

  <input type="checkbox" id="range" onclick="scroller.useRange(this.checked);" checked>Range
  <input type="checkbox" id="invert" onclick="scroller.invertThumb(this.checked);">Inverted
  <br/>
  <span id="data" />
</div>
</body>

Could someone please help me?

Solution

You can clear the .scroller.onDrawThumb function to skip drawing the series in the scroller.

scroller.scroller.onDrawThumb = "";

Regarding the second question, you could store the viewed sections in an array (ie history) and use it to draw blue rectangles at a custom onDrawThumb function.

Here a working example:

var Chart1, scroller;

function draw() {
  Chart1 = new Tee.Chart("canvas");
  Chart1.addSeries(new Tee.Area()).addRandom(10000).format.shadow.visible = false;
  Chart1.addSeries(new Tee.Line()).addRandom(10000);

  Chart1.title.text = "Chart Scroller";

  Chart1.panel.transparent = true;

  Chart1.legend.visible = false;
  Chart1.axes.bottom.setMinMax(200, 499);

  Chart1.zoom.enabled = false;
  Chart1.scroll.mouseButton = 0;
  Chart1.cursor = "pointer";
  Chart1.scroll.direction = "horizontal";

  scroller = new Tee.Scroller("canvas2", Chart1);

  var history = [];
  scroller.onChanging = function(s, min, max) {
    document.getElementById("data").textContent = "Showing data from " + min.toFixed(0) + " to " + max.toFixed(0);

    var done = false;
    history.forEach(function(item) {
      if (!done) {
        if ((min >= item[0]) && (min <= item[1])) {
          item[1] = Math.max(item[1], max);
          done = true;
        } else if ((max >= item[0]) && (max <= item[1])) {
          item[0] = Math.min(item[0], min);
          done = true;
        }
      }
    });
    if (!done) history.push([min, max]);
  };

  Chart1.draw();
  scroller.scroller.onDrawThumb = "";
  
  scroller.scroller.onDrawThumb = function(s) {
    var f = new Tee.Format(scroller),
      b = scroller.scroller.bounds,
      c = scroller.target,
      li = c.series,
      h, v;

    f.fill = "RGB(74, 144, 226)";
    f.stroke.fill = "";

    function saveAxis(axis, data) {
      var res = {
        mi: axis.minimum,
        ma: axis.maximum,
        sp: axis.startPos,
        ep: axis.endPos
      }
      restoreAxis(axis, data);
      return res;
    }

    function restoreAxis(axis, old) {
      axis.minimum = old.mi;
      axis.maximum = old.ma;
      axis.startPos = old.sp;
      axis.endPos = old.ep;
      axis.scale = (old.ep - old.sp) / (old.ma - old.mi);
    }

    h = saveAxis(c.axes.bottom, {
      sp: b.x,
      ep: b.x + b.width,
      mi: li.minXValue(),
      ma: li.maxXValue()
    });

    history.forEach(function(item) {
      var x1 = c.axes.bottom.calc(item[0]);
      var x2 = c.axes.bottom.calc(item[1]);
      var y1 = scroller.chartRect.y;
      var y2 = y1 + scroller.chartRect.height;
      f.rectangle(x1, y1, x2 - x1, y2);
    });

    restoreAxis(c.axes.bottom, h);
  };

  history.push([Chart1.axes.bottom.minimum, Chart1.axes.bottom.maximum]);
  Chart1.draw();
}

<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js"></script>
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-extras.js"></script>

<body onload="draw()">
  <div class="x_content">
    <br><canvas id="canvas" width="600" height="400">
  This browser does not seem to support HTML5 Canvas.
  </canvas>
    <br/>
    <canvas id="canvas2" width="520" height="50" style="margin-left : 70px;">
  This browser does not seem to support HTML5 Canvas.
  </canvas>

    <br/>
    <span id="data" />
  </div>
</body>