How to display dates on X-axis ?

[suryaprakasdParticipant]

Hi,

In my project i am trying to create a stacked bar chart, where x-axis is plotted against dates and Y-axis is plotted against Number of incidents.Each Vertical stacked bar can contain three different priorities namely High,Medium and Low.

So the json array that i get from the server would look some thing like the below.

[
{
“Date”: “11/16/2014”,
“High”: “0”,
“Low”: “21”,
“Medium”: “0”
},
{
“Date”: “11/17/2014”,
“High”: “0”,
“Low”: “21”,
“Medium”: “0”
}
]

And my client side code is as follows.

var source = {
datafields: [{ name: ‘Date’}, { name: ‘High’ }, { name: ‘Low’}, { name: ‘Medium’}],
datatype: “json”,
url: ‘getincidenthistbysev.do?datetime=’+time
}
var dataAdapter = new $.jqx.dataAdapter(source);

var settings = {
title : ”,
description:”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
dataField : ‘Date’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 1,
showGridLines: false,
gridLinesInterval: 1,
gridLinesColor: ‘#888888’,
axisSize: ‘auto’
},
seriesGroups:
[
{
type: ‘stackedcolumn’,
columnsGapPercent: 100,
seriesGapPercent: 5,
valueAxis:
{
visible: false,
displayValueAxis: true,
description: ‘Time in minutes’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘High’, displayText: ‘High’ },
{ dataField: ‘Low’, displayText: ‘Low’ },{ dataField: ‘Medium’, displayText: ‘Medium’ }
]
}
]
};
// setup the chart
$(‘#’+divId).jqxChart(settings);

Now my problem is with dataField of Xaxis, when its value is ‘Date’ i did not see any data in the graph except legends. When i change dataField value to any string other than ‘Date’ i could able to see the data, but the X axis is plotted against 0,1,2,3.. like that.

Please throw some light on this issue to show dates on X axis.

Thanks,
Surya

[DimitarParticipant]

Hello Surya,

As you can see from the demo Line Series, you need to apply additional settings to the xAxis when displaying dates, i.e.: type (set to “date”), baseUnit, etc.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts