PDA

View Full Version : [CLOSED] Question about chart render speed



feanor91
May 29, 2012, 1:59 PM
Hello

I have a speed problem.

I have 11 charts to show in one page.

My charts are code bhind generated. I get theirs structure in a database. this part take about 4 seconds to run.

When Ajax request is ended, the browser (Chrome, in that case) take about 30 seconds to render the window.

Question : what I can do to accelerate the javascript part?

Daniil
May 29, 2012, 5:13 PM
Hi,

Is there the same speed in all browsers?

Well, I am afraid, 11 charts are too many to get it working fast. Charts uses SVG which is, as far as I can know, heavy-weight thing by itself.

Do you really need to render/load all of them initially? I would render/load some of them on user demand. I think it's a single reliable way to get significant performance improvement.

Probably, switching off animation could give some performance improvement.

Daniil
May 29, 2012, 6:21 PM
Another thing - how many records do you bind to the Charts Stores?

feanor91
May 30, 2012, 7:27 AM
Hello

Yes, it's almost the same speed exept in IE where it is even more slower, but, it's IE...Unfortunaltly, the default browser in the society is IE, of course...

About number of charts, if I had choice, I will not show 11 in one time, but I have not. At this point, do you think there will be a way to show one chart, by one chart, but in the same window and at the end, having the 11 shown? Knowing that my charts are code bhing generated and I call the code behind method on the click event of the desktop item menu?

About data binding, for now, I use an already load store the one I use to show data in the grid I have in another window. For now, I have about 15 rows of 150 fields (data, different comments on data...), but the main point in creating the chart is execution of the javascript when returning from code behind method. Thisp part take about 4 seconds. The rest is the javascript execution. And I could not show a progress bar during this time because javascript is not multithreaded, so, I show it during the code behind execution and after that, we see a beautiful progress bar blocked because the javascript returned is being executed. I look about WebWorkers, but it is not implemented in IE 7, of course...(I hate IE)

feanor91
May 30, 2012, 8:44 AM
Is there a way to inform user when returning from code behind call on DirecEvent?

I think of the possibility to inform user that the browser is working to construct the window, like showing a mesage box, like the "success" thing on HTTP request?

Daniil
May 30, 2012, 11:54 AM
About number of charts, if I had choice, I will not show 11 in one time, but I have not. At this point, do you think there will be a way to show one chart, by one chart, but in the same window and at the end, having the 11 shown? Knowing that my charts are code bhing generated and I call the code behind method on the click event of the desktop item menu?

Well, I think it's possible to render one chart by another. But I'm not sure how it will help as you need to show all them at once.


Is there a way to inform user when returning from code behind call on DirecEvent?

I think of the possibility to inform user that the browser is working to construct the window, like showing a mesage box, like the "success" thing on HTTP request?

There is DirectEvent Success you could use.

feanor91
May 30, 2012, 11:58 AM
There is DirectEvent Success you could use.

I call a javascript function into the success parameter?

Daniil
May 30, 2012, 12:07 PM
Yes, it is client side thing where you can use JavaScript.

