Reset Range Selection programmatically - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: #rangeselector, chart, jqxChart, Range Selection, range selector, reset, zoom, zooming

This topic contains 9 replies, has 4 voices, and was last updated by Dimitar 7 years, 1 month ago.

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

Author

Reset Range Selection programmatically Posts

May 15, 2015 at 10:27 am Reset Range Selection programmatically #71171

Participant

hello jqxWidget team,
first of all I am using your jqxChart which is awesome.
I have a situation where I was using a combo box of different y axis value.
I am using range selector in the chart and at a time only one Y Axis value is displayed.
now the problem is once a range is changed (by sliding left/right), then after selecting another Y axis value range selector is not resetted.
Can you please tell me how to reset range selector programmatically?

thanks & regards
Sumit Roy

May 15, 2015 at 11:55 am Reset Range Selection programmatically #71175

Dimitar

Participant

Hello Sumit,

This can be achieved by resetting the xAxis minValue and maxValue properties. Here is an example:

<!DOCTYPE html />
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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="../../jqwidgets/jqxchart.rangeselector.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'Open' },
                    { name: 'High' },
                    { name: 'Low' },
                    { name: 'Close' },
                    { name: 'Volume' },
                    { name: 'AdjClose' }
                    ],
                url: '../sampledata/TSLA_stockprice.csv'
            };

            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'];

            var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                var dataItem = dataAdapter.records[itemIndex];
                return '<DIV style="text-align:left"><b>Date: ' +
                        categoryValue.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                        '</b><br />Open price: $' + dataItem.Open +
                        '</b><br />Close price: $' + dataItem.Close +
                        '</b><br />Daily volume: ' + dataItem.Volume +
                         '</DIV>';
            };

            // prepare jqxChart settings
            var settings = {
                title: "Tesla Motors Stock Price",
                description: "(June 2010 - March 2014)",
                enableAnimations: true,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 30, bottom: 5 },
                titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'Date',
                    minValue: new Date(2012, 0, 1),
                    maxValue: new Date(2013, 11, 31),
                    type: 'date',
                    baseUnit: 'day',
                    labels:
                    {
                        formatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
                        }
                    },
                    rangeSelector: {
                        // Uncomment the line below to render the selector in a separate container 
                        //renderTo: $('#selectorContainer'),
                        size: 80,
                        padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
                        minValue: new Date(2010, 5, 1),
                        backgroundColor: 'white',
                        dataField: 'Close',
                        baseUnit: 'month',
                        gridLines: { visible: false },
                        serieType: 'area',
                        labels: {
                            formatFunction: function (value) {
                                return months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
                            }
                        }
                    }
                },
                valueAxis:
                {
                    title: { text: 'Price per share [USD]<br><br>' },
                    labels: { horizontalAlignment: 'right' }
                },

                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            series: [
                                { dataField: 'Close', displayText: 'Close Price', lineWidth: 1, lineWidthSelected: 1 }
                            ]
                        }

                    ]
            };

            $('#chartContainer').jqxChart(settings).
                on('rangeSelectionChanging', function (event) {
                    var args = event.args;
                    args.instance.description = args.minValue.getFullYear() + " - " + args.maxValue.getFullYear();
                });

            $('#resetZooming').click(function () {
                var xAxis = $('#chartContainer').jqxChart('xAxis');
                xAxis.minValue = new Date(2012, 0, 1);
                xAxis.maxValue = new Date(2013, 11, 31);
                $('#chartContainer').jqxChart('refresh');
            });
        });
    </script>
</head>
<body class='default'>
    <div>
        <div id='chartContainer' style="width: 800px; height: 500px;">
        </div>
        <!-- you can optionally render the selecor in this container -->
        <div id='selectorContainer' style="width: 500px; height: 100px;">
        </div>
    </div>
    <button id="resetZooming">
        Reset zooming</button>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 18, 2015 at 8:49 am Reset Range Selection programmatically #71220

SumitRoy

Participant

Thanks jqxWidget team. It worked like a charm.. Thanks a lot

May 11, 2016 at 1:46 pm Reset Range Selection programmatically #84267

JanB

Participant

Hello jqxWidget Team,

i ran into a similar error today with the jqxgrid.

I want to use two dateinput-fields to set the range of a chart. The Chart itsself provides a rangeselector too.
The interaction between the dateinput-fields, the rangeselector and the Chart works perfectly until i use the rangeselector.
From there on just the rangeselector takes advantage to the chart. An update from the two dateinput-fields or the given “resetZooming”-button
from your example wont work. I testet both, using the same or another div for the selector.

Can you please check this again for the Version 4.1.2?

Kind regards
Jan

May 12, 2016 at 6:00 am Reset Range Selection programmatically #84277

Dimitar

Participant

Hello Jan,

Could you, please, share a jsEditor example we can test to reproduce this issue?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 24, 2016 at 11:17 am Reset Range Selection programmatically #84612

JanB

Participant

Hello Dimitar,

sorry for taking me so long to provide my example. I took your “jqxChart Range Selector Example”-Code from your homepage and added two jqxDateTimeInputs.
Both inputs work for the chart and the selector as log as you didn’t use the selector. The selector itsself updates both inputfields. I expected to end up in a “chainreaction” from the fields updating each other. For my project i used CSV-data for the chart as source too, so i hope the rebuilded example is sufficient.
My example should be here: https://www.jseditor.io/?key=date-range-selection

Please let me know if you can reproduce my issue or need any further information.

Kind reguards
Jan

May 25, 2016 at 6:08 am Reset Range Selection programmatically #84639

Dimitar

Participant

Hello Jan,

Thank you for the example. Please try the solution for updating the range selector’s min and max values provided in the following forum post: http://www.jqwidgets.com/community/topic/chart-not-reset-on-update-when-any-range-is-selected/#post-84362. We hope it is helpful to you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 27, 2016 at 10:53 am Reset Range Selection programmatically #84699

JanB

Participant

Hello Dimitar,

thank you for your help, that solution seems to work for me too.

Kind reaguards,
Jan

July 22, 2017 at 12:21 am Reset Range Selection programmatically #95059

oracleruiz

Participant

Hi everyone,

I currently have the same issue. I tried the solution on Dimitar’s and it works partially. The problem there is that range selector doesn’t recover the original state. Actually it remains unusable and broken.

I require a totally reset the chart and its range selector. With the Dimitar’s solutions the chart’s data got successful reset but as I mentioned the range selector got broken. You can check here what I am saying: http://jsfiddle.net/mmdLs2od/2/

Is there any new way to reset the chart and its range selector properly?

Regards,

July 24, 2017 at 5:43 am Reset Range Selection programmatically #95079

Dimitar

Participant

Hi oracleruiz,

Thank you for your feedback. We confirm this issue. Unfortunately, we cannot currently offer a workaround on the matter.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.