jQuery UI Widgets Forums Chart yAxis

This topic contains 6 replies, has 2 voices, and was last updated by  mrezzonico 6 days, 1 hour ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    yAxis Posts
  • yAxis #114217

    mrezzonico
    Participant

    If in the example “javascript_chart_line_series.htm” you add:
    minValue: 0
    maxValue: 100

    … and replace the line:
    url: ‘../sampledata/nasdaq_vs_sp500.txt’
    with:
    url: ”

    … then the yAxis is not displayed.

    In other words, if there is no data, the yAxis is not displayed.
    Is it possible to force the yAxis to be displayed even if there is no values ?

    Thanks
    Miche

    • This topic was modified 1 week, 4 days ago by  mrezzonico.
    • This topic was modified 1 week, 4 days ago by  mrezzonico.
    yAxis #114228

    Hristo
    Participant

    Hello Miche,

    You need to use some custom logic to achieve it.
    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    yAxis #114230

    mrezzonico
    Participant

    Hello Hristo,
    thanks for your answer.
    Sorry but I did a mistake in explaining my problem.

    Forget my previous example and try “javascript_chart_negative_values.htm”.
    Now in the file “weather_geneva.txt” delete all the data except the first and the last line.
    If you refresh the chart the yAxis is not displayed.

    Here is a link where you can verify my problem:

    http://62.48.115.40/jqwidgets/javascript_chart_negative_values.htm

    Sorry for the mistake !!

    Regards
    Miche

    yAxis #114234

    Hristo
    Participant

    Hello Miche,

    As you started you could determinate the minimum and maximum.
    Also, with this, you should include an empty initial value.
    In that way, you could achieve this – to have a value axis.
    After that just update the source with the desired values.
    Please, take a look at this example:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title id="Description">JavaScript Chart Columns Series with Negative values</title>
        <meta name="description" content="This is an example of JavaScript Chart with Columns Series and negative values." />
        <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <script type="text/javascript" src="../../../scripts/jquery-1.12.4.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/jqxdraw.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var url = "../../sampledata/weather_geneva.txt"
                    // prepare the data
                var source = {
                    datatype: "json",
                    datafields: [{
                        name: "month"
                    }, {
                        name: "min"
                    }, {
                        name: "max"
                    }, ],
                    // url: "../../sampledata/weather_geneva.txt"
                    localdata: [
                        // Initial Temp Value
                        // {
                        //     month: "Jan",
                        //     min: -40,
                        //     max: 60
                        // }
                        {}
                    ]
                };
    
                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,
                    colorScheme: "scheme05",
                    xAxis: {
                        dataField: "month",
                        displayText: "Month",
                        unitInterval: 1,
                        gridLines: {
                            interval: 3
                        }
                    },
                    valueAxis: {
                        unitInterval: 5,
                        minValue: -10,
                        maxValue: 40,
                        title: {
                            visible: true,
                            text: "Temperature [C]<br>"
                        },
                        labels: {
                            formatSettings: {
                                decimalPlaces: 1,
                                negativeWithBrackets: false
                            },
                            horizontalAlignment: "right"
                        }
                    },
                    seriesGroups: [{
                        type: "column",
                        //useGradient: false,
                        series: [{
                            dataField: "max",
                            displayText: "Max Temperature"
                        }, {
                            dataField: "min",
                            displayText: "Min Temperature"
                        }]
                    }]
                };
    
                // setup the chart
                $("#chartContainer").jqxChart(settings);
    
                setTimeout(() => {
                    source.localdata = null;
                    source.url = url;
                    dataAdapter.dataBind();
                }, 1800);
            });
        </script>
    </head>
    
    <body>
        <div id="chartContainer" style="width: 850px; height: 500px"></div>
    </body>
    
    </html>

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    yAxis #114251

    mrezzonico
    Participant

    Hello Hristo,

    thanks for your help.
    As you can verify with the following link it works, but after 1800 ms the yAxis disappears.

    javascript_chart_negative_values2.htm

    Regards
    Miche

    • This reply was modified 6 days, 5 hours ago by  mrezzonico.
    yAxis #114253

    Hristo
    Participant

    Hello Miche,

    But this happens for the design of the example.
    I prepared a previous example based on the existing data source.
    Only to demonstrates how you could update it with new data.
    If you remove the part with the setTimeout function this will not happen or you could refer to URL with valid resources.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    yAxis #114256

    mrezzonico
    Participant

    Hi Hristo,

    I think I have found a solution to my problem.
    Here is a working example (the yAxis is displayed even if there is no data):
    Example

    If there is no data to display the content of the json file must be:
    [
    {“month”: “”, “min”: “”, “max”: “”}
    ]

    If instead the content of the json file is:
    [
    ]

    the yAxis is not displyed.

    Regards
    Miche

    • This reply was modified 6 days, 1 hour ago by  mrezzonico.
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.