jQWidgets Forums

Tagged: chart, jqxChart, performance

This topic contains 2 replies, has 2 voices, and was last updated by swarren 10 years, 10 months ago.

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

Author

Performance Problem When Trying to Upgrade to 3.4 Posts
July 2, 2014 at 8:49 pm Performance Problem When Trying to Upgrade to 3.4 #56687

swarren
Participant

I’m trying to upgrade my site to 3.4 from 3.1 and I have a page that displays several jqxCharts (4 of them) and the page takes forever to load after switching to 3.4. The code below takes upwards of 15 seconds per graph when run with 3.4 but usually less than a second per graph when run with 3.1. I’ve tried reducing the code further but this seems like the smallest I can make it and have it still run. Any suggestions on how to improve this?

<html>
<body>
<div class=”test”>
[{“No”:0,”No Answer”:0,”Yes”:100,”data”:”2013-03″},{“No”:0,”No Answer”:0,”Yes”:100,”data”:”2013-04″},{“No”:14.285714285714,”No Answer”:14.285714285714,”Yes”:71.428571428571,”data”:”2013-05″},{“No”:0,”No Answer”:8.3333333333333,”Yes”:91.666666666667,”data”:”2013-06″},{“No”:0,”No Answer”:0,”Yes”:100,”data”:”2013-07″},{“No”:0,”No Answer”:20,”Yes”:80,”data”:”2013-08″},{“No”:0,”No Answer”:14.285714285714,”Yes”:85.714285714286,”data”:”2013-09″},{“No”:0,”No Answer”:0,”Yes”:100,”data”:”2013-10″},{“No”:20,”No Answer”:0,”Yes”:80,”data”:”2013-11″},{“No”:0,”No Answer”:20,”Yes”:80,”data”:”2013-12″},{“No”:0,”No Answer”:20,”Yes”:80,”data”:”2014-01″},{“No”:0,”No Answer”:0,”Yes”:100,”data”:”2014-02″},{“No”:0,”No Answer”:0,”Yes”:100,”data”:”2014-03″},{“No”:12.5,”No Answer”:0,”Yes”:87.5,”data”:”2014-04″},{“No”:0,”No Answer”:0,”Yes”:100,”data”:”2014-05″},{“No”:0,”No Answer”:33.333333333333,”Yes”:66.666666666667,”data”:”2014-06″}]
</div>

<link rel=”stylesheet” href=”/jqwidgets-ver3.4.0/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”/jqwidgets-ver3.4.0/scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”/jqwidgets-ver3.4.0/jqwidgets/jqx-all.js”></script>

<script>
$(function(){
console.time(‘startup’);
var element = $(‘.test’);
var data = $.parseJSON(element.text());

var source = {
datatype:’array’,
localdata:data,
datafields:[
{name: ‘No’},
{name: ‘No Answer’},
{name: ‘Yes’},
{name: ‘data’},
],
};

var dataAdapter = new $.jqx.dataAdapter(source);

settings = {
source:dataAdapter,
categoryAxis:{
dataField: ‘data’,
},
seriesGroups:[
{
type: ‘line’,
valueAxis:
{
unitInterval: 5,
displayValueAxis: true,
tickMarksColor: ‘#888888’
},
series:[
{dataField: ‘No’},
{dataField: ‘No Answer’},
{dataField: ‘Yes’},
],
}
],
},

console.timeEnd(‘startup’);
console.time(‘jqxChart’);
element.jqxChart(settings);
console.timeEnd(‘jqxChart’);
});
</script>

</body>

</html>

July 3, 2014 at 7:24 am Performance Problem When Trying to Upgrade to 3.4 #56707
Dimitar
Participant
Hello swarren,

Please try the following, updated, version of your code:
```
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(function () {
            console.time('startup');
            var element = $('.test');
            var data = $.parseJSON(element.text());

            var source = {
                datatype: 'array',
                localdata: data,
                datafields: [{
                    name: 'No'
                }, {
                    name: 'No Answer'
                }, {
                    name: 'Yes'
                }, {
                    name: 'data', type: 'date'
                }, ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            settings = {
                source: dataAdapter,
                categoryAxis: {
                    dataField: 'data',
                    type: 'date',
                    baseUnit: 'month'
                },
                seriesGroups: [{
                    type: 'line',
                    valueAxis: {
                        unitInterval: 5,
                        displayValueAxis: true,
                        tickMarksColor: '#888888'
                    },
                    series: [{
                        dataField: 'No'
                    }, {
                        dataField: 'No Answer'
                    }, {
                        dataField: 'Yes'
                    }]
                }]
            };

            console.timeEnd('startup');
            console.time('jqxChart');
            element.html("");
            element.jqxChart(settings);
            console.timeEnd('jqxChart');
        });
    </script>
</head>
<body>
    <div class="test" style="width: 500px; height: 300px;">
        [{"No":0,"No Answer":0,"Yes":100,"data":"2013-03"},{"No":0,"No Answer":0,"Yes":100,"data":"2013-04"},{"No":14.285714285714,"No Answer":14.285714285714,"Yes":71.428571428571,"data":"2013-05"},{"No":0,"No Answer":8.3333333333333,"Yes":91.666666666667,"data":"2013-06"},{"No":0,"No Answer":0,"Yes":100,"data":"2013-07"},{"No":0,"No Answer":20,"Yes":80,"data":"2013-08"},{"No":0,"No Answer":14.285714285714,"Yes":85.714285714286,"data":"2013-09"},{"No":0,"No Answer":0,"Yes":100,"data":"2013-10"},{"No":20,"No Answer":0,"Yes":80,"data":"2013-11"},{"No":0,"No Answer":20,"Yes":80,"data":"2013-12"},{"No":0,"No Answer":20,"Yes":80,"data":"2014-01"},{"No":0,"No Answer":0,"Yes":100,"data":"2014-02"},{"No":0,"No Answer":0,"Yes":100,"data":"2014-03"},{"No":12.5,"No Answer":0,"Yes":87.5,"data":"2014-04"},{"No":0,"No Answer":0,"Yes":100,"data":"2014-05"},{"No":0,"No Answer":33.333333333333,"Yes":66.666666666667,"data":"2014-06"}]
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
July 3, 2014 at 8:57 pm Performance Problem When Trying to Upgrade to 3.4 #56754

swarren
Participant

Adding the baseUnit property fixed the problem. Thanks!
Author

Posts

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

You must be logged in to reply to this topic.