jQuery UI Widgets › Forums › Chart › Stacked Columns w/ Negative values

Tagged: , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Stacked Columns w/ Negative values Posts
  • May 8, 2012 at 10:00 pm Stacked Columns w/ Negative values #3982

    dbetts
    Member

    I’m trying to stack columns where I have two seriesGroups of numbers.
    The first seriesGroup contains positive numbers ranging from 2 to 8.
    The second seriesGroup contains negative numbers ranging from 0 to -10,000.

    Positive numbers will ALWAYS be between 2 and 8. Negative numbers will ALWAYS be between 0 and -10,000.

    I’d like the y-axis to range from -10,000 at the minimum to 8 at the maximum.
    I’d like the zero-axis of the graph to be located in the middle of the chart vertically.
    The unit interval for the first seriesGroup (positive numbers) should be 0.5 and the unit interval for the second seriesGroup (negative numbers) should be 500.

    The two seriesGroups should meet at the zero-axis and then display themselves either vertically positive, or vertically negative.

    The biggest issue is getting the y-axis to display with two separate “unit intervals”, and then have the stacked columns display properly.
    How can I make this happen?
    Thanks,
    Derrick

    May 9, 2012 at 6:39 am Stacked Columns w/ Negative values #4002

    Peter Stoev
    Keymaster

    It is possible to have two Stack Column series with two separate y-axis , but unfortunately it is not possible to render them in the requested way. The stack columns suppose having a stack of columns displayed in 1 axis and the result will be not the expected one.

    Here’s an example of a Chart with two Stack Column series groups:

    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'month' },
                        { name: 'min' },
                        { name: 'max' },
                    ],
                    url: '../sampledata/weather_geneva.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: "Weather in Geneva, Switzerland",
                    description: "Climatological Information about Geneva",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    categoryAxis:
                        {
                            text: 'Category Axis',
                            textRotationAngle: 0,
                            dataField: 'month',
                            showTickMarks: true,
                            tickMarksInterval: 1,
                            tickMarksColor: '#888888',
                            unitInterval: 1,
                            showGridLines: true,
                            gridLinesInterval: 3,
                            gridLinesColor: '#888888',
                            axisSize: 'auto'
                        },
                    colorScheme: 'scheme05',
                    seriesGroups:
                        [
                            {
                                type: 'stackedcolumn',
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    minValue: -20,
                                    maxValue: 30,
                                    displayValueAxis: true,
                                    description: 'Max Temperature [C]',
                                    axisSize: 'auto',
                                    tickMarksColor: '#888888'
                                },
                                series: [
                                        { dataField: 'max', displayText: 'Max Temperature'}
                                    ]
                            },
                            {
                                type: 'stackedcolumn',
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    minValue: -20,
                                    maxValue: 30,
                                    displayValueAxis: true,
                                    description: 'Min Temperature [C]',
                                    axisSize: 'auto',
                                    tickMarksColor: '#888888'
                                      },
                                series: [
                                { dataField: 'min', displayText: 'Min Temperature' }
                                ]
                            }
                        ]
                };
                
                // setup the chart
                $('#jqxChart').jqxChart(settings);
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxChart' style="width:680px; height:400px">
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    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.