Several days/channels graphs are generated slooooowly

[inpelsa]

My 2 cents to speed you up:

What makes it slow is not graph drawing: is javascript populating HTML-Table data for the 2nd and following days.

Example: graph 30 days 10 channels takes 1:30 on my computer

– Querying each data day takes 0.5 seconds: 1 data query of 30 days will save ~15 seconds, but as this will send data table already created it will show inmediatelly at server’s costs.

If sending full graph data is too complex I see those improvements:

On DIAG.JS, function AppendDiagDataTable(diagData) :

        var rows = table.children(":first").children("tr"); // tbody, tr
        if (rows.length == diagData.DiagCnt + 1) {
            var rowTime = rows.eq(0); // время
	    var buffertest ="";
	    console.log(GetNowDT() + " mark loop 1 IN " + diagData.PtCnt);
            for (var j = 0; j < diagData.PtCnt; j++) {
		buffertest=buffertest + $("<td>").text(Diag.TimeToStr(diagData.DiagTimeArr[j], TableTimeOptions));
            }
	    console.log(GetNowDT() + " mark loop 1 OUT " );
            rowTime.append(buffertest);
	    console.log(GetNowDT() + " mark loop 1 after append ");

	    buffertest ="";
	    console.log(GetNowDT() + " mark loop 2 IN " + diagData.DiagCnt);
            for (var i = 0; i < diagData.DiagCnt; i++) {
                var rowVal = rows.eq(i + 1); // значения
                var trend = diagData.DiagDataArr[i].TrendDataArr;

                for (var j = 0; j < diagData.PtCnt; j++) {
                    var dataItem = trend[j];
		    buffertest=buffertest + $("<td>")
                        .css("color", dataItem[Diag.ColorInd])
                        .append($("<div>").text(dataItem[Diag.DisplayValInd]));
                }
            }
	    console.log(GetNowDT() + " mark loop 2 OUT " );
            rowVal.append(buffertest);
	    console.log(GetNowDT() + " mark loop 2 after append ");
	    buffertest ="";

        }

– If you use a buffer instead of .append each loop you save ~15 seconds

– Loop 1 takes about 15 seconds (adds time data?)
– Loop 2 takes about 45 seconds (sets value data and color to text data when you scroll over graph?)

I will try to remove Loop 2 to be able to work.

Maybe creating data table in a different way/technology or optimizing functions used inside loops will improve it enough.

Bye!

[inpelsa]

Well, I didn’t see understood it before…

                    AppendDiagData(diagData);
                    AppendDiagDataTable(diagData);

That second whole function is just to show the data table when you press the “show data” button.

I don’t usually need it, I will comment that function. Now it takes just 20 seconds instead of 1:30.

Anyway, implementing those improvements will make it much faster 🙂

[Mikhail]

Thanks!

If somebody are able to compare the charting speed with other SCADA software, it would be very interesting and useful.

[inpelsa]

Sure, here you have:

It’s and old SCADA system called Freelance (1990) we use here.
It generates all graphs instantly (5 channels, 3 weeks of data, samples every 5 seconds) but most probably it will use some kind of grouping when zooming out.

I will take a look to the Schneider Electric IGSS demo but not sure it keeps data for so long time.

[Mikhail]

Probably it keeps all the data in a cache.
Are the client and the server on the one PC?

[inpelsa]

Yes, but even without cache and that amount of data… it can be plotted quite fast.

The problem is AppendDiagDataTable(diagData) (does somebody use it?) and receiving data day per day: after removing that function everything works much better.

just try it, send 30 days data to the graph and you will see it plotted in a second as it does when de-zooming.

[Mikhail]

When I start a work of porting the chart component to the new web app, I will do an optimization. Thank you for the useful information, you saved my time.

[Author]

Posts