jQWidgets Forums

jQuery UI Widgets Forums Chart Very slow with many Chart PIE on the same page

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • Stephen
    Member

    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’);
    });


    Stephen
    Member

    here the HTML with div


    Stephen
    Member

    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 Stoev
    Keymaster

    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


    Stephen
    Member

    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 Stoev
    Keymaster

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.