jQuery UI Widgets Forums Chart Range Selector restrictions with Date

This topic contains 11 replies, has 2 voices, and was last updated by  Klaus H 1 year, 2 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • Range Selector restrictions with Date #103524

    Klaus H
    Participant

    Hi,

    I have a scatter graph with datapoints that are rounded to the full minute. The chart can contain data for a whole day, for an hour or for 15 minutes. I also give the user the opportunity to zoom into the graph with the rangeselector.

    When I zoom into the graph and the starting and endpoint aren’t exactly at a full minute mark, the chart does not start or end with a displayed line. There is an offset between the last minute line and the end of the chart, the same offset seems to appear between a data point and a displayed line that marks a full minute. The customer rightfully assumes, that the point should be on the line that marks the full minute. I get that result, if I zoom carefully to the exact minute marks.

    Is it possible to configure the range selector that the range starts and ends on full minutes? I have not found a setting that would allow me to configure such a thing and the two events rangeSelectionChanged and rangeSelectionChanging are not further explained in the API. Do you have a solution for this?

    Best Regards
    Klaus

    Range Selector restrictions with Date #103555

    Hristo
    Participant

    Hello Klaus,

    Could you provide us with a simplified example that demonstrates your case?

    About the rangeSelectionChanged and rangeSelectionChanging event I would like to suggest you look at this demo, which demonstrates them:
    https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_events_range_selector.htm?light

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Range Selector restrictions with Date #103557

    Klaus H
    Participant

    Hello Hristo,

    I have made you a simplified version of the case, 30 minutes of data with 1 data entry per minute, the timestamp always on the full minute.

    In the initial load the start and the end of the chart are the first and last timestamp. I did not put any effort into formatting the timestamps on the axis, but one can see what happens. When I use the range selector, I am free to land on every possible timestamp between the min and max timestamps, for example I move the left side of the range selector from 17-Jan-2019 10:30:0 and land on 17-Jan-2019 10:31:41 and every vertical lign is now on a :41 and therefore no datapoint is on a vertical line anymore.

    So is there a possibility to give the range selector a step like say “minute” or can I react in one of the eventhandlers and round to the next full minute?

    I used the example with the Tesla stock prices from version 6.0.4 as a base for this:

    <!DOCTYPE html />
    <html lang="en">
    <head>
        <title id='Description'>JavaScript Chart Range Selector Example</title>
        <meta name="description" content="This is an example of Javascript Chart Range Selector and Zooming." />
        <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" src="../../jqwidgets/jqxchart.rangeselector.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
    			var chartdatasourcearr = [{"dptimestamp":"2019-01-17 10:30:00","val_590":92.98},{"dptimestamp":"2019-01-17 10:31:00","val_590":81.6},{"dptimestamp":"2019-01-17 10:32:00","val_590":93.4},{"dptimestamp":"2019-01-17 10:33:00","val_590":88.82},{"dptimestamp":"2019-01-17 10:34:00","val_590":88.35},{"dptimestamp":"2019-01-17 10:35:00","val_590":88.89},{"dptimestamp":"2019-01-17 10:36:00","val_590":88.3},{"dptimestamp":"2019-01-17 10:37:00","val_590":88.62},{"dptimestamp":"2019-01-17 10:38:00","val_590":86.6},{"dptimestamp":"2019-01-17 10:39:00","val_590":77.41},{"dptimestamp":"2019-01-17 10:40:00","val_590":84.29},{"dptimestamp":"2019-01-17 10:41:00","val_590":83.98},{"dptimestamp":"2019-01-17 10:42:00","val_590":87.35},{"dptimestamp":"2019-01-17 10:43:00","val_590":92.36},{"dptimestamp":"2019-01-17 10:44:00","val_590":89.53},{"dptimestamp":"2019-01-17 10:45:00","val_590":79.46},{"dptimestamp":"2019-01-17 10:46:00","val_590":89.62},{"dptimestamp":"2019-01-17 10:47:00","val_590":88.94},{"dptimestamp":"2019-01-17 10:48:00","val_590":83.41},{"dptimestamp":"2019-01-17 10:49:00","val_590":91.89},{"dptimestamp":"2019-01-17 10:50:00","val_590":80.62},{"dptimestamp":"2019-01-17 10:51:00","val_590":85.63},{"dptimestamp":"2019-01-17 10:52:00","val_590":87.04},{"dptimestamp":"2019-01-17 10:53:00","val_590":86.14},{"dptimestamp":"2019-01-17 10:54:00","val_590":86.16},{"dptimestamp":"2019-01-17 10:55:00","val_590":79.78},{"dptimestamp":"2019-01-17 10:56:00","val_590":85.54},{"dptimestamp":"2019-01-17 10:57:00","val_590":87.47},{"dptimestamp":"2019-01-17 10:58:00","val_590":86.51},{"dptimestamp":"2019-01-17 10:59:00","val_590":86.88},{"dptimestamp":"2019-01-17 11:00:00","val_590":88.55}];
    
    			
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'dptimestamp' },
                        { name: 'val_590' }
                        ],
    				localdata: chartdatasourcearr
                };
    			
    		
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // prepare jqxChart settings
                var settings = {
                    title: "Tesla Motors Stock Price",
                    description: "(June 2017 - March 2018)",
                    enableAnimations: false,
                    enableCrosshairs: true,
                    padding: { left: 5, top: 5, right: 30, bottom: 5 },
                    titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                    source: dataAdapter,
                    xAxis:
                    {
                        dataField: 'dptimestamp',
                        minValue: Date.parse("2019-01-17 10:30:00"),
                        maxValue: Date.parse("2019-01-17 11:00:00"),
                        type: 'date',
                        baseUnit: 'minute',
                        rangeSelector: {
                            size: 80,
                            padding: {top: 0, bottom: 0 },
                            minValue: Date.parse("2019-01-17 10:30:00"),
                            backgroundColor: 'white',
                            dataField: 'val_590',
                            baseUnit: 'minute',
                            gridLines: { visible: false },
                            serieType: 'area'
                        }
                    },
                    valueAxis:
                    {
                        title: { text: 'Price per share [USD]<br><br>' },
                        labels: { horizontalAlignment: 'right' }
                    },
    
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'scatter',
                                series: [
                                    { dataField: 'val_590', displayText: 'Close Price', lineWidth: 0, lineWidthSelected: 0, symbolSize: 5, symbolType: 'circle'}
                                ]
                            }
    
                        ]
                };
    			
    			$('#chartContainer').jqxChart(settings);
    
            });
        </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>
        <div class="example-description">
        <br />
        <h2>Description</h2>
        <br />
        This is an example of Javascript chart range selector and zooming.  The chart data is prepared from a csv file. You can see an example of a complex tool tip custom formatting with the toolTipCustomFormatFn function. You can also see how to limit the duration of the animation with the animationDuration setting. The code also demonstrates how to render the selector in a separate container. 
        </div>
    </body>
    </html>
    
    Range Selector restrictions with Date #103582

    Hristo
    Participant

    Hello Klaus,

    Thank you for the example.
    I am not sure I understand your issue.
    If you want to have fixed steps to move the RangeSelector then this is not an available feature, unfortunately.
    But I would like to suggest you try to integrate the widget – jqxRangeSelector.
    You could bind to its change event and dynamically to update the view in the jqxChart (or simply hide the internal RangeSelector and move it depends on the external one).
    Could you provide me with more details if the above suggestions do not satisfy your requirements?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Range Selector restrictions with Date #103583

    Klaus H
    Participant

    Hello Hristo,

    thank you for your answer.

    The integrated RangeSelector is preferred by my customer, because it has the graph displayed in it, that is a big help. It’s not a big deal, the customer asked if I could fix the view so the datapoint is always on the line as a nice to have feature.

    You mentioned moving the internal RangeSelector, how is that possible, because I cannot find anything besides the events in the API. The easiest idea would be to create the event, catch the dates, round them to the next full minute and then refresh the selector with these dates. Is that somehow possible? That would be my last idea.

    Best Regards
    Klaus

    Range Selector restrictions with Date #103601

    Hristo
    Participant

    Hello Klaus,

    Please, take a look at this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>JavaScript Chart Range Selector Example</title>
        <meta name="description" content="This is an example of Javascript Chart Range Selector and Zooming." />
        <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/jqxbuttons.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" src="../../jqwidgets/jqxchart.rangeselector.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
    
                var chartdatasourcearr = [
                    { "dptimestamp": "2019-01-17 10:30:00", "val_590": 92.98 },
                    { "dptimestamp": "2019-01-17 10:31:00", "val_590": 81.6 },
                    { "dptimestamp": "2019-01-17 10:32:00", "val_590": 93.4 },
                    { "dptimestamp": "2019-01-17 10:33:00", "val_590": 88.82 },
                    { "dptimestamp": "2019-01-17 10:34:00", "val_590": 88.35 },
                    { "dptimestamp": "2019-01-17 10:35:00", "val_590": 88.89 },
                    { "dptimestamp": "2019-01-17 10:36:00", "val_590": 88.3 },
                    { "dptimestamp": "2019-01-17 10:37:00", "val_590": 88.62 },
                    { "dptimestamp": "2019-01-17 10:38:00", "val_590": 86.6 },
                    { "dptimestamp": "2019-01-17 10:39:00", "val_590": 77.41 },
                    { "dptimestamp": "2019-01-17 10:40:00", "val_590": 84.29 },
                    { "dptimestamp": "2019-01-17 10:41:00", "val_590": 83.98 },
                    { "dptimestamp": "2019-01-17 10:42:00", "val_590": 87.35 },
                    { "dptimestamp": "2019-01-17 10:43:00", "val_590": 92.36 },
                    { "dptimestamp": "2019-01-17 10:44:00", "val_590": 89.53 },
                    { "dptimestamp": "2019-01-17 10:45:00", "val_590": 79.46 },
                    { "dptimestamp": "2019-01-17 10:46:00", "val_590": 89.62 },
                    { "dptimestamp": "2019-01-17 10:47:00", "val_590": 88.94 }, { "dptimestamp": "2019-01-17 10:48:00", "val_590": 83.41 }, { "dptimestamp": "2019-01-17 10:49:00", "val_590": 91.89 }, { "dptimestamp": "2019-01-17 10:50:00", "val_590": 80.62 }, { "dptimestamp": "2019-01-17 10:51:00", "val_590": 85.63 }, { "dptimestamp": "2019-01-17 10:52:00", "val_590": 87.04 }, { "dptimestamp": "2019-01-17 10:53:00", "val_590": 86.14 }, { "dptimestamp": "2019-01-17 10:54:00", "val_590": 86.16 }, { "dptimestamp": "2019-01-17 10:55:00", "val_590": 79.78 }, { "dptimestamp": "2019-01-17 10:56:00", "val_590": 85.54 }, { "dptimestamp": "2019-01-17 10:57:00", "val_590": 87.47 }, { "dptimestamp": "2019-01-17 10:58:00", "val_590": 86.51 }, { "dptimestamp": "2019-01-17 10:59:00", "val_590": 86.88 }, { "dptimestamp": "2019-01-17 11:00:00", "val_590": 88.55 }
                ];
    
                var source =
                {
                    datatype: "json",
                    datafields: [
                        {
                            name: 'dptimestamp',
                            type: 'date'
                        },
                        { name: 'val_590' }
                    ],
                    localdata: chartdatasourcearr
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // prepare jqxChart settings
                var settings = {
                    title: "Tesla Motors Stock Price",
                    description: "(June 2017 - March 2018)",
                    enableAnimations: false,
                    enableCrosshairs: true,
                    padding: { left: 5, top: 5, right: 30, bottom: 5 },
                    titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                    source: dataAdapter,
                    xAxis:
                    {
                        dataField: 'dptimestamp',
                        type: 'date',
                        baseUnit: 'minute',
                        rangeSelector: {
                            size: 80,
                            padding: { top: 0, bottom: 0 },
                            backgroundColor: 'white',
                            dataField: 'val_590',
                            baseUnit: 'minute',
                            gridLines: { visible: false },
                            serieType: 'area'
                        }
                    },
                    valueAxis:
                    {
                        title: { text: 'Price per share [USD]<br><br>' },
                        labels: { horizontalAlignment: 'right' }
                    },
    
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'scatter',
                                series: [
                                    { dataField: 'val_590', displayText: 'Close Price', lineWidth: 0, lineWidthSelected: 0, symbolSize: 5, symbolType: 'circle' }
                                ]
                            }
    
                        ]
                };
    
                $('#chartContainer').jqxChart(settings);
                var chart = $('#chartContainer').jqxChart('getInstance');
    
                $('#click').jqxButton();
                $('#click').click(() =>
                {
                    chart.xAxis.minValue = new Date(2019, 0, 17, 10, 34, 0);
                    chart.xAxis.maxValue = new Date(2019, 0, 17, 10, 38, 0);
                    chart.refresh();
                });
    
            });
        </script>
    </head>
    <body class='default'>
        <div>
            <button id="click">Set Range</button>
            <br><br>
            <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>
    </body>
    </html>

    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Range Selector restrictions with Date #103602

    Klaus H
    Participant

    Hello Hristo,

    thank you very much for this example, combining this with the rangeSelectionChanged event should do the trick. 🙂

    Best Regards
    Klaus

    Range Selector restrictions with Date #103603

    Klaus H
    Participant

    Hello Hristo,

    unfortunately that does not seem to work, putting the code in the rangeSelectionChanged event does not work – also if I use the range selector and then click the button, it also does not work. Any idea why that could be?

    Best Regards
    Klaus

    Range Selector restrictions with Date #103650

    Hristo
    Participant

    Hello Klaus,

    You should change the minValue and maxValue of the “xAxis”.
    Please, try on that way.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Range Selector restrictions with Date #103653

    Klaus H
    Participant

    Hello Hristo,

    I have copied your code from the click event and the chart variable is valid at that point. But setting the chart.xAxis.minValue and maxValue and then chart.refresh() don’t have any effect after I have used the range selector. You can try it for yourself, use the example you provided, then play around with the rangeSelector and then click on the button. When I do this, nothing happens. I am not sure what you mean with changing the minValue and maxValue of the xAxis, that’s what I am doing as far as I understand.

    		var chart = $('#chartContainer').jqxChart('getInstance');
    		console.log("rangeSelectionChanged");
    		console.log(chart);
                    chart.xAxis.minValue = new Date(2019, 0, 17, 10, 34, 0);
                    chart.xAxis.maxValue = new Date(2019, 0, 17, 10, 38, 0);
                    chart.refresh();
    		console.log("rangeSelectionChanged end");

    That’s the code I tried in the rangeSelectionChanged event, all console entries appear. chart is set (also if I initialize it outside the event), but the chart is not refreshed with the new axis values.

    Could you please check the example how I described it or clarify if I misunderstood you? That would be great. 🙂

    Best Regards
    Klaus

    Range Selector restrictions with Date #103714

    Hristo
    Participant

    Hello Klaus,

    Thank you for this response.
    It seems after the first refresh it does not react.
    I am sorry. I am not able to provide you a better solution.

    As a workaround, I would like to show you my previous suggestion.
    Please, take a look at this example with jqxRangeSelector:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>JavaScript Chart Range Selector Example</title>
        <meta name="description" content="This is an example of Javascript Chart Range Selector and Zooming." />
        <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/jqxrangeselector.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.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" src="../../jqwidgets/jqxchart.rangeselector.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
                var chartdatasourcearr = [
                    { "dptimestamp": "2019-01-17 10:30:00", "val_590": 92.98 },
                    { "dptimestamp": "2019-01-17 10:31:00", "val_590": 81.6 },
                    { "dptimestamp": "2019-01-17 10:32:00", "val_590": 93.4 },
                    { "dptimestamp": "2019-01-17 10:33:00", "val_590": 88.82 },
                    { "dptimestamp": "2019-01-17 10:34:00", "val_590": 88.35 },
                    { "dptimestamp": "2019-01-17 10:35:00", "val_590": 88.89 },
                    { "dptimestamp": "2019-01-17 10:36:00", "val_590": 88.3 },
                    { "dptimestamp": "2019-01-17 10:37:00", "val_590": 88.62 },
                    { "dptimestamp": "2019-01-17 10:38:00", "val_590": 86.6 },
                    { "dptimestamp": "2019-01-17 10:39:00", "val_590": 77.41 },
                    { "dptimestamp": "2019-01-17 10:40:00", "val_590": 84.29 },
                    { "dptimestamp": "2019-01-17 10:41:00", "val_590": 83.98 },
                    { "dptimestamp": "2019-01-17 10:42:00", "val_590": 87.35 },
                    { "dptimestamp": "2019-01-17 10:43:00", "val_590": 92.36 },
                    { "dptimestamp": "2019-01-17 10:44:00", "val_590": 89.53 },
                    { "dptimestamp": "2019-01-17 10:45:00", "val_590": 79.46 },
                    { "dptimestamp": "2019-01-17 10:46:00", "val_590": 89.62 },
                    { "dptimestamp": "2019-01-17 10:47:00", "val_590": 88.94 }, { "dptimestamp": "2019-01-17 10:48:00", "val_590": 83.41 }, { "dptimestamp": "2019-01-17 10:49:00", "val_590": 91.89 }, { "dptimestamp": "2019-01-17 10:50:00", "val_590": 80.62 }, { "dptimestamp": "2019-01-17 10:51:00", "val_590": 85.63 }, { "dptimestamp": "2019-01-17 10:52:00", "val_590": 87.04 }, { "dptimestamp": "2019-01-17 10:53:00", "val_590": 86.14 }, { "dptimestamp": "2019-01-17 10:54:00", "val_590": 86.16 }, { "dptimestamp": "2019-01-17 10:55:00", "val_590": 79.78 }, { "dptimestamp": "2019-01-17 10:56:00", "val_590": 85.54 }, { "dptimestamp": "2019-01-17 10:57:00", "val_590": 87.47 }, { "dptimestamp": "2019-01-17 10:58:00", "val_590": 86.51 }, { "dptimestamp": "2019-01-17 10:59:00", "val_590": 86.88 }, { "dptimestamp": "2019-01-17 11:00:00", "val_590": 88.55 }
                ];
    
                var source =
                {
                    datatype: "json",
                    datafields: [
                        {
                            name: 'dptimestamp',
                            type: 'date'
                        },
                        { name: 'val_590' }
                    ],
                    localdata: chartdatasourcearr
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                var start = new Date(2019, 0, 17, 10, 30, 0);
                var end = new Date(2019, 0, 17, 11, 0, 0);
                // prepare jqxChart settings
                var settings = {
                    title: "Tesla Motors Stock Price",
                    description: "(June 2017 - March 2018)",
                    enableAnimations: false,
                    enableCrosshairs: true,
                    padding: { left: 5, top: 5, right: 30, bottom: 5 },
                    titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                    source: dataAdapter,
                    xAxis:
                    {
                        dataField: 'dptimestamp',
                        type: 'date',
                        baseUnit: 'minute',
                        minValue: start,
                        maxValue: end,
                    },
                    valueAxis:
                    {
                        title: { text: 'Price per share [USD]<br><br>' },
                        labels: { horizontalAlignment: 'right' }
                    },
    
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'scatter',
                                series: [
                                    { dataField: 'val_590', displayText: 'Close Price', lineWidth: 0, lineWidthSelected: 0, symbolSize: 5, symbolType: 'circle' }
                                ]
                            }
    
                        ]
                };
    
                $('#chartContainer').jqxChart(settings);
                var chart = $('#chartContainer').jqxChart('getInstance');
    
                var min = new Date(2019, 0, 17, 10, 34, 0);
                var max = new Date(2019, 0, 17, 10, 38, 0);
    
                $("#selectorContainer").jqxRangeSelector({
                    width: 690,
                    height: 100,
                    min: start,
                    max: end,
                    majorTicksInterval: {
                        hours: 1
                    },
                    minorTicksInterval: {
                        minutes: 1
                    },
                    labelsFormat: 'hh:mm',
                    markersFormat: 'hh:mm'
                });
    
                $("#selectorContainer").on('change', function (event)
                {
                    var from = new Date(event.args.from);
                    var to = new Date(event.args.to);
    
                    chart.xAxis.minValue = from;
                    chart.xAxis.maxValue = to;
                    chart.update();
                });
    
                $('#click').jqxButton();
                $('#click').click(() =>
                {
                    chart.xAxis.minValue = min;
                    chart.xAxis.maxValue = max;
                    chart.update();
    
                    $("#selectorContainer").jqxRangeSelector({
                        range: {
                            from: min,
                            to: max
                        }
                    });
                });
    
            });
        </script>
    </head>
    <body class='default'>
        <div>
            <button id="click">Set Range</button>
            <br><br>
            <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>
    </body>
    </html>

    Also, you could include the wanted chart style on the background.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Range Selector restrictions with Date #103717

    Klaus H
    Participant

    Hello Hristo,

    thank you for your feedback, I will show this to my customer. 🙂

    Best Regards
    Klaus

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

You must be logged in to reply to this topic.