jQWidgets Forums
jQuery UI Widgets › Forums › Chart › Chart's title, X &Y axis not positioned correctly
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 9 months ago.
-
Author
-
I am trying to utilize the Column Chart (with a line Graph) and no matter what options I configure, the charts always look like this:
http://imageshack.us/a/img51/7059/e6ib.png
http://imageshack.us/a/img560/8251/iaie.pngIn the first chart, one of the bars covers the Y axis and the Y axis description text. The Y axis and Y axis description text should be located outside of the chart based on the demos and example code.
In the Second Chart, the Y axis and title remain within the chart no matter how I set the charts padding.
I’m just wondering if there’s anyway to shift everything on the chart up and then left until it looks like the charts in the demo page.
I am currently on version 2.8.0 and I am using IE 8.
Code for the first chart
// prepare chart data as an array
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Country’ },
{ name: ‘GDP’ },
{ name: ‘DebtPercent’ },
{ name: ‘Debt’ }
],
url: ‘gdp_dept_2010.txt’
};var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error);} });
// prepare jqxChart settings
var settings = {
title: “Economic comparison”,
description: “GDP and Debt in 2010”,
showLegend: true,
enableAnimations: true,
padding: { left: 90, top: 60, right: 0, bottom: 10 },
titlePadding: { left: -190, top: -30, right: 0, bottom: 0 },
source: dataAdapter,
categoryAxis:
{
dataField: ‘Country’,
showGridLines: true
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘column’,
columnsGapPercent: 50,
valueAxis:
{
unitInterval: 5000,
displayValueAxis: true,
description: ‘GDP & Debt per Capita($)’
},
series: [
{ dataField: ‘GDP’, displayText: ‘GDP per Capita’},
{ dataField: ‘Debt’, displayText: ‘Debt per Capita’ }
]
},
{
type: ‘line’,
valueAxis:
{
unitInterval: 10,
displayValueAxis: false,
description: ‘Debt (% of GDP)’
},
series: [
{ dataField: ‘DebtPercent’, displayText: ‘Debt (% of GDP)’, opacity:0.3 }
]
}]
};// setup the chart
$(‘#jqxChart3’).jqxChart(settings);//Bar Chart with Line Graph
var sampleData =
[
{ Country: ‘China’, Population: 1347350000, Percent: 19.18},
{ Country: ‘India’, Population: 1210193422, Percent: 17.22},
{ Country: ‘USA’, Population: 313912000, Percent: 4.47},
{ Country: ‘Indonesia’, Population: 237641326, Percent: 3.38},
{ Country: ‘Brazil’, Population: 192376496, Percent: 2.74}
];
// prepare jqxChart settings
var settings =
{
title: “Top 5 most populated countries”,
description: “Statistics for 2011”,
showLegend: false,
showBorderLine: false,
enableAnimations: true,
padding: { left: 5, top: 5, right: 25, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
categoryAxis:
{
dataField: ‘Country’,
showGridLines: false,
flip: false,
unitInterval: 1
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘column’,
orientation: ‘vertical’,
columnsGapPercent: 30,
toolTipFormatSettings: { thousandsSeparator: ‘,’ },
valueAxis:
{
flip: false,
displayValueAxis: true,
description: ‘Description’,
axisSize: ‘auto’,
formatFunction: function (value) {
return “”;
}
},
series:
[
{ dataField: ‘Population’, displayText: ‘Population (millions)’ }
]
},
{type: ‘line’,
valueAxis:
{
unitInterval: 1,
displayValueAxis: false,
description: ‘Percent(%)’
},
series:
[
{ dataField: ‘Percent’, displayText: ‘Percent (%)’ }
]
}
]
};
// setup the chart
$(‘#jqxChart’).jqxChart(settings);Code for the Second chart
// prepare chart data as an array
var sampleData =
[
{ Day: ‘Monday’, Running: 3, Swimming: 5, Cycling: 25, Goal: 40 },
{ Day: ‘Tuesday’, Running: 25, Swimming: 25, Cycling: 5, Goal: 50 },
{ Day: ‘Wednesday’, Running: 30, Swimming: 5, Cycling: 25, Goal: 60 },
{ Day: ‘Thursday’, Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: ‘Friday’, Running: 5, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: ‘Saturday’, Running: 30, Swimming: 5, Cycling: 30, Goal: 60 },
{ Day: ‘Sunday’, Running: 20, Swimming: 40, Cycling: 5, Goal: 90 }
];
// prepare jqxChart settings
var settings =
{
title: “Fitness & exercise weekly scorecard”,
description: “”,
enableAnimations: true,
showLegend: false,
padding: { left: 5, top: 5, right: 25, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
categoryAxis:
{
text: ‘Category Axis’,
textRotationAngle: 0,
dataField: ‘Day’,
showTickMarks: false,
valuesOnTicks: false,
tickMarksInterval: 1,
tickMarksColor: ‘#FFFFFF’,
unitInterval: 1,
gridLinesInterval: 1,
gridLinesColor: ‘#FFFFFF’,
axisSize: ‘auto’
},
colorScheme: ‘scheme05’,
seriesGroups:
[
{
type: ‘column’,
valueAxis:
{
unitInterval: 10,
displayValueAxis: true,
description: ‘Activity’,
axisSize: ‘auto’,
tickMarksColor: ‘#FFFFFF’
},
series:
[
{ dataField: ‘Running’, displayText: ‘Running’},
{ dataField: ‘Swimming’, displayText: ‘Swimming’},
{ dataField: ‘Cycling’, displayText: ‘Cycling’}
]
}
]
};
$(‘#jqxChart2’).jqxChart(settings);
}Hi nou,
We have working samples with Column Charts which are initialized as expected. I suggest you to follow the same pattern on your page and also make sure the DOCTYPE is set on your page, too. In addition, I also suggest you to use the most recent version of jQWidgets. In the particular case – ver. 2.9.3.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.