jQWidgets Forums

Tagged: chart, javascript chart, jquery chart, jqwidgets chart

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

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

Author

Range Selector restrictions with Date Posts

January 15, 2019 at 4:06 pm Range Selector restrictions with Date #103524

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

January 17, 2019 at 11:21 am 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

January 17, 2019 at 2:04 pm 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>

January 21, 2019 at 10:33 am 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

January 21, 2019 at 10:49 am 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

January 22, 2019 at 9:42 am 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

January 22, 2019 at 11:59 am 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

January 22, 2019 at 12:12 pm 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

January 24, 2019 at 8:31 am 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

January 24, 2019 at 10:39 am 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

January 28, 2019 at 2:21 pm 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

January 28, 2019 at 3:46 pm 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

Author

Posts

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

You must be logged in to reply to this topic.