jQWidgets Forums

jQuery UI Widgets Forums Chart Chart's title, X &Y axis not positioned correctly

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • nou
    Member

    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.png

    In 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);
    }


    Peter Stoev
    Keymaster

    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 Stoev

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

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

You must be logged in to reply to this topic.