jQuery UI Widgets Forums Chart Text orientation

This topic contains 10 replies, has 3 voices, and was last updated by  serder 11 years, 6 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • Text orientation #9763

    sdalby
    Member

    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.

    Text orientation #9767

    Dimitar
    Participant

    Hello sdalby,

    You can use the textRotationAngle property of categoryAxis to rotate the text however suits your needs.

    Best Regards,
    Dimitar

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

    Text orientation #9840

    sdalby
    Member

    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:

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_bar_series.htm

    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' }
    ]
    }
    ]
    };
    • This reply was modified 11 years, 6 months ago by  sdalby.
    Text orientation #9890

    Dimitar
    Participant

    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,
    Dimitar

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

    Text orientation #9930

    sdalby
    Member

    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øren

    Text orientation #9935

    Dimitar
    Participant

    Hi 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,
    Dimitar

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

    Text orientation #9946

    sdalby
    Member

    🙂 And now it works.

    Thanks

    Text orientation #10041

    serder
    Member

    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);
    }
    Text orientation #10043

    sdalby
    Member

    Hi serder,

    Unfortunately I havent been able to solved that either, but if you find out, I would be happy to know too.

    Text orientation #10058

    Dimitar
    Participant

    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,
    Dimitar

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

    Text orientation #10114

    serder
    Member

    thanks Dimitar, horizontalTextAlignment and verticalTextAlignment fixed my problem!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.