Javascript / HTML5 teechart flickering/blinking problem

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
Newbie
Newbie
Posts: 3
Joined: Mon Feb 14, 2022 12:00 am

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>

Yeray
Site Admin
Site Admin
Posts: 9174
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Javascript / HTML5 teechart flickering/blinking problem

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.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Newbie
Newbie
Posts: 3
Joined: Mon Feb 14, 2022 12:00 am

Re: Javascript / HTML5 teechart flickering/blinking problem

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?

Newbie
Newbie
Posts: 3
Joined: Mon Feb 14, 2022 12:00 am

Re: Javascript / HTML5 teechart flickering/blinking problem

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?

Marc
Site Admin
Site Admin
Posts: 1082
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: Javascript / HTML5 teechart flickering/blinking problem

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
Steema Support

Post Reply