repaint canvas onclick event using Teechart

Question

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?

I'm not sure to understand what do you exactly want in the second part of the question. Could you please add some screenshot or mockup? — Yeray, Apr 26 '18 at 08:38

Yeray · Accepted Answer · 2018-05-03T12:00:01.700

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>

Above solution works perfectly well. But is it possible to paint a portion of the canvas as I move along the scroller bar, as to change color underneath the scroller as it moves along the bar? — bhapri, Apr 27 '18 at 03:35
But it doesn't have to be the waveform. It can be any plain color to show that the segment has been viewed. As I scroll along it lives behind a color for a viewed segment. — bhapri, Apr 30 '18 at 01:25
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. — bhapri, May 03 '18 at 02:10
I've moved your mockup and clarification to the question. I'll edit the answer trying to put some light into it. — Yeray, May 03 '18 at 10:00
Hi I was a bit curious to know how can I generate above described functionalities for specific input data rather than generating 1000 random samples? — bhapri, May 23 '18 at 02:59
I tried to implement the above code for my data set, unfortunately the scroller does not move on the canvas. it only moves once. — bhapri, Jun 12 '18 at 07:34
Or can I have the same set of features using a slider instead? — bhapri, Jun 13 '18 at 05:59
if I don't use setMinMax and implement the Scroller tool then, as expected, the selection range in the scroller starts at full range. I can size the selection in the scroller, but I cannot scroll it. When I try to scroll the selection area left or right it snaps to the far left of the scroller canvas and will no longer move. — bhapri, Jun 13 '18 at 07:02
Please ask a new question or edit this question with the code to reproduce the problem — Yeray, Jun 13 '18 at 08:30
I guess [this](https://stackoverflow.com/questions/50828776/tee-chart-scroller-implementation) is the new question — Yeray, Jun 13 '18 at 08:34

repaint canvas onclick event using Teechart

1 Answers1