jQWidgets Forums

Tagged: chart

This topic contains 11 replies, has 4 voices, and was last updated by cblin 8 years ago.

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

Author

Range selector keeps state between instances Posts
May 23, 2017 at 7:28 am Range selector keeps state between instances #93802
cblin
Participant
Hi,

I have a problem with the range selector that seems to reuse the state from a previous instance.

See https://www.jseditor.io/?key=rangeselectorreset

Steps to reproduce the problem :
* click ‘run’ => the chart is displayed
* click ‘reload’ => the chart is correctly rendered again after we have ’empty’ its container (i.e after we have deleted the chart)
* move the lower limit of the range selector => the chart is correctly rendered from the new timestamp and the rangeSelector still starts at 00:00:00
* click ‘reload’ => PROBLEM : the chart still starts at the previous timestamp (not very important) BUT THE RANGE SELECTOR NOW STARTS AT THE NEW TIMESTAMP TOO (and so, it is impossible to see the data at 00:00:00 except if the whole page is reloaded …)

Is there at least a workaround to reset the rangeSelector or something like this ?

Thanks,

Chris
```
<!DOCTYPE html />
<html lang="en">
<head>
    <title id='Description'>JavaScript Chart Candlestick series</title>
    <meta name="description" content="This is an example of Javascript Chart Candlestick series." />
    <link rel="stylesheet" href="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
    
    <script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        function renderChart() {
            $('#chartContainer').empty();
            
            // prepare chart data as an array
            // prepare jqxChart settings
            var settings = {
                "enableAnimations":true,
                "title":"",
                "description":"",
                "showLegend":true,
                "legendLayout":{"left":5,"top":5,"width":300,"height":814,"flow":"vertical"},
                "padding":{"left":300,"top":20,"right":10,"bottom":10},
                "source":[
                    {"S1":0,"S3":0,"S2":0,"date":"2016-04-10T22:00:00.000Z","aggregatedValue":0},
                    {"S1":15,"S3":2,"S2":0,"date":"2016-04-11T02:00:00.000Z","aggregatedValue":17},
                    {"S1":47,"S3":1,"S2":1,"date":"2016-04-11T06:00:00.000Z","aggregatedValue":49},
                    {"S1":50,"S3":2,"S2":1,"date":"2016-04-11T10:00:00.000Z","aggregatedValue":53},
                    {"S1":36,"S3":1,"S2":0,"date":"2016-04-11T14:00:00.000Z","aggregatedValue":37},
                    {"S1":4,"S3":0,"S2":0,"date":"2016-04-11T18:00:00.000Z","aggregatedValue":4}],
                "xAxis":{
                    "dataField":"date",
                    "type":"date",
                    "baseUnit":"minute",
                    "gridLines":{"visible":true},
                    "rangeSelector":{
                        "size":100,
                        "backgroundColor":"white",
                        "dataField":"aggregatedValue",
                        "baseUnit":"minute",
                        "gridLines":{"visible":false},
                        "serieType":"area"
                    }
                },
                "colorScheme":"scheme01",
                "valueAxis":{"visible":true},
                "seriesGroups":[
                    {
                        "type":"line",
                        "series":[
                            {"dataField":"S1",displayText:"S1"},
                            {"dataField":"S3",displayText:"S2"},
                            {"dataField":"S2",displayText:"S3"}
                        ]
                    }
                ]
            };
            // setup the chart
            $('<div style="width:100%;height:100%"></div>').appendTo('#chartContainer').jqxChart(settings);
        }
        $(document).ready(function () {
            renderChart();
            
            $('#reload').on('click', renderChart)
        });
    </script>
</head>
<body class='default'>
    <div>
        <div id='chartContainer' style="width:800px; height:500px;">
        </div>
        <br />
        <div id='reload' style="width:800px; height:100px;">RELOAD
        </div>
    </div>
    
</body>
</html>
```
May 24, 2017 at 8:42 am Range selector keeps state between instances #93827

cblin
Participant

Hi,

is there anyone having a look at my question ?

I just need to know if this is a jqx bug or not.

I already had a problem with range selector in charts last week (http://www.jqwidgets.com/community/topic/problem-with-rangeselector-in-strange-circumstances/), and I simply start to discourage myself to use jqx charts …

May 24, 2017 at 7:50 pm Range selector keeps state between instances #93848

Peter Stoev
Keymaster

The recreation is wrong. You should remove it from DOM, add a new Div tag and create a Chart from it.

Regards
Petet

May 29, 2017 at 7:53 am Range selector keeps state between instances #93913

cblin
Participant

Hi Peter,

“remove it from DOM, add a new div tag and create a chart from it” is already what I am doing I think.

Here are the relevant extract from the code :

$(‘#chartContainer’).empty(); //this removes the chart from the DOM

$(‘<div style=”width:100%;height:100%”></div>’).appendTo(‘#chartContainer’).jqxChart(settings); //this adds a div inside chartContainer and creates a chart from it

Maybe there is anoter way to do it that works with jqx chart ?

Thanks for your help,

Chris

May 30, 2017 at 8:07 am Range selector keeps state between instances #93948

atomic
Participant

Hi,

i have just updated to jqxWidgets 4.5.2. and I have the same problem. After refreshing chart it displays zoomed range selected.
For example I have 8760 values (hours in one year) in my range selector, but I initially display only 730 values( 1 month) in the main chart, after refreshing chart I got only 730 values in my range selector, or any other range that is selected in range selector. There is no other way to display all 8760 values in range selector unless hitting F5 :(…
Everything worked fine in version 4 of jqxWidgets.

thanks

May 30, 2017 at 8:09 am Range selector keeps state between instances #93949

admin
Keymaster

$(‘#chartContainer’).empty() does not remove the Chart from the DOM. It removes only its DIV tag.

June 1, 2017 at 8:04 am Range selector keeps state between instances #94004

atomic
Participant

Hi,

jqxChart range selector works correctly in version 4, but not in version 4.5.2.
On refresh it narrows down range of chart to range that is selected.

June 1, 2017 at 10:01 am Range selector keeps state between instances #94015

admin
Keymaster

Hi atomic,

When you claim something, then please be so kind to share jsfiddle.net sample which proves it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 1, 2017 at 11:54 am Range selector keeps state between instances #94031

cblin
Participant

Quote :

$(‘#chartContainer’).empty() does not remove the Chart from the DOM. It removes only its DIV tag.

Please Peter, tell me then how do I remove the chart from the DOM !
Here chartContainer is the parentDiv of the chart so I do not want to do $(‘#chartContainer’).remove()
Also, I saw no method that could be used in the chart API reference …

I’ve used this code with jqwidgets 4.0.0 and it worked so I thought it was correct (despite that in jqwidgets 4.0.0 I can not unselect the first serie as mentionned in my other post).

June 1, 2017 at 12:11 pm Range selector keeps state between instances #94036

admin
Keymaster

Use remove().

Regards,
Peter

June 1, 2017 at 2:12 pm Range selector keeps state between instances #94039

cblin
Participant

Hi peter,

Ok, it is working, thanks for your help, i have updated the jseditor for further reference

This should be noted somewhere in the doc though because it is not obivous that parent.empty() does not behave the same as parent.children().remove() when there is a rangeSelector…

June 1, 2017 at 3:15 pm Range selector keeps state between instances #94044

cblin
Participant

Well, indeed it does work with jqwidgets 4.5.3 (released today) but it does NOT work with jqwidgets 4.5.2.

And you can even keep using empty() on the parent but you need to upgrade to 4.5.3 !
Author

Posts

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

You must be logged in to reply to this topic.