Barchart X-Axis Labels

[wsessomsParticipant]

I am having a problem aligning the x-axis labels with the bars in a column chart. Also the gap between the columns are not equally spaced. I am posting a screenshot of the bar chart and the code that drives the chart.

Your help is appreciated.

function doChart(){

from = $(“#from”).val();
tu = $(“#tu”).val();

$.ajax({
type: “POST”,
url: “http://etfbp.com/charts.cfc”,
data: { method: ‘barMonthlyData’, from:from,tu:tu,userID:userID,accountID:accountID },
cache: false,
dataType: “json”,
success: function(sdata) {
if(sdata == ‘You must have a least two months of data to do a cash flow comparison.’){
navigator.notification.alert(“You must have a least two months of data to do a cash flow comparison.”,[],’Alert’,’OK’);
return false;
}else{
var sdata = queryToObject(sdata);
var data = JSON.stringify(sdata);
};

var tmpdata = data;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘expensedate’, type: ‘date’ },
{ name: ‘Month’, type: ‘string’ },
{ name: ‘cost’, type: ‘string’ },
{ name: ‘total’, type: ‘string’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘category’, type: ‘string’ }
],
localdata: tmpdata
};

dataAdapter = new $.jqx.dataAdapter(source,
{
autoBind: true,
async: false,
loadError: function () { xhr, status, error }
});

// prepare jqxChart settings
var settings = {
source: dataAdapter,
title: acctName + ” Expenses”,
description: “Cash Flow By Month”,
showLegend: false,
showBorderLine: false,
enableAnimations: true,
padding: {
left: 20, top: 20, right: 20, bottom: 20
},
titlePadding: {
left: 0, top: 0, right: 0, bottom: 20
},

categoryAxis:
{
textRotationAngle: 0,
dataField: ‘expensedate’,
description: ‘Months’,
type: ‘date’,
baseUnit: ‘month’,
formatFunction: function (value) {
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];
return months[value.getMonth()];
},

},

seriesGroups:
[{
showLabels: true,
type: ‘column’,
valueAxis:
{
description: ‘Dollars ($000)’,
minValue: ‘auto’,
maxValue: ‘auto’,
axisSize: ‘auto’,
formatSettings: {decimalPlaces: 0}
},
series: [{
dataField: ‘total’, displayText: ‘Expense Amount’, formatSettings:
{
decimalPlaces:2
}
}]
}]
};
// setup the chart
$(‘#jqxBarChart’).jqxChart(settings);
//next();
}
});
};

[DimitarParticipant]

Hello wsessoms,

Everything in your code seems in order. You can try adjusting the columnsGapPercent seriesGroups property. If this does not help either, please share a JSFiddle example demonstrating the issue.

Best Regards,
Dimitar

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

[wsessomsParticipant]

Thanks for the prompt reply.
I figured it out. There was a problem in my query statement.

Thanks again

[Author]

Posts