Chart: Auto Size Y Axis? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: charting, html5 chart, jquery chart, jquery graph

This topic contains 10 replies, has 3 voices, and was last updated by Peter Stoev 10 years, 8 months ago.

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

Author

Chart: Auto Size Y Axis? Posts

April 29, 2013 at 3:32 pm Chart: Auto Size Y Axis? #20245

AllThumbsGeek

Member

Is it possible to auto size the Y axis? How would I do this?

Thanks,

ATG

April 30, 2013 at 7:54 am Chart: Auto Size Y Axis? #20306

Peter Stoev

Keymaster

Hi,

Please, find below a sample with auto-size of Y axis. The minValue and maxValue fields of the valueAxis are not set so it will be auto-sized.


<!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 Line Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'S&P 500' },
                    { name: 'NASDAQ' }
                ],
                url: '../sampledata/nasdaq_vs_sp500.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            // prepare jqxChart settings
            var settings = {
                title: "U.S. Stock Market Index Performance (2011)",
                description: "NASDAQ Composite compared to S&P 500",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        dataField: 'Date',
                        formatFunction: function (value) {
                            return months[value.getMonth()];
                        },
                        toolTipFormatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()];
                        },
                        type: 'date',
                        baseUnit: 'month',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        gridLinesInterval: 3,
                        gridLinesColor: '#888888',
                        valuesOnTicks: false
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            valueAxis:
                            {
                                displayValueAxis: true,
                                description: 'Daily Closing Price',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'S&P 500', displayText: 'S&P 500' },
                                    { dataField: 'NASDAQ', displayText: 'NASDAQ' }
                                ]
                        }
                    ]
            };
            // 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/

May 1, 2013 at 1:06 am Chart: Auto Size Y Axis? #20368

AllThumbsGeek

Member

That worked perfectly – thank you.

ATG

July 1, 2014 at 1:18 pm Chart: Auto Size Y Axis? #56614

DannyB

Participant

Hey guys,

Dont mean to resurrect this post, but either this auto size stopped working, or something else is not aligned.

I expect this autosize property to make it so the Y axis will not start from 0 (unless needed).

With the above code, the Y axis starts from 0, although it should probably start at around 1000

Here is an image to clarify. Any assistance is greatly appreciated.
yAxis Problem

July 1, 2014 at 1:26 pm Chart: Auto Size Y Axis? #56616

Peter Stoev

Keymaster

Hi DannyB,

There is no problem with the Auto Size. Btw, there is no autosize property, there is Auto-Size feature which is turned on by default and It works perfectly well. However, Examples are updated over time. If you do not like how our auto-sizing logic works, you can always define the minValue, maxValue and unitInterval settings.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 1, 2014 at 1:41 pm Chart: Auto Size Y Axis? #56618

DannyB

Participant

Thanks Peter,

But I could not make sense of the reply, sorry.
As shown in the above images – the Y Axis is NOT automatically scaled.

I followed the documentation, and everything I could find on the internet, and could not make it work.

Here is a jsfiddle, based on one of the examples from your documentation, where you can see that it is not auto scaled, not by default, and not manually.

This chart is not displayed properly.
http://jsfiddle.net/DannyB/b27Vr/

Thanks again,
;DannyB

July 1, 2014 at 1:42 pm Chart: Auto Size Y Axis? #56619

Peter Stoev

Keymaster

Hi DannyB,

If you do not like how our auto-sizing logic works, you can always define the minValue, maxValue and unitInterval settings. We will continue improving the auto-sizing behavior for the future releases.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 1, 2014 at 2:28 pm Chart: Auto Size Y Axis? #56622

DannyB

Participant

Peter – can you explain to me how DOES it work?
It simply does not do anything now – with and without it, its the same – you can easily see it in the above jsfiddle.

This seems to be a bug, not a feature.

( I want to avoid the minValue, since then I need to do calculations to find it. )

July 1, 2014 at 2:37 pm Chart: Auto Size Y Axis? #56623

Peter Stoev

Keymaster

Hi DannyB,

The unitInterval, minValue and maxValue are automatically calculated in order to display your Graph. Yes, probably it could be better, but that is how it works. if you do not like this automatic behavior, then define the minValue, maxValue and unitInterval in order to to display the graphs according to your expectations.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 1, 2014 at 4:19 pm Chart: Auto Size Y Axis? #56625

DannyB

Participant

Peter – I don’t mean to be rude, but you are not listening at all.
minValue is NOT calculated automatically. It stays on zero as can be seen by my jsfiddle example, which I am sure you didnt bother to look at.

July 1, 2014 at 5:33 pm Chart: Auto Size Y Axis? #56626

Peter Stoev

Keymaster

Hi DannyB,

Thank you for the feedback. We will consider whether the feature should work as we designed it or should work in the way you requested. If we decide to make changes, then you may expect them in a future release and the information about the feature will be available in the Release Notes. Yes, I looked at your fiddle and I wrote you several times that the feature works in the way we planned it. In the meantime, you can use what I have suggested you as a solution.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.