jQuery UI Widgets Forums Chart Line Series different scale to Column series

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 4 months ago.

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

  • stevepeach

    I am creating charts based on your ‘jqxChart Column Series Example’ with 2 column series and one line series – the line series appears to use its own different scale – how do I make the line use the same scale as the column chart as I am comparing all 3 values?


    • This topic was modified 11 years, 4 months ago by  Peter Stoev. Reason: Moved to Chart Forum


    Hello stevepeach,

    First please take a look at the data source of this example:


    The third value, or, in this case, DebtPercent is signifacantly smaller than the oter two numeric values and it is put in in its own valueAxis.

    If you would like to show this value on par with the oter two, you would have to change the code as follows:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <title id='Description'>jqxChart Column Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.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 as an array
    var source =
    datatype: "csv",
    datafields: [
    { name: 'Country' },
    { name: 'GDP' },
    { name: 'DebtPercent' },
    { name: 'Debt' }
    url: '../sampledata/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: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    dataField: 'Country',
    showGridLines: true
    colorScheme: 'scheme01',
    type: 'column',
    columnsGapPercent: 50,
    unitInterval: 5000,
    displayValueAxis: true,
    description: 'GDP & Debt per Capita($)'
    series: [
    { dataField: 'GDP', displayText: 'GDP per Capita'},
    { dataField: 'Debt', displayText: 'Debt per Capita' },
    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)', opacity:0.3 }
    // setup the chart
    <body class='default'>
    <div style='height: 600px; width: 682px;'>
    <div id='host' style="margin: 0 auto; width:680px; height:400px;">
    <div id='jqxChart' style="width:680px; height:400px; position: relative; left: 0px; top: 0px;">

    However, the presentation of DebtPercent must now be of the same type (i.e. column) as the others and it would be almost invisible due to its small value, compared to the other two.

    Best Regards,

    jQWidgets team

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

You must be logged in to reply to this topic.