Hi,

Thank you so much for your quick response,

Please note that, we had downloaded these references into JS files, and include these files as a local reference in project, how we use those local references into loader like as your suggested example? We need to download only required resources rather all JS files for fast UI rendering. Local downloaded files are attached. Please prepare a sample application, its very helpful for us.

Thanks,

Sufyan

Hi,

Let me rephrase my issue, Now we use all infragistics references from local directory. 

Currently local references have 3.7 mb data size, Its very time taking for view rendering due to speed of internet in different countries and limited data package in mobile devices, Is there any way to reduce the reference size in kilo bites or only download required resources rather complete references? We need view rendering very fast with in second. Please modify my sample application, its really very helpful for me.

Thanks,

Sufyan

Hi Hristo,

I didn't understand what resources and dependencies of infragistics are used in chart. I think you refer this thread at multiple times and i mentioned again and again i didn't understand this thread how to implement chart dependencies, You mentioned in your post you may not use it as usual, because it is a bit tricky when working in an angular application. I am totally fail to complete it. Please help me. It would be nice if you change my sample application with your suggestions. its really very helpful for us. Our view loading time must be reduced with in second.

My sample application is attached with locally used references in previous post.

We are looking for a positive response.

Any update?

Hello Abu,

Please find the attached modified sample that benefits from the igLoader with a file name Chart_mod.html. You can see that the size of the loaded resources is less, so I believe this should improve the performance of your app. I have also included your original sample so that you can compare.

Please note:

1) Both samples load resources from the CDN, so that you can easily check the size of the resources via the browser developer tools and it will be more close to real life scenario when users browses will also need to download those resources and will not load them from the local machine.

2) The modified sample load all resources for the igDataChart by using a mask:

            resources:  "igDataChart.*," + // line 427

however you can further diminish the size of the loaded resources by loading aonly those resources for the igDataChart that you use in your app:

            resources: 'igDataChart.RangeCategory.Scatter'+  // line 427

3) I have commented line 625, because I got error. I think you will be able to fix it.

I hope this meets your requirements. Please let me know if you have further questions on the matter.

Hi Abu,

I am sorry for late response. As I said you can further diminish the amount of downloaded resources by specifying only the features you need. In your case this will look like this:

        $.ig.loader({
            scriptPath: "http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/",
            cssPath: "http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/",
            resources:  "igDataChart.Category.Financial.Annotation," +
                        "igniteui-angular"    
        });

However the DOMLoaded time and time spent for the page loading as a whole will still be higher, and this is due to those reasons:

1) igLoader makes a request for each css and js file that needs to be loaded. The more features the widget has, the more requests made.

2) Browsers work in a way that they wait one js file to be loaded before loading next one. Also, no more than 2 requests at the same domain are allowed simultaneously.

As you see this will decrease loading time. First a request is made for the base igDataChart widget and once it is loaded a new request will be made for the file with categoryChart, then comes the FinancialChart and so on.

What you can do to diminish the delay time in your sample app is to move the <Script> tag with all your code above the <div class="container-fluid">. Please let me know if you have further questions on the matter.

Any update?

Hi,

Thank you for your feedback ! I have noticed this issues and will update the sample accordingly. Will be able to do this today and when done I will update this thread.