Very slow with many Chart PIE on the same page

[StephenMember]

I have to show at least 9 Chart PIE on the same page and this is very slow to load. I use a loop in the database. Is there a way to improve the speed?

See code bellow:

Nota: 9999 is equal to increment number of the loop

$(document).ready(function () {
// prepare chart data
var source = [
{ percentpietext: ‘Réel’, auctions: 15},
{ percentpietext: ‘Restant’, auctions: 85}
];

var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error);} });

// prepare jqxChart settings
var settings = {
title: “Chart title”,

description: “”,
enableAnimations: false,
showLegend: true,
legendPosition: { left: 0, top: 10, width: 60, height:60 },
padding: { left: 2, top: 2, right: 2, bottom: 2 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 2 },
source: dataAdapter,
seriesGroups:
[
{
type: ‘pie’,
showLabels: false,
series:
[
{
dataField: ‘auctions’,
displayText: ‘percentpietext’,
labelRadius: 60,
initialAngle: 90,
radius: 40,
centerOffset: 0,
formatSettings: { sufix: ‘%’, decimalPlaces: 0 }
}
]
}
]
};
// setup the chart
$(‘#jqxChart9999’).jqxChart({borderLineColor: ‘#FFFFFF’});
$(‘#jqxChart9999’).jqxChart(settings);
// setup the chart
var myChart9999 = $(‘#jqxChart9999’).jqxChart(settings);
myChart9999.jqxChart(‘addColorScheme’, ‘myScheme9999’, [‘#EEEEEE’, ‘#CACACA’]);
myChart9999.jqxChart(‘colorScheme’, ‘myScheme9999’);
myChart9999.jqxChart(‘refresh’);
});

[StephenMember]

here the HTML with div

[StephenMember]

Portion of html code does not appear on the post. In summary, I make a loop with the loop inside the script and div. It works very well except that it is very long when there are 4 or 5 more divs.

    <div id='host<%=loopgraph%>' style="margin: 0px; margin-bottom:10px; padding:0px; width: 100px; height: 140px; float:left; cursor:pointer;" onclick="parent.popupps('jqwidgets/dashboard_support_pop.asp?iprocessus=<%=processusasker%>&iprocsupport=<%=loopgraph%>','Support aux processus','0','800','500')">
        <div id='jqxChart<%=loopgraph%>' style="width:95px; height: 140px; position: relative; left: 0px;top: 0px;"></div>
    </div>  

[Peter StoevKeymaster]

Hi Stephen,

From your code, you re-render each Chart several additional times which are not necessary. See below:

$(‘#jqxChart9999′).jqxChart(settings); - create chart
// setup the chart
var myChart9999 = $(‘#jqxChart9999′).jqxChart(settings); - This one renders it again. 
myChart9999.jqxChart(‘addColorScheme’, ‘myScheme9999′, ['#EEEEEE', '#CACACA']); 
myChart9999.jqxChart(‘colorScheme’, ‘myScheme9999′);  - This one renders it again.
myChart9999.jqxChart(‘refresh’); - This one renders it again

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[StephenMember]

Thank’s Peter,

but I have many ‘DIV’ with different ID like … jqxChart1, jqxChart2, jqxChart3, jqxChart4, etc …

Exemple:

myChart9999.jqxChart(‘colorScheme’, ‘myScheme9999′);

9999 is equal to the ID of the scheme.

[Peter StoevKeymaster]

Hi Stephen,

The idea in my post is that there are refreshes that aren’t necessary. For example, if you have a page with 30 Charts and you do 2 unnecessary refreshes, it would be the same as you have a page with 90 Charts. See the comments next to each line in my previous post.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts