jQuery UI Widgets › Forums › Getting Started › Incorrect X-Axis labels
Tagged: chart
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 7 years, 2 months ago.
-
AuthorIncorrect X-Axis labels Posts
-
Dears,
When i am displaying data in a line chart, the same date is repeated multiple times even thought it is present only once in the data set.
Data Set:
[{“stat_date”:”2017-09-02″,”total_success”:”0″,”total_fail”:”0″,”total_requests”:”0″,”success_rate”:”0.0000″},
{“stat_date”:”2017-09-03″,”total_success”:”35262″,”total_fail”:”7653″,”total_requests”:”42915″,”success_rate”:”82.1671″},
{“stat_date”:”2017-09-04″,”total_success”:”11754″,”total_fail”:”2551″,”total_requests”:”14305″,”success_rate”:”82.1671″},
{“stat_date”:”2017-09-05″,”total_success”:”11754″,”total_fail”:”2551″,”total_requests”:”14305″,”success_rate”:”82.1671″},
{“stat_date”:”2017-09-06″,”total_success”:”11754″,”total_fail”:”2551″,”total_requests”:”14305″,”success_rate”:”82.1671″},
{“stat_date”:”2017-09-07″,”total_success”:”0″,”total_fail”:”0″,”total_requests”:”0″,”success_rate”:”0.0000″}]Partial Code:
var source =
{
datatype: “json”,
datafields: [
{ name: ‘stat_date’,type: ‘date’,format: ‘yyyy-MM-dd’},
{ name: ‘total_success’,type: ‘number’},
{ name: ‘total_fail’,type: ‘number’},
{ name: ‘total_requests’,type: ‘number’},
{ name: ‘success_rate’,type: ‘number’}
],
cache: false,
id: ‘stat_date’,
url: php_link
};var settings = {
title: ‘Stats’,
description: “”,
enableAnimations: true,
animationDuration: 500,
enableAxisTextAnimation: true,
showLegend: true,
padding: { left: 5, top: 5, right: 20, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
showToolTips: true,
xAxis:
{
dataField: ‘stat_date’,
valuesOnTicks:’true’,
type:’date’,
formatFunction: function formatDate(value) {
var myReturnValue=(value.getDate().toString()+’-‘+month[value.getMonth()]+’-‘+value.getFullYear().toString());
return myReturnValue;
},
rangeSelector: {
serieType: ‘area’,
valuesOnTicks:’true’,
formatFunction: function formatDate(value) {
var myReturnValue=(value.getDate().toString()+’-‘+month[value.getMonth()]+’-‘+value.getFullYear().toString());
return myReturnValue;
},
padding: { /*left: 0, right: 0,*/ top: 20, bottom: 0 },backgroundColor: ‘white’,
size: 110,
gridLines: {visible: false}
},
gridLines: {
visible: false,
interval: 3,
color: ‘#BCBCBC’
},
labels: {
//step:2,
angle: -45,
rotationPoint: ‘topright’,
offset: { x: 0, y: -25 }
}},
colorScheme: ‘scheme01’,
seriesGroups:
[
{ unitInterval: 1,
type: ‘line’,
columnsGapPercent: 100,
seriesGapPercent: 5,
toolTipFormatSettings: { thousandsSeparator: ‘,’ },
toolTipFormatFunction: toolTipCustomFormatFn,
valueAxis:
{flip: false,
minValue: 0,
formatSettings: { decimalPlaces: 0, decimalSeparator: ‘.’,thousandsSeparator: ‘,’},
description: ‘Requests’,
displayValueAxis: true
},
series: [
{ dataField: ‘total_requests’, displayText: ‘Total Requests’, opacity: 1, lineWidth: 2 },
{ dataField: ‘total_success’, displayText: ‘Successful Requests’, opacity: 1, lineWidth: 2 },
{ dataField: ‘total_fail’, displayText: ‘Failed Requests’, opacity: 1, lineWidth: 2}
]
},
{ unitInterval: 1,
type: ‘line’,
columnsGapPercent: 100,
seriesGapPercent: 5,
toolTipFormatSettings: { thousandsSeparator: ‘,’ },
toolTipFormatFunction: toolTipCustomFormatFn,
valueAxis:
{flip: false,
minValue: 0,
maxValue: 100,
formatSettings: { decimalPlaces: 2, decimalSeparator: ‘.’,thousandsSeparator: ‘,’},
description: ‘Success Rate (%)’,
displayValueAxis: true
},
series: [
{ dataField: ‘success_rate’, displayText: ‘Success Rate (%)’, opacity: 1, lineWidth: 2}
]
}
]
};$(‘#chart’).jqxChart(settings);
var chart = $(‘#chart’).jqxChart(‘getInstance’);The X-axis is displaying the below Labels:
1-Sep-2017
1-Sep-2017(shouldn’t not be there)
2-Sep-2017
3-Sep-2017
4-Sep-2017
5-Sep-2017
6-Sep-2017
6-Sep-2017(shouldn’t not be there)Also if I select only data for 5 and 7 September:
X-axis will repeat 5 September multiple times, then 6 September multiple times.I also noticed that the values are not aligned with the date labels.
Kindly support on the way forward.
Prepared a sample: http://jsfiddle.net/f5gattv8/. No such issue with current version.
-
AuthorPosts
You must be logged in to reply to this topic.