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
    Member

    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?

    Thanks
    Steve

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

    Dimitar
    Participant

    Hello stevepeach,

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

    Luxembourg,81278.63,16.2,13167.13806
    Singapore,57596.47,102.4,58978.78528
    Norway,53285.21,47.7,25417.04517
    USA,45759.46,58.9,26952.32194
    Austria,39269.33,70.4,27645.60832
    Germany,34065.12,78.8,26843.31456
    Canada,38065.13,34,12942.1442

    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">
    <head>
    <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,
    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' },
    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)', opacity:0.3 }
    ]
    }
    ]
    };
    // setup the chart
    $('#jqxChart').jqxChart(settings);
    });
    </script>
    </head>
    <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;">
    </div>
    </div>
    </div>
    </body>
    </html>

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

    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.