jQuery UI Widgets Forums Chart Reset Range Selection programmatically

This topic contains 9 replies, has 4 voices, and was last updated by  Dimitar 2 years, 10 months ago.

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

  • SumitRoy
    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


    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/


    SumitRoy
    Participant

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


    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


    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/


    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


    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/


    JanB
    Participant

    Hello Dimitar,

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

    Kind reaguards,
    Jan


    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,


    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/

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

You must be logged in to reply to this topic.