By the way, DirectEvent After looks more suitable for you, because it is executed before executing JavaScript from a response.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void TestDirectEventHandler(object sender, DirectEventArgs e)
{
X.Msg.Alert("DirectEvent", "Hello from Server!").Show();
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Button runat="server" Text="Click me">
<DirectEvents>
<Click OnEvent="TestDirectEventHandler" After="alert('After');" />
</DirectEvents>
</ext:Button>
</body>
</html>

feanor91
May 30, 2012, 12:24 PM
Thanks, I will implement.

Another question :

Is there a way to execute the directevent to draw one chart, then call again to draw the second, then the tird and so on?

Means to make multiple call to the event so each chart will be show one after the other?

In fact the problem is not really it takes some time, but mainly, when the javascript is executed, the guy in front of the screen see nothing on it.

feanor91
May 30, 2012, 12:33 PM
After is not good, it seems to be called immediatly after the event is fired, hiding my wait window during execution of code behind.

Success not good too, the alert is shown just before the window will be shown (so too late to be usefull).

feanor91
May 30, 2012, 3:55 PM
Perhaps I think to a way to make chart appears one by one:

First, I call he directevent from my menu click event to create the panel that will contain chart into the window. Rerurn from code behind, the window is shown with all the panels but empty, this part is far

Second, in the success function of the directevent, I call a javascript function that will construct charts one by one.

Problem :
1-How could I call a code behind method from javascript (like directevent does)?
2-How could I refresh my panel after adding charts into?
3-How could I get my panel from javascript? I try from code behind, but my windw contains 0 item.

Daniil
May 30, 2012, 4:57 PM
After is not good, it seems to be called immediatly after the event is fired, hiding my wait window during execution of code behind.

Well, an After handler is executed just after a browser gets a DirectEvent response. So, it is executed before parsing a response. Parsing a response executes the scripts in that response. A Success handler is executed just after parsing a response, i.e. after execution the scripts of that response.

Well, there is no DirectEvent handler which would be executed during parsing a response.



1-How could I call a code behind method from javascript (like directevent does)?

I would use DirectMethods.



2-How could I refresh my panel after adding charts into?

Well, I don't think you will need to refresh that panel. After adding a Chart from server its container should be re-layouted.



3-How could I get my panel from javascript?

Well, by its client id.



I try from code behind, but my windw contains 0 item.

How do you add that Panel to the Window?

feanor91
May 30, 2012, 5:32 PM
OK, I will try to handle that tomorrow.

I add my panel like that :


mypanel.render(myWindow)

myWindow is the window created in my aspx page into a module. I have not my code here, if you need it, I will post tomorrow.

feanor91
May 31, 2012, 7:25 AM
Hello

I begin to work on the solution I set yesterday.

I have manage to call the directmethod, it's very easy, but I have problem for geting the panel to add the chart into.

In Javascript

Ext.getCmp("Panel name"))

works well but if I try to pass the panel to my direct methof I get an error message :


call stack size exeeded

Well, OK, I think panel object too large to be passed into a parameter, well no matter.

I do that in code behind :


Dim MyPanel As Ext.Net.Panel = Ext.Net.X.GetCmp(myPanelID)

Bu myPanel object contains nothing...I check my panelID and it's OK. So, what can I do to get my panels?

EDIT:
OK, as I have made a ruse to keep my panel into the code behind (I store a list of panel into as session variable, not a good way to deal with, but it works), I can get the panel to add my chart, but even if I make a doLayout on the panel, the chart did not appear into the panel.

Daniil
May 31, 2012, 2:28 PM
I add my panel like that :


mypanel.render(myWindow)

myWindow is the window created in my aspx page into a module. I have not my code here, if you need it, I will post tomorrow.

Well, it adds/renders a panel to the Window, but does not add that panel to Windows Items collection. Also it is not recreated automatically during another page request. Therefore you can access it on server during another request.



works well but if I try to pass the panel to my direct methof I get an error message :

call stack size exceeded

Well, OK, I think panel object too large to be passed into a parameter, well no matter.


Not just large, a recursion occurs during its encoding because its contains "hierarchy" links (to the owner container, to the child items).

Generally, you should need on server a Panel client id only.



I do that in code behind :


Dim MyPanel As Ext.Net.Panel = Ext.Net.X.GetCmp(myPanelID)

Bu myPanel object contains nothing...I check my panelID and it's OK.

Please read some details about X.GetCmp.
http://forums.ext.net/showthread.php?19266&p=83025&viewfull=1#post83025



So, what can I do to get my panels?

EDIT:
OK, as I have made a ruse to keep my panel into the code behind (I store a list of panel into as session variable, not a good way to deal with, but it works), I can get the panel to add my chart

I think you need only Panel id on server. Please investigate the following example. You can pass just a client id to the Render method.
http://examples1.ext.net/#/XRender/Advanced/Parent_Add_Children/


