jQWidgets Forums
jQuery UI Widgets › Forums › Chart › Jqwidget chart not loading in IE9 due to Dataadapter
Tagged: charting
This topic contains 9 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 3 months ago.
-
Author
-
Hi ,
After lot of search found one another user who also faced the chart not loading in IE9 and he concludes that is due to comma in some declaration of data source is made not to work in IE as in below post.
http://www.jqwidgets.com/community/topic/charts-is-not-drawn-in-ie8/#post-66172
I too commented the Dataadapter and source and gave a sample data to grid and it worked in IE 9 from which it clearly indicates there is some problem in declaring JQXdataadapter or source declaration.The below is the code which i pasted Please go through it and correct where is the mistake .
Kindly Help us on this issue .
Not working Code:
var source = {
type: ‘POST’,
datatype: ‘json’,
datafields: [{
name: ‘RunTime’}, {
name: ‘IdleTime’}, {
name: ‘WorkingTime’}, {
name: ‘XAxisItem’,
type: ‘string’}],
url: ‘../abc/xyz’, root: ‘Rows’,beforeprocessing: function (data) {
$.a.b.c= data.Rows;
$.a.b.d= data.charttype;
$.a.b.e= data.dateformat;var seriesGroups = $(‘#fleet-data’).jqxChart(‘seriesGroups’);
// change nested setting.
seriesGroups[0].valueAxis.maxValue = data.maxi;
seriesGroups[0].valueAxis.minValue = data.mini;
seriesGroups[0].valueAxis.unitInterval = data.intir;}
};
var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var beforeconvertRunChartdate = $.a.b.c[itemIndex].MaxiDate;return beforeconvertRunChartdate ;
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: “application/json”,
formatData: function (data) {
IsValidSession();
var fromdt;
if (Date.today().is().sunday()) {
fromdt = Date.today().toString(‘MM/dd/yyyy’);
} else {
fromdt = Date.today().last().sunday().toString(‘MM/dd/yyyy’);
}
var todt = Date.today().toString(‘MM/dd/yyyy’);var fromdate = $(‘#asset-fromdt’).val() || fromdt;
var todate = $(‘#asset-todt’).val() || todt;
// var filtervaluesstring = JSON.stringify(data);
$.extend(data, {
“uuuu”: $.a.b.c,
“yyyg”: fromdate,
“tttt”: todate,
rrrr: $.a.b.c,
xxxx: $.a.b.c
});return JSON.stringify(data);
},
beforeLoadComplete: function (records) {
// $(‘#runtimeChart .jqx-chart-legend-text’).eq(1).parent().hide();
},
downloadComplete: function (edata, textStatus, jqXHR) {
//$(‘#runtimeChart .jqx-chart-legend-text’).eq(1).parent().hide();
},
loadComplete: function () {
//$(‘#runtimeChart .jqx-chart-legend-text’).eq(0).parent().hide();
//if ($.unify.AssetDetail.ChartType == “IdleTime”) {
// $(‘#runtimeChart .jqx-chart-legend-text’).eq(0).parent().hide();
//}
//else if ($.unify.AssetDetail.ChartType == “RunTime”) {
// $(‘#runtimeChart .jqx-chart-legend-text’).eq(1).parent().hide();
// $(‘#runtimeChart .jqx-chart-legend-text’).eq(2).parent().hide();
//}}
});// prepare jqxChart settings
var settings = {
title: “RunTime”,
description: “”,
enableAnimations: false,
backgroundColor: ‘#ffffff’,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,xAxis:
{
dataField: ‘XAxisItem’,
description: ‘Days’,
showTickMarks: true,
tickMarksInterval: 1,
textRotationAngle: 180,
unitInterval: 1,
showGridLines: false,
gridLinesInterval: 1,axisSize: ‘auto’,
formatFunction: function () {
return ‘ ‘; // a space, not an empty string
}},
colorScheme: ‘scheme06’,
seriesGroups:
[
{
type: ‘stackedcolumn’,
useGradient: false,columnsGapPercent: 12,
seriesGapPercent: 0,
toolTipFormatFunction: toolTipCustomFormatFn,
valueAxis:
{
unitInterval: 2,
minValue: 0,
maxValue: 24,
displayValueAxis: true,
description: ‘Hours’,},
series: [
{ dataField: ‘RunTime’, displayText: ‘RunTime’, color: “#57a7d7” },
{ dataField: ‘IdleTime’, displayText: ‘IdleTime’, color: “#faa75b” },
{ dataField: ‘WorkingTime’, displayText: ‘WorkingTime’, color: “#2dcc70” }
]
}
]
};
// setup the chart
$(‘#fleet-data’).jqxChart(settings);Working Code:
var sampleData = [
{ XAxisItem: ‘Monday’, RunTime: 30, IdleTime: 0, WorkingTime: 25 },
{ XAxisItem: ‘Tuesday’, RunTime: 25, IdleTime: 25, WorkingTime: 0 },
{ XAxisItem: ‘Wednesday’, RunTime: 30, IdleTime: 0, WorkingTime: 25 },
{ XAxisItem: ‘Thursday’, RunTime: 35, IdleTime: 25, WorkingTime: 45 },
{ XAxisItem: ‘Friday’, RunTime: 0, IdleTime: 20, WorkingTime: 25 },
{ XAxisItem: ‘Saturday’, RunTime: 30, IdleTime: 0, WorkingTime: 30 },
{ XAxisItem: ‘Sunday’, RunTime: 60, IdleTime: 45, WorkingTime: 0 }
];
var settings = {
title: “RunTime”,
description: “”,
enableAnimations: false,
backgroundColor: ‘#ffffff’,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,xAxis:
{
dataField: ‘XAxisItem’,
description: ‘Days’,
showTickMarks: true,
tickMarksInterval: 1,
textRotationAngle: 180,
unitInterval: 1,
showGridLines: false,
gridLinesInterval: 1,axisSize: ‘auto’,
formatFunction: function () {
return ‘ ‘; // a space, not an empty string
}},
colorScheme: ‘scheme06’,
seriesGroups:
[
{
type: ‘stackedcolumn’,
useGradient: false,columnsGapPercent: 12,
seriesGapPercent: 0,
//toolTipFormatFunction: toolTipCustomFormatFn,
valueAxis:
{
unitInterval: 2,
minValue: 0,
maxValue: 80,
displayValueAxis: true,
description: ‘Hours’,},
series: [
{ dataField: ‘RunTime’, displayText: ‘RunTime’, color: “#57a7d7” },
{ dataField: ‘IdleTime’, displayText: ‘IdleTime’, color: “#faa75b” },
{ dataField: ‘WorkingTime’, displayText: ‘WorkingTime’, color: “#2dcc70” }
]
}
]
};
// setup the chart
$(‘#fleet-data’).jqxChart(settings);Please Note:
In server side for processing and returning data it is not even taking 2 milli seconds it is such fast .And all works in chrome but only not working in IE 9 .
It is highly impacting business .Please provide some valuable information as soon as possible .It would be a great help .Hi arunthatham,
Your code has Syntax Errors which will throw exception in IE7, IE8 and IE9 and will be ignored in more modern browsers. Last Array Items, shouldn’t have “,”. As you may see our online samples with jqxChart work fine on our website.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/I have given the code in above post can you paste the same and highlight which line is the mistake .
I am not able to find.
Please do the favour.Application is going to Live today ,It would be very help full if you highlight the mistake in the above code and reply as soon as possible .
Please do the favor.The one which I’ve found for now is:
description: 'Hours',},
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/No it didnt work after removing that also .
Even i searched line by line where all that mistake is there but no where able to find.
It didnt work.
Kindly let us know any valuable reply.Hi arunthatham,
You can share a jsfiddle.net example so we can run it and see the Console errors. Then we will paste the errors here. You can do that, too if you prefer and fix the syntax errors in your code. Example based on your code with dataAdapter and which works fine with IE9 – http://jsfiddle.net/o2n7qz3v/1/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
After a subtle amount of research, we have 3 instances of strange behaviour in jqxCharts.
SCENARIO 1
http://jsfiddle.net/datachand/Lde9kg6t/
In this scenario, I have only one object in the array of sampleData, this works good in both Chrome & IE 9.
SCENARIO 2
http://jsfiddle.net/datachand/Lde9kg6t/1 This will basically crash in any browser.
The sampleData we’re holding is: (to replicate, replace the same sampleData in scenario 1 jsfiddle)
var sampleData = [{ "RunTime": "", "RunTimeData": 19, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "19.0", "WorkingTimeData": 19, "MiniDate": "05/10/2014", "MaxiDate": "NA", "XAxisItem": "05/10/2014" },{ "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" } ];
SCENARIO 3
http://jsfiddle.net/datachand/Lde9kg6t/3/
In this scenario, we have provided the same kind of response we get when we use dataAdapter, we were able to generate the chart in Chrome, but in IE 9 it crashed.
YOUR EXAMPLE
Replace your data with this in your example (http://jsfiddle.net/o2n7qz3v/1/),
var sampleData = [{ "RunTime": "", "RunTimeData": 19, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "19.0", "WorkingTimeData": 19, "MiniDate": "05/10/2014", "MaxiDate": "NA", "XAxisItem": "05/10/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }];
This does not work in either. We are providing extra datafields for our functionality, even on removal this is same, replacing/removing double quotes in JSON data, has basically no effect.
Basically scenario 3 is what we are currently using just we cut pasted the server side logic to client side and we are able to replicate the issue.Please provide solution with scenario 3 mostly.Please sort this issue.
Hi arunthatham,
Sorry, but we do not find an issue related to our Chart. Check whether the initialization code of your Charting is correct and written according to the documentation and the available examples. Important Things which should be checked are definitions of data fields – type, name and format for “date” fields. For Chart with Date Axis, the XAxis’s type should be set to “date” and also the baseUnit should be set to unit like ‘year’, ‘month’, ‘day’, ‘hour’, etc… Replacing the data in the example I sent you to the one which you’ve posted requires also setting the type of the XAxisItem because you’ve changed it to “date”. I would suggest you to read and learn how to use the product before writing that there is a problem with it. The updated sample: http://jsfiddle.net/qtjvcqjq/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.