yAxis - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

January 13, 2021 at 8:01 pm 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.

January 14, 2021 at 2:11 pm 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

January 14, 2021 at 3:54 pm 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

January 15, 2021 at 1:28 pm 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

January 19, 2021 at 10:38 am 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.

January 19, 2021 at 1:32 pm 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

January 19, 2021 at 2:44 pm 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.

Author

Posts

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

You must be logged in to reply to this topic.