jQWidgets Forums

jQuery UI Widgets Forums Chart Performance issue on iPad

Tagged: 

This topic contains 3 replies, has 3 voices, and was last updated by  Peter Stoev 12 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Performance issue on iPad #9036

    arudmik
    Member

    We are creating 2 stackedcolumn and 1 pie chart on a tabbed page. When the user clicks the second tab we generate a table of information using jquery. The problem we are experiencing on the iPad is that when the charts are rendered 1st and the user clicks the 2nd tab it takes about 17 seconds before our table renders. If we generate 1 chart then the table rendering takes 12 seconds If we do not display the charts, our table is generated (using just jquery) and renders in sub-second time. Is there any advice you can give as to why this might be happening. It will take some time to create a standalone test case.

    The code for the charts is below.

    /*
    * Habits Chart
    */
    // prepare chart data as an array
    var habitData = [
    { habit: ‘Character’, Introduce: 90, Develop: 80, Extend: 60 },
    { habit: ‘Leader’, Introduce: 85, Develop: 75, Extend: 65 },
    { habit: ‘Learner’, Introduce: 60, Develop: 40, Extend: 15 },
    { habit: ‘Quality’, Introduce: 70, Develop: 65, Extend: 45 },
    { habit: ‘Independent’, Introduce: 50, Develop: 20, Extend: 20 },
    { habit: ‘Collaborates’, Introduce: 30, Develop: 20, Extend: 10 },
    { habit: ‘Thinker’, Introduce: 60, Develop: 45, Extend: 0 }
    ];

    // prepare jqxChart settings
    var habitSettings = {
    title: “7 Habits”,
    //description: “The Habits of a Master Learner”,
    enableAnimations: false,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: habitData,
    categoryAxis:
    {
    text: ‘Category Axis’,
    textRotationAngle: 0,
    dataField: ‘habit’,
    showTickMarks: true,
    tickMarksInterval: 1,
    tickMarksColor: ‘#888888’,
    unitInterval: 1,
    showGridLines: false,
    gridLinesInterval: 1,
    gridLinesColor: ‘#888888’,
    axisSize: ‘auto’
    },
    colorScheme: ‘scheme05’,
    seriesGroups:
    [
    {
    type: ‘stackedcolumn’,
    useGradient: false,
    columnsGapPercent: 100,
    seriesGapPercent: 5,
    valueAxis:
    {
    unitInterval: 20,
    minValue: 0,
    maxValue: 300,
    displayValueAxis: true,
    description: ‘Time in minutes’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’
    },
    series: [
    { dataField: ‘Introduce’, displayText: ‘Introduce’ },
    { dataField: ‘Develop’, displayText: ‘Develop’ },
    { dataField: ‘Extend’, displayText: ‘Extend’ }
    ]
    }
    ]
    };

    /*
    * Keys Chart
    */
    // prepare chart data as an array
    var keyData = [
    { key: ‘Identity’, Understand: 70, Apply: 60, Master: 50 },
    { key: ‘Drive’, Understand: 95, Apply: 85, Master: 60 },
    { key: ‘Sight’, Understand: 60, Apply: 50, Master: 40 },
    { key: ‘Design’, Understand: 30, Apply: 10, Master: 5 },
    { key: ‘Build’, Understand: 80, Apply: 60, Master: 40 }
    ];

    // prepare jqxChart settings
    var keySettings = {
    title: “5 Keys”,
    //description: “Becoming a Master Designer/Visionary”,
    enableAnimations: false,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: keyData,
    categoryAxis:
    {
    text: ‘Category Axis’,
    textRotationAngle: 0,
    dataField: ‘key’,
    showTickMarks: true,
    tickMarksInterval: 1,
    tickMarksColor: ‘#888888’,
    unitInterval: 1,
    showGridLines: false,
    gridLinesInterval: 1,
    gridLinesColor: ‘#888888’,
    axisSize: ‘auto’
    },
    colorScheme: ‘scheme04’,
    seriesGroups:
    [
    {
    type: ‘stackedcolumn’,
    useGradient: false,
    columnsGapPercent: 100,
    seriesGapPercent: 5,
    valueAxis:
    {
    unitInterval: 20,
    minValue: 0,
    maxValue: 300,
    displayValueAxis: true,
    description: ‘Time in minutes’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’
    },
    series: [
    { dataField: ‘Understand’, displayText: ‘Understand’ },
    { dataField: ‘Apply’, displayText: ‘Apply’ },
    { dataField: ‘Master’, displayText: ‘Master’ }
    ]
    }
    ]
    };

    // prepare identity chart
    var myIdentityData =
    {
    datatype: “csv”,
    datafields: [
    { name: ‘identity’ },
    { name: ‘Share’ }
    ],
    url: ‘myIdentityData.txt’
    };

    //var identityData = new $.jqx.dataAdapter(myIdentityData, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + myIdentityData.url + ‘” : ‘ + error); } });
    var identityData = [{Identity:’Researcher – Manager’, Share:40.0},
    {Identity:’Engineer – Technician’, Share:30.0},
    {Identity:’Designer – Inventor’, Share:20.0},
    {Identity:’Visionary – Entrepreneur’, Share:10.0}];

    // prepare jqxChart settings
    var identitySettings = {
    title: “My Identities”,
    //description: “Identities I Have Been Using”,
    enableAnimations: false,
    showLegend: true,
    legendLayout: { left: 10, top: 15, width: 300, height: 200, flow: ‘vertical’ },
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: identityData,
    colorScheme: ‘scheme03’,
    seriesGroups:
    [
    {
    type: ‘pie’,
    useGradient: false,
    showLabels: true,
    series:
    [
    {
    dataField: ‘Share’,
    displayText: ‘Identity’,
    labelRadius: 90,
    initialAngle: 15,
    radius: 115,
    centerOffset: 0,
    formatSettings: { sufix: ‘%’, decimalPlaces: 1 }
    }
    ]
    }
    ]
    };

    Performance issue on iPad #9038

    Peter Stoev
    Keymaster

    Please, send us a sample which reproduces the reported behavior to support@jqwidgets.com. The provided code and explanation are not full and are not enough for reproducing the issue. Also, please provide more information about your IPad model(IPad 1, IPad 2 or IPad 3) and the version of the Safari browser is very important, too. As a final note, please use the formatting options when you post code. For more details about this, visit: http://www.jqwidgets.com/community/topic/code-formatting/

    Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Performance issue on iPad #11701

    schneider_ms
    Participant

    Hi,
    did you solve the problem? I have the same problem on an iPhone. I develop the app with NSBasic and the perfomance is about 20 seconds.

    Performance issue on iPad #11705

    Peter Stoev
    Keymaster

    Hi schneider_ms,

    We don’t find anything wrong with the performance using the samples on our site. Before writing you, I tried them again with IPad and IPhone and the performance on my side was OK. If you have a performance issue, please send us a sample which reproduces it.

    Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.