Chart with hours on x Axis showing bad in IE

[spidderParticipant]

Hi,

I have been struggling with this issue for a few days already… basically I am trying to plot on chart last 24 hours… In chrome the following settings works correctly but in Internet Explorer it always sorts the hours from 1 to 24 instead of the chronological way i.e (16,17,18,19,20,21,22,23,0,1,2….)

Same issue in mozzila

Below is my settings
`
var stream = “<?php echo $_stream; ?>”;
‘use strict’;

/*
Age Of CDRS
*/

/*$(“#”+stream+”-card”).flip({
trigger: ‘trigger’, autoSize: true
});*/

source[stream] =
{
datatype: “json”,
datafields: [
{ name: ‘HOUR’, type: ‘date’, format:’d-mmm-yy’ },
{ name: ‘MAX’, type: ‘double’ },
{ name: ‘MIN’, type: ‘double’ },
{ name: ‘MAXAVG’, type: ‘double’ },
{ name: ‘MINAVG’, type: ‘double’ }
],
url: ‘_data/ageOfEvents’+stream.toUpperCase()+’.json’
};
dataAdapter[stream] = new $.jqx.dataAdapter(source[stream], { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source[stream].url + ‘” : ‘ + error); } });
var lastDataItem = dataAdapter[stream].records[0];
$(‘#<?php echo $_stream;?>minmax’).text(‘Min in last hour: ‘ + lastDataItem.MIN + ‘ / ‘ + ‘Max in last hour: ‘ + lastDataItem.MAX);
var annotationCustomFn = function () {
return ‘Min in last hour: ‘ + lastDataItem.MIN + ‘ / ‘ + ‘Max in last hour: ‘ + lastDataItem.MAX;
}
var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter[stream].records[itemIndex];
return ‘<DIV style=”text-align:center”>’+
‘<b>Max: ‘ + dataItem.MAX + ‘ h</b></br>’ +
‘Min: ‘ + dataItem.MIN + ‘ h</br>’ +
‘Max Avg: ‘ + dataItem.MAXAVG + ‘ h</br>’ +
‘Min Avg: ‘ + dataItem.MINAVG + ‘ h</br>’ +
‘<b>’ + dataItem.HOUR.format(‘d-mmm-yy HH’) + ‘:00</b></DIV>’;
};

var now = new Date(Date.now() – (1000 /*sec*/ * 60 /*min*/ * 24 * 3));
var yesterday = new Date(Date.now() – (1000 /*sec*/ * 60 /*min*/ * 60 /*hour*/ * 24));
//alert(‘yesterday’ + yesterday)
//yesterday = yesterday.setDate(now.getDate() -1);
// prepare jqxChart settings
var settings = {
padding: { left: 0, top: 10, right: 10, bottom: 0 },
borderLineWidth:0,
title: “”,
description: “”,
enableAnimations: true,
showLegend:false,
backgroundColor: “#575d63”,

enableCrosshairs: true,
source: dataAdapter[stream],
colorScheme: ‘scheme05’,
xAxis:
{
dataField: ‘HOUR’,
unitInterval: 1,
minValue: yesterday.format(‘d/mmm/yy HH:MM:ss’),
maxValue: now.format(‘d/mmm/yy HH:MM:ss’),

type: ‘date’,
baseUnit: ‘hour’,
formatFunction: function (value) {
return value.format(“HH”);
},
gridLines: {
visible:false
},
tickMarks: {
visible:true
},
labels: {
offset: { x:0, y:5}
}

},
valueAxis:
{
minValue: 0,
maxValue: ‘auto’,
position: “left”,

gridLines: {
color: ‘#dddddd’
},
tickMarks: {
visible:false
},
labels: {
autoRotate:true,
horizontalAlignment:’center’
}

},
seriesGroups:
[
{
type: ‘rangecolumn’,
columnsGapPercent: 30,
toolTipFormatFunction: toolTipCustomFormatFn,

series: [ {dataFieldTo: ‘MAX’, displayText: ”, dataFieldFrom: ‘MIN’, opacity: 0.8,
colorFunction: function (value, itemIndex, serie, group) {

return (value.to > 500) ? ‘#CC1133’ : ‘#1F99D3’;
}}
]
},
{
type: ‘spline’,
toolTipFormatFunction: toolTipCustomFormatFn,
series: [
{ dataField: ‘MAXAVG’, displayText: ‘Max Avg’, opacity: 1, lineWidth: 2 }
]
}
,
{
type: ‘spline’,
toolTipFormatFunction: toolTipCustomFormatFn,
series: [
{ dataField: ‘MINAVG’, displayText: ‘Min Avg’, opacity: 1, lineWidth: 2 }
]
}
],

};

and here is how my json looks like, it is from oracle

[{“HOUR”:”09-SEP-17 20:00:00″,”MAX”:”4.7″,”MIN”:”1.7″,”MAXAVG”:”3.6″,”MINAVG”:”2″},{“HOUR”:”09-SEP-17 19:00:00″,”MAX”:”4.1″,”MIN”:”1.4″,”MAXAVG”:”3.1″,”MINAVG”:”1.5″},{“HOUR”:”09-SEP-17 18:00:00″,”MAX”:”7.8″,”MIN”:”1.2″,”MAXAVG”:”3.9″,”MINAVG”:”2″},{“HOUR”:”09-SEP-17 17:00:00″,”MAX”:”4.3″,”MIN”:”1.4″,”MAXAVG”:”3.4″,”MINAVG”:”1.5″},{“HOUR”:”09-SEP-17 16:00:00″,”MAX”:”5.3″,”MIN”:”1.2″,”MAXAVG”:”3.1″,”MINAVG”:”1.5″},{“HOUR”:”09-SEP-17 15:00:00″,”MAX”:”4.2″,”MIN”:”1.1″,”MAXAVG”:”3.3″,”MINAVG”:”1.5″},{“HOUR”:”09-SEP-17 14:00:00″,”MAX”:”4.3″,”MIN”:”1.4″,”MAXAVG”:”3.4″,”MINAVG”:”1.6″},{“HOUR”:”09-SEP-17 13:00:00″,”MAX”:”4.4″,”MIN”:”1.1″,”MAXAVG”:”3.2″,”MINAVG”:”1.6″},{“HOUR”:”09-SEP-17 12:00:00″,”MAX”:”13.8″,”MIN”:”1.1″,”MAXAVG”:”3.9″,”MINAVG”:”1.5″},{“HOUR”:”09-SEP-17 11:00:00″,”MAX”:”13.9″,”MIN”:”1.3″,”MAXAVG”:”4.1″,”MINAVG”:”1.9″},{“HOUR”:”09-SEP-17 09:00:00″,”MAX”:”6.5″,”MIN”:”1.2″,”MAXAVG”:”3″,”MINAVG”:”1.7″},{“HOUR”:”09-SEP-17 07:00:00″,”MAX”:”4.9″,”MIN”:”1.4″,”MAXAVG”:”3.1″,”MINAVG”:”1.6″},{“HOUR”:”09-SEP-17 06:00:00″,”MAX”:”8.1″,”MIN”:”1.2″,”MAXAVG”:”3.8″,”MINAVG”:”1.4″},{“HOUR”:”09-SEP-17 05:00:00″,”MAX”:”5.1″,”MIN”:”1″,”MAXAVG”:”3″,”MINAVG”:”1.4″},{“HOUR”:”09-SEP-17 04:00:00″,”MAX”:”5.5″,”MIN”:”1.3″,”MAXAVG”:”4″,”MINAVG”:”1.9″},{“HOUR”:”09-SEP-17 03:00:00″,”MAX”:”4.5″,”MIN”:”1.3″,”MAXAVG”:”3.5″,”MINAVG”:”1.6″},{“HOUR”:”09-SEP-17 02:00:00″,”MAX”:”8.9″,”MIN”:”1.1″,”MAXAVG”:”4.8″,”MINAVG”:”2.4″},{“HOUR”:”08-SEP-17 23:00:00″,”MAX”:”4.5″,”MIN”:”1.3″,”MAXAVG”:”3.5″,”MINAVG”:”1.5″},{“HOUR”:”08-SEP-17 22:00:00″,”MAX”:”4.8″,”MIN”:”1.2″,”MAXAVG”:”3.6″,”MINAVG”:”1.4″},{“HOUR”:”08-SEP-17 21:00:00″,”MAX”:”4.3″,”MIN”:”1.2″,”MAXAVG”:”3.3″,”MINAVG”:”1.5″},{“HOUR”:”08-SEP-17 20:00:00″,”MAX”:”6.7″,”MIN”:”1.5″,”MAXAVG”:”3.6″,”MINAVG”:”1.8″},{“HOUR”:”08-SEP-17 19:00:00″,”MAX”:”4.3″,”MIN”:”1.5″,”MAXAVG”:”3.5″,”MINAVG”:”1.6″},{“HOUR”:”08-SEP-17 18:00:00″,”MAX”:”5.6″,”MIN”:”1.5″,”MAXAVG”:”3.7″,”MINAVG”:”1.5″}]

Could you please help me out to set it up properly?

Thanks

[HristoParticipant]

Hello spidder,

It is not correct to set date for the “minValue” and the “maxValue” as you set for a base hours.
I would like to say in your DataAdapter’s source the format field is incorrect – month(s) are represented with uppercase letter “MMM” (the abbreviated name of the month).
Also, you could use our format date method – var formattedDate = dataAdapter.formatDate(new Date(), 'D');.

formatFunction: function (value) {
     var formattedDate = dataAdapter.formatDate(value, 'HH');
     return formattedDate;
},

You could find more details about all of these in our API Documentation:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm?search=data
I would like to suggest you try to use dateFormat member of the “xAxis” of the jqxChart to format the dates.
Also, it will be better to sort your data (by date).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts