jQWidgets Forums
jQuery UI Widgets › Forums › Chart › Very slow with many Chart PIE on the same page
Tagged: chart
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 4 months ago.
-
Author
-
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’);
});here the HTML with div
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>
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 chartvar 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 StoevjQWidgets Team
http://www.jqwidgets.comThank’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.
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 StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.