jQuery UI Widgets › Forums › Chart › Text orientation
Tagged: chart, jqxChart, orientation, rotation, text, textRotationAngle
This topic contains 10 replies, has 3 voices, and was last updated by serder 12 years, 5 months ago.
-
AuthorText orientation Posts
-
When bars are horizontal, the bar text is vertical and when bars are vertical the bar text is horisontal.
I am forced to use long axis text and thus the imposes an unusable size per bar for me.
Can the text orientation be changed?
Thanks in advance.
Hello sdalby,
You can use the textRotationAngle property of categoryAxis to rotate the text however suits your needs.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar and thanks for your reply. I cannot find any documentation on this property, but I have tried to play with it.
The way I do it does not appear to have any effect though.
How do I set bar description text to be horizontal in a horizontal bar like this one:
Where China, India, Usa etch should be written with horizontal text?
My current settings are:
var settings = { showLegend: true, enableAnimations: false, padding: { left: 20, top: 5, right: 20, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: chartList, categoryAxis: { dataField: 'name', showGridLines: true, flip: false, textRotationAngle: 0 }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 30, toolTipFormatSettings: { thousandsSeparator: ',' }, textRotationAngle: 180, valueAxis: { flip: true, unitInterval: 120, minValue: 0, maxValue: 1500, displayValueAxis: true, description: '', formatFunction: function (value) { return parseInt(value); } }, series: [ { dataField: 'timeConsumption', displayText: 'timeConsumption' } ] } ] };Hi sdalby,
As I mentioned above, textRotationAngle is a categoryAxis property. Here is how the example should look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head> <title id='Description'>jqxChart Bar Series Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data 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: true, enableAnimations: true, padding: { left: 20, top: 5, right: 20, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, categoryAxis: { textRotationAngle: 90, dataField: 'Country', showGridLines: true, flip: false }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 100, toolTipFormatSettings: { thousandsSeparator: ',' }, valueAxis: { flip: true, unitInterval: 100000000, maxValue: 1500000000, displayValueAxis: true, description: '', formatFunction: function (value) { return parseInt(value / 1000000); } }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }); </script></head><body class='default'> <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px; top: 0px;"> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi
Thanks for your help, that swithced the text orientation perfectly.
It did raise another issue though. I Show 20 bars, but only 11 of them have a legend text despite the fact that the tooltip shows that I have set the legend text for all 20.
It can be reproduced in your example if you switch to 20 countries rather than 5.
Best regards
SørenHi Søren,
In this case, the unitInterval property should be set:
unitInterval: 1,
Here is the whole, updated, example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head> <title id='Description'>jqxChart Bar Series Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data 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 }, { Country: 'China2', Population: 1347350000, Percent: 19.18 }, { Country: 'India2', Population: 1210193422, Percent: 17.22 }, { Country: 'USA2', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia2', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil2', Population: 192376496, Percent: 2.74 }, { Country: 'China3', Population: 1347350000, Percent: 19.18 }, { Country: 'India3', Population: 1210193422, Percent: 17.22 }, { Country: 'USA3', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia3', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil3', Population: 192376496, Percent: 2.74 }, { Country: 'China4', Population: 1347350000, Percent: 19.18 }, { Country: 'India4', Population: 1210193422, Percent: 17.22 }, { Country: 'USA4', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia4', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil4', Population: 192376496, Percent: 2.74}]; // prepare jqxChart settings var settings = { title: "Top 5 most populated countries", description: "Statistics for 2011", showLegend: true, enableAnimations: true, padding: { left: 20, top: 5, right: 20, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, categoryAxis: { unitInterval: 1, textRotationAngle: 90, dataField: 'Country', showGridLines: true, flip: false }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 100, toolTipFormatSettings: { thousandsSeparator: ',' }, valueAxis: { flip: true, unitInterval: 100000000, maxValue: 1500000000, displayValueAxis: true, description: '', formatFunction: function (value) { return parseInt(value / 1000000); } }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }); </script></head><body class='default'> <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px; top: 0px;"> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/🙂 And now it works.
Thanks
Hi I had the same problem. Now it works but the text is centered. I was wondering if there was a property to align it to the axis instead of being centered?
Here is my code:
var source = { localdata: data, datatype: 'array' } var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true }); // prepare jqxChart settings var settings = { title: "Total des candidats par offre de bourse de la dernière année", description: "Bourse", enableAnimations: true, showLegend: true, padding: { left: 5, top: 5, right: 10, bottom: 5 }, //titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { textRotationAngle: 90, dataField: 'Bourse', unitInterval: 1 }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 100, valueAxis: { minValue: 0, maxValue: max, unitInterval: intervals, description: 'Candidats', }, series: [ { dataField: 'Total', displayText: 'Nombres de candidats' } ] } ] }; // select the chartContainer DIV element and render the chart. $('#divParBourseGraph').jqxChart(settings); }Hi serder,
Unfortunately I havent been able to solved that either, but if you find out, I would be happy to know too.
Hello serder and sdalby,
To align the text to the right, please set the horizontalTextAlignment property in categoryAxis to ‘right’:
categoryAxis: { horizontalTextAlignment: 'right', unitInterval: 1, textRotationAngle: 90, dataField: 'Country', showGridLines: true, flip: false },Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/thanks Dimitar, horizontalTextAlignment and verticalTextAlignment fixed my problem!
-
AuthorPosts
You must be logged in to reply to this topic.