, but even if I make a doLayout on the panel, the chart did not appear into the panel.

I am not 100% sure how you render charts and how the layout looks. Could you provide a sample?

feanor91
May 31, 2012, 3:00 PM
Hello


Well, it adds/renders a panel to the Window, but does not add that panel to Windows Items collection. Also it is not recreated automatically during another page request. Therefore you can access it on server during another request.

OK, is adding


myWindow.Items.add(myPanel)

will resolve that?


Not just large, a recursion occurs during its encoding because its contains "hierarchy" links (to the owner container, to the child items).

Generally, you should need on server a Panel client id only.


OK


Please read some details about X.GetCmp.
http://forums.ext.net/showthread.php...ll=1#post83025

OK, if I undestand well, getcmp is not suitable for what I want to do, right?, by the way, I will try the syntax in that post to see what happened.


I think you need only Panel id on server. Please investigate the following example. You can pass just a client id to the Render method.
http://examples1.ext.net/#/XRender/A..._Add_Children/

Yes, I think that too, but this


myObject.render(id, RenderMode.RenderTo)

act as the same way, that everything I try: the chart is not drawn on the page after return of the directmethod.


I am not 100% sure how you render charts and how the layout looks. Could you provide a sample?

I realy don't know, the code is not very complicated, but so intricated into my project, that providing a sample could take a very long time. By the way, here a look of my window:

4312

I don't know if it could help.

I will try tomorrow to build an example.

Daniil
May 31, 2012, 3:38 PM
OK, is adding


myWindow.Items.add(myPanel)

will resolve that?


Do you call it during DirectMethod? If yes, it will be absent in another DirectMethod. So, I guess, it won't help in your case.



OK, if I undestand well, getcmp is not suitable for what I want to do, right?


Yes, I think it is not so useful in your scenario.



Yes, I think that too, but this


myObject.render(id, RenderMode.RenderTo)

act as the same way, that everything I try: the chart is not drawn on the page after return of the directmethod.


I think you should use

RenderMode.AddTo
istead of

RenderMode.RenderTo

feanor91
May 31, 2012, 4:09 PM
Do you call it during DirectMethod? If yes, it will be absent in another DirectMethod. So, I guess, it won't help in your case.

Let clarify: you means that adding a control to a window like that will not allow me to get that conteol later in code behind?


I think you should use
1
RenderMode.AddTo
istead of
1
RenderMode.RenderTo

OK, I wll try that.

Daniil
May 31, 2012, 6:58 PM
Let clarify: you means that adding a control to a window like that will not allow me to get that conteol later in code behind

Yes. If, sure, you don't recreate the control manually during each request.

feanor91
May 31, 2012, 7:48 PM
Well just to be clear, if I understand we can create control in code behind. but. once created we couldn't play with it, in other direct method? So, why could I get the window belonging to a module and why I couldn't get a panel belonging to that window? Something I did not understand here .

Daniil
May 31, 2012, 8:24 PM
If some control is created in Page_Load and recreated each request or that control is created in markup, you can access that control in any DirectEvent or DirectMethod.

If some control is created/rendered during some DirectEvent or DirectMethod and is not recreated manually (neither Ext.NET or ASP.NET don't recreate any controls automatically), you can't access that control during another DirectEvent or DirectMethod.

Hope this helps.

feanor91
Jun 01, 2012, 5:20 AM
Hi Daniil

Yes, it helps to understand how things works, but not to resolve my problem, and, as you say, I think I have no solution to make the way I want. For me, is fine, but it's my customer that will not apreciated, but, it's to me to explain that I have no other soluions.

Thanks a lot.

Daniil
Jun 01, 2012, 9:53 AM
as you say, I think I have no solution to make the way I want.

Why not? I think you are on the right direction.

By the way, look at the "Load Tab from the Page (persist current items)" in this example.
http://examples2.ext.net/#/Loaders/Component/Direct_Method/

I think you could implement your requirement in a similar way. I mean rendering Charts step by step.

feanor91
Jun 01, 2012, 10:03 AM
Hello

You'r right I work on it since I begin to work and I have manage to achieve the point. Instead of adding empty panel then adding chart once rendered, I add all the panel with charts in it one by one. It works, exept I can't regulate the return from direct method and the charts (panel in fact) did not appear in the order I send to code behind but one here, another here and so on until all my charts are shown.

I will present that to my customer to see what he prefer.

But, I have always a problem. In a combobox we can choose to show different charts (from another group of chart), and I cannot remove charts already shown from the window, I try (in javascript as the called to the method is made into javascript) window.removeAll, window.remove(idChart), Ext.getCmp(idChart).hide(), but nothing works. Meanwhile, Ext.getCmp(idChart) give me the good element, so, any idea? I also try to do a window.doLayout but no way.

Daniil
Jun 01, 2012, 10:59 AM
But, I have always a problem. In a combobox we can choose to show different charts (from another group of chart), and I cannot remove charts already shown from the window, I try (in javascript as the called to the method is made into javascript) window.removeAll, window.remove(idChart), Ext.getCmp(idChart).hide(), but nothing works. Meanwhile, Ext.getCmp(idChart) give me the good element, so, any idea? I also try to do a window.doLayout but no way.

It is hard to say without an example to reproduce. If

Ext.getCmp(idChart)
returns a correct object, then

window.remove(idChart)
should work.

If, certainly, that chart is within the window items.

feanor91
Jun 01, 2012, 11:42 AM
Ok,

Look, I use that from code behind, because I have the same problem that panel did not removed automaticaly (yesterday it was, but today not, I mus do something wrong, but no matter) :



Dim LstChartPanel As List(Of Ext.Net.Panel) = Session("LstChartPanel")
If Not LstChartPanel Is Nothing Then
For i As Integer = 0 To LstChartPanel.Count - 1
myWindow.Remove(LstChartPanel(i))
Next
End If
LstChartPanel = New List(Of Ext.Net.Panel)


This work

but from Javascript using id because I have not the object, of course, it doesn't . LstChartPanel is created at first run of my function.

To add panel to myWindow, I use that :


LstChartPanel(i).Render(myWindow, RenderMode.AddTo)

But, for no, I have other things to deal with, I have to render chart clicked on into an individual window. As I Know hot to do now, it must be not so difficult.

I will dig into that, if my customer really want to use the javascript side, else, the server side part works very well.

By the way, very thanks to help.

One more question: is there a way to get succes function in direct method call or to call a direct method and wait all actions conduct by their execution to be fulffiled (wait javascript return by the method to be executed before continuing) like that (pseudo code):



for i=a to b
call direct method and wait all action fulfilled
next


acting this way will made my chart appears in good order I think.

Daniil
Jun 01, 2012, 4:19 PM
for i=a to b

call direct method and wait all action fulfilled
next




Well, there is no such functionality.

You should set up a success DirectMethod handler to call another DirectMethod. Something like this.

App.direct.TestDirectMethod({
success : function () {
App.direct.TestDirectMethod();
}
});

feanor91
Jun 04, 2012, 7:14 AM
OK, I will check that, but it will not assume the functionnality I want, I will think about that.

feanor91
Jun 11, 2012, 1:38 PM
for i=a to b

call direct method and wait all action fulfilled
next




Well, there is no such functionality.

You should set up a success DirectMethod handler to call another DirectMethod. Something like this.

App.direct.TestDirectMethod({
success : function () {
App.direct.TestDirectMethod();
}
});

Hello

Here the call to my direct method :


App.direct.BuildPanelByDirectMethod( Title, left, top, ChartName, panWidth, panHeight );

How can I implement the success function in that case. I try in front of Title parameter and at the end of the fuction but it did not work in both cases.

Daniil
Jun 11, 2012, 2:51 PM
Just pass a DirectMethod config after all parameters.

Example

App.direct.SomeDirectMethod(param1, param2, ..., paramN, {
success : function () {

}
});