Javascript / HTML5 teechart flickering/blinking problem

Post by » Fri Aug 05, 2022 12:24 pm

Hello all,

I have an ASP.net project and I'm using Javascript/HTML5 steema teechart in my project.
I want to update lines data every second, but the problem is the whole chart will update and cause flickering/blinking.
Can someone please help me with this problem?

This is my Controller code:

Code: Select all

      public ActionResult TrendingChart()
        {
            lock (renderLock)
            {
                wChart3.Panel.Color = ColorTranslator.FromHtml("#FF000000");
                wChart3.Header.Visible = false;

                wChart3.Axes.Bottom.Ticks.Visible = true;
                wChart3.Footer.Visible = true;
                wChart3.Footer.Text = "bbl/hr";
                wChart3.Footer.Font.Color = System.Drawing.Color.GhostWhite;
                wChart3.Axes.Bottom.Increment = 10000;
                wChart3.Axes.Bottom.SetMinMax(0, 100000);

                wChart3.Axes.Bottom.Grid.Visible = true;

                wChart3.Axes.Left.Ticks.Visible = true;
                wChart3.Axes.Left.SetMinMax(0, 22);
                wChart3.Axes.Left.Increment = 2;

                wChart3.Legend.Visible = false;

                for (int i = 0; i < 32; i++)
                {
                    _line[i] = new Steema.TeeChart.Styles.Line();
                    _line[i].LinePen.Width = 3;
                    wChart3.Series.Add(_line[i]);
                }

                double[] TagValues = new double[108];

                TagValues = _client.ScanOpcServerData();

               DrawP1(TagValues[50], true); 
               DrawP2(TagValues[50], false);
               DrawP3(TagValues[50], false); 

                DrawPointOfOperation(TagValues[48], TagValues[49]);
                DrawStaticMpsIpsGraph();
                DrawLimitGraphs();

                wChart3.Series[0].Add(_line[0]);
                wChart3.Series[1].Add(_line[1]);
                wChart3.Series[2].Add(_line[2]);
                wChart3.Series[3].Add(_line[3]);
                wChart3.Series[4].Add(_line[4]);
                wChart3.Series[5].Add(_line[5]);
                wChart3.Series[6].Add(_line[6]);
                wChart3.Series[7].Add(_line[7]);
                wChart3.Series[8].Add(_line[8]);
                wChart3.Series[9].Add(_line[9]);
                wChart3.Series[10].Add(_line[10]);
                wChart3.Series[11].Add(_line[11]);
                wChart3.Series[12].Add(_line[12]);
                wChart3.Series[13].Add(_line[13]);

                MemoryStream tempStream = new MemoryStream(); 
                wChart3.Export.Image.JScript.SourceScriptPath = "/Scripts";
                wChart3.Export.Image.JScript.Width = 1180;
                wChart3.Export.Image.JScript.Height = 730;
                wChart3.Export.Image.JScript.Save(tempStream);

                tempStream.Position = 0;
                StreamReader sr = new StreamReader(tempStream);

                return Content(sr.ReadToEnd()); 
            }
        }

And this is my .cshtl code

Code: Select all

<!DOCTYPE html>
<html style="width:1433px;height:952px">

<head>  
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        // Read data on interval
        setInterval(function () {
            ReadData();
        }, 1000);

        function ReadData() {
           document.getElementById('frTrendingChart').src = "/Home/TrendingChart"; // Repaint TeeChart
        }
    </script>
</head>

<body>
    <div>
      <iframe id="frTrendingChart" hidden="hidden" style="border:none; width:1200px; height:750px;background-color:black" />
    </div>
</body>
</html>

Post by **Yeray** » Fri Aug 05, 2022 1:46 pm

Hello,

If you will be getting the new data in the server side, you can connect the server and the client with SignalR.
Here there's an example using it. In this example the chart is fully created in Javascript. However, the same concepts should apply for a javascript chart generated from a .NET chart.

Post by » Mon Aug 08, 2022 1:13 pm

Sending data from server side to client side is not problem, the problem is the way how teechart being update.
I was looking for a way to do not set the chart source again, so it won't blink I think.
I looked at the code in Github for won't work for Steema teechart.
Is there another way or solution?

Post by » Thu Aug 11, 2022 9:11 am

Yeray wrote: ↑
Fri Aug 05, 2022 1:46 pm
Hello,

If you will be getting the new data in the server side, you can connect the server and the client with SignalR.
Here there's an example using it. In this example the chart is fully created in Javascript. However, the same concepts should apply for a javascript chart generated from a .NET chart.

Dear Steema,
I've been busy with this problem for a long time and the project is delivered to our customer. I will appreciate it if you help me.
In my project I create the chart in server side (not javascript chart) and I'm using .Net Framework (not .Net core)
Is there any solution for chart blinking on its update?

