[spidderParticipant]

Got it :), it is required to specify data type for the columns. Thanks a lot, your example helped me a lot.

Now it works.

[spidderParticipant]

THanks for very quick response, I actually use data adapter in my code, but maybe I am doing something wrong, I only replaced it with local data so I can share it with you… Plesae see below my code… unfortunately it is on internal server, so you cannot access it, but basicaly as explained, only in Chrome the lines are displayed. I can see that URL returns valid data… This is url ouput of data:

18-AUG-17 08:00:00,305,85,264,123
18-AUG-17 07:00:00,339,75,276,128
18-AUG-17 06:00:00,336,120,300,156
18-AUG-17 05:00:00,306,150,297,157
18-AUG-17 04:00:00,261,77,248,102
17-AUG-17 21:00:00,348,145,305,183
17-AUG-17 20:00:00,349,156,313,190
17-AUG-17 19:00:00,285,145,272,150
17-AUG-17 18:00:00,287,103,253,130
17-AUG-17 17:00:00,304,98,255,132
17-AUG-17 16:00:00,336,88,247,123
17-AUG-17 15:00:00,285,89,244,121
17-AUG-17 14:00:00,283,92,248,125
17-AUG-17 13:00:00,289,94,250,129
17-AUG-17 12:00:00,282,103,246,131
17-AUG-17 11:00:00,302,102,249,133
17-AUG-17 10:00:00,291,100,255,128
17-AUG-17 09:00:00,383,83,277,137
17-AUG-17 08:00:00,351,97,282,132
17-AUG-17 07:00:00,290,103,286,129
17-AUG-17 06:00:00,368,88,306,155

Below is the JS… maybe you can see the issue right away.

<div class=”small-chart-wrapper”>
<div class=”small-chart age-of-cdr” id=”gmsc-ageofcdr”></div>
<div class=”small-chart-info”>

<strong id=”gmscminmax”>

</div>
</div>
<script>
/*
Name: UI Elements / Charts – Examples
Written by: Okler Themes – (http://www.okler.net)
Theme Version: 1.7.0
*/

(function($) {

‘use strict’;

/*
Age Of CDRS
*/

var source =
{
datatype: “csv”,
datafields: [
{ name: ‘HOUR’ },
{ name: ‘MAX’ },
{ name: ‘MIN’ },
{ name: ‘MAXAVG’ },
{ name: ‘MINAVG’ }
],
url: ‘_data/ageofcdrs.php?stream=GMSC’
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
var lastDataItem = dataAdapter.records[0];
$(‘#gmscminmax’).text(‘Min in last hour: ‘ + lastDataItem.MIN + ‘ / ‘ + ‘Max in last hour: ‘ + lastDataItem.MAX);

var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return ‘<DIV style=”text-align:left”>’+
‘<b>Max: ‘ + dataItem.MAX + ‘</b></br>’ +
‘Min: ‘ + dataItem.MIN + ‘</br>’ +
‘Max Avg: ‘ + dataItem.MAXAVG + ‘</br>’ +
‘Min Avg: ‘ + dataItem.MINAVG + ‘</br>’ +
‘Hour: ‘ + dataItem.HOUR + ‘</DIV>’;
};

// prepare jqxChart settings
var settings = {
padding: { left: 0, top: 15, right: 15, bottom: 20 },
borderLineWidth:1,
title: “GMSC”,
titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
description: “”,
enableAnimations: true,
showLegend:false,
backgroundColor: “#cccccc”,

enableCrosshairs: true,
source: dataAdapter,
colorScheme: ‘scheme05’,
xAxis:
{
dataField: ‘HOUR’,
unitInterval: 2,
title: { text: ‘Hour in a day’ },
type: ‘date’,
baseUnit: ‘hour’,
dateFormat: “HH”

},
valueAxis:
{
minValue: 0,
maxValue: 500,
position: “left”,
title: { text: ‘Minutes’ },
labels: {
horizontalAlignment: ‘right’,
angle: 90
}

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

series: [ {dataFieldTo: ‘MAX’, displayText: ”, dataFieldFrom: ‘MIN’, opacity: 0.5,
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 }
]
}
]
};
// setup the chart
$(‘#gmsc-ageofcdr’).jqxChart(settings);

}).apply(this, [jQuery]);
</script>

Thanks again for help

Regards Marek

[Author]

Posts