jQWidgets Forums
jQuery UI Widgets › Forums › Chart › Performance issue on iPad
Tagged: jqxChart
This topic contains 3 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 7 months ago.
-
Author
-
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 }
}
]
}
]
};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 StoevjQWidgets Team
http://www.jqwidgets.comHi,
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.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 StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.