Post by **Marc** » Thu Aug 18, 2022 8:34 am

Hello,

The solution would be to send, once the Charft has been initially loaded, subsequent data directly to the javascript.

The ReadData function on your javascript page could call the data directly. ie.. you setup an URL to return the new data, then you can add it by using the javascript series add methods.

Javascript realtime data add example.
Excerpt taken from https://www.steema.com/files/public/tee ... altime.htm

Code: Select all

   requestAnimFrame(newData, Chart1, 1);

  function newData(now) {

    Chart1.series.each(function(series) {
        var d=series.data.values, x=series.data.x, t, l=d.length;

        for (t=0; t<NEWPOINTS; t++) {
            d[l]= d[l-1] + (Math.random()*1000)-500;
            x[l]= x[l-1] + 1;
            d.shift();
            x.shift();
        }
    });
....
	Chart1.draw();

The example uses random data where you would add your retrieved new data.

I add this for reference; Blazor projects are somewhat different in setup but offer an option to achieve a smooth transition with. largely, serverside code:
ie.
http://www.steema.net/TeeChartRealTime/addrealtimejs

Regards,
Marc Meumann

Post by » Mon Aug 22, 2022 8:21 am

Marc wrote: ↑
Thu Aug 18, 2022 8:34 am
Hello,

The solution would be to send, once the Charft has been initially loaded, subsequent data directly to the javascript.

The ReadData function on your javascript page could call the data directly. ie.. you setup an URL to return the new data, then you can add it by using the javascript series add methods.

Javascript realtime data add example.
Excerpt taken from https://www.steema.com/files/public/tee ... altime.htm
Code: Select all
   requestAnimFrame(newData, Chart1, 1);

  function newData(now) {

    Chart1.series.each(function(series) {
        var d=series.data.values, x=series.data.x, t, l=d.length;

        for (t=0; t<NEWPOINTS; t++) {
            d[l]= d[l-1] + (Math.random()*1000)-500;
            x[l]= x[l-1] + 1;
            d.shift();
            x.shift();
        }
    });
....
	Chart1.draw();
The example uses random data where you would add your retrieved new data.

I add this for reference; Blazor projects are somewhat different in setup but offer an option to achieve a smooth transition with. largely, serverside code:
ie.
http://www.steema.net/TeeChartRealTime/addrealtimejs

Regards,
Marc Meumann

Hello Marc,
Thank you for your answer. If this is the only solution then I should have a big change in my project

I had seen something and I'm very curious to know if you/someone here knows the reason?
When I run the project in Internet explorer I won't see any blinking but in Google chrome or other web browsers I see the blinking.

Post by **Marc** » Fri Aug 26, 2022 7:44 am

Hello,

Yes, the approach I suggested in my last post would have its challenges as you'd need to run the timer refresh routine in the framed chart page, not the container where you have it now. Using TeeChart NET's Javascript export externalcode would be the way to do that, but would take a bit of thinking through.

I have tried your test format on three different browsers. Internet Explorer is flicker free, as is, in tests here, Mozilla-Firefox, but Chrome flickers between frame updates. It's a known condition, not related to TeeChart (see https://stackoverflow.com/questions/192 ... age-reload).

I have tried a few different techniques to resolve the flicker but haven't succeeded yet.

I will post a follow-up here with further comments if I'm able to make progress.

Regards,
Marc Meumann

Post by » Fri Aug 26, 2022 2:01 pm

Marc wrote: ↑
Fri Aug 26, 2022 7:44 am
Hello,

Yes, the approach I suggested in my last post would have its challenges as you'd need to run the timer refresh routine in the framed chart page, not the container where you have it now. Using TeeChart NET's Javascript export externalcode would be the way to do that, but would take a bit of thinking through.

I have tried your test format on three different browsers. Internet Explorer is flicker free, as is, in tests here, Mozilla-Firefox, but Chrome flickers between frame updates. It's a known condition, not related to TeeChart (see https://stackoverflow.com/questions/192 ... age-reload).

I have tried a few different techniques to resolve the flicker but haven't succeeded yet.

I will post a follow-up here with further comments if I'm able to make progress.

Regards,
Marc Meumann

Hello Marc,

Thank you, I am wistfully waiting for your solution (Although I will also keep searching)

Javascript / HTML5 teechart flickering/blinking problem

Javascript / HTML5 teechart flickering/blinking problem

Re: Javascript / HTML5 teechart flickering/blinking problem

Re: Javascript / HTML5 teechart flickering/blinking problem

Re: Javascript / HTML5 teechart flickering/blinking problem

Re: Javascript / HTML5 teechart flickering/blinking problem

Re: Javascript / HTML5 teechart flickering/blinking problem

Re: Javascript / HTML5 teechart flickering/blinking problem

Re: Javascript / HTML5 teechart flickering/blinking problem

	Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP)
	Please read our Bug Fixing Policy