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

Tagged: , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Line Series different scale to Column series Posts
  • October 4, 2012 at 1:07 pm Line Series different scale to Column series #8917

    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

    October 5, 2012 at 5:46 am Line Series different scale to Column series #8954

    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/

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

You must be logged in to reply to this topic.