jQuery UI Widgets Forums Chart zooming with scroll wheel

This topic contains 18 replies, has 3 voices, and was last updated by  mykola 3 years, 12 months ago.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
  • zooming with scroll wheel #82066

    mykola
    Participant

    Is it possible to zoom a chart with a scroll wheel instead of selecting range below the chart?

    zooming with scroll wheel #82067

    Peter Stoev
    Keymaster

    Hi mykola,

    No, this is not possible in our Chart. The zooming in only through the Chart’s Range Selector.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    zooming with scroll wheel #82090

    mykola
    Participant

    well, i’ve added it myself via ‘onwheel’ event with changing minValue and maxValue for xAxis and refreshing the chart, but it works very slow even with just 15 entries. Is there any way to make chart refresh faster?

    zooming with scroll wheel #82119

    Peter Stoev
    Keymaster

    I suppoae you call refresh too many times unnecessary. Call it in a timeout

    Regards,
    Peter

    zooming with scroll wheel #82128

    mykola
    Participant

    well, I call it on each wheel scroll. May be it’s too frequent but I’d like it to work like this (try to scroll inside chart and also move chart left/right with left mouse button pressed):
    http://bcs-express.ru/kotirovki-i-grafiki/brent0516

    zooming with scroll wheel #82129

    mykola
    Participant

    btw, there’s an example (modified your sample):

    <!DOCTYPE html />
    <html lang="en">
    <head>
        <title id='Description'>jqxChart Range Selector Example</title>
        <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: '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>';
                };
    	
    			var minDate = new Date(2010, 5, 1);
    			var maxDate = new Date(2014, 2, 7);
                // prepare jqxChart settings
                var settings = {
                    title: "Tesla Motors Stock Price",
                    description: "(June 2010 - March 2014)",
                    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: '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: minDate,
                            maxValue: maxDate,
                            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();
                    });
    			$('#chartContainer').bind('wheel', onWheel);
    
    			function onWheel(e) {
    				e = e || window.event;
    				
    				if (e.originalEvent != null) e = e.originalEvent;
    				var delta = e.deltaY / -1 || e.detail / -1 || e.wheelDelta;
    
    				var chartInstance = $('#chartContainer').jqxChart('getInstance');
    				
    				if (delta < 0) {
    					var newMin = new Date(chartInstance.xAxis.minValue.getTime() - 10 * 24 * 3600 * 1000);
    					var newMax = new Date(chartInstance.xAxis.maxValue.getTime() + 10 * 24 * 3600 * 1000);
    					chartInstance.xAxis.minValue = newMin < minDate ? minDate : newMin;
    					chartInstance.xAxis.maxValue = newMax > maxDate ? maxDate : newMax;
    				} else if (delta > 0) {
    					var newMin = new Date(chartInstance.xAxis.minValue.getTime() + 10 * 24 * 3600 * 1000);
    					var newMax = new Date(chartInstance.xAxis.maxValue.getTime() - 10 * 24 * 3600 * 1000);
    					if (newMin < newMax) {
    						chartInstance.xAxis.minValue = newMin;
    						chartInstance.xAxis.maxValue = newMax;
    					}
    				}
    				chartInstance.update();
    			}
            });
        </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>
    </body>
    </html>
    

    can you tell me why my wheel zooming stops working after I change selector’s range with mouse (either move it or drag one of it bounds)?

    zooming with scroll wheel #82309

    mykola
    Participant

    btw, I’ve found out that range selector in your example actually works only for candlestick part but not for the volume line. Is it normal? Why do you need two graphs in chart if one of them doesn’t make any sense?

    zooming with scroll wheel #82356

    vasumullapudi
    Participant

    then hide the rangeselector div tag then your scroll will enable for ever

    zooming with scroll wheel #82493

    mykola
    Participant

    but then I’will not be able to go to a different part of a graph when zoomed.

    And the example I told above has been fixed. I suppose that it’s been fixed in 4.1.0. Unfortunately it doesn’t solve my problem

    • This reply was modified 4 years ago by  mykola.
    zooming with scroll wheel #82496

    Peter Stoev
    Keymaster

    Hi mykola,

    Your handler can be called multiple times on mouse wheel which results in multiple refreshes which of course slows things down. I suggest you to use a settimeout and clear it if there’s existing timeout already running or implement it with flags.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    zooming with scroll wheel #82550

    mykola
    Participant

    Peter,
    here’s an example

    I’ve never done such thing (delayed action) so the code isn’t optimal I guess but it’s actually executed once in several scrolls (I’ve added logging to see it), but performance isn’t good. You can turn on/off timeout by clicking a button under a chart.

    Btw, one more question arouse: what’s wrong with the Actual curve? Why it has gap in the beginning although I’ve set emptyPointsDisplay: ‘connect’ explicitly? And in my real data such gaps appear frequently when a lot of data is displayed in such mixed manner. Sometimes a curve consists of such sections a 5 day long (working days) with gaps on weekends. Why does it happen?

    zooming with scroll wheel #82580

    mykola
    Participant

    Do you remember about my problem with range selector when my wheel zooming stopped working after I changed selector’s range with mouse? Here you can see a demo of it. Try to zoom in/out with mouse wheel, then do anything with range selector and try again zooming with mouse wheel: it stops working.
    I solved this problem by modifying the code of the jqxchart.rangeselector.js:
    removed everything in _onSliderMouseUp: function (event) after these lines:

                var minValue = self._offsetToValue(groupIndex, from - fullRect[posProp]);
                var maxValue = self._offsetToValue(groupIndex, to - fullRect[posProp]);

    and call my function zoomChart(minValue, maxValue) instead.
    zoomChart() is pretty simple:

    function zoomChart(minValue, maxValue) {
    	settings.xAxis.minValue = minValue;
    	settings.xAxis.maxValue = maxValue;
    	chart.update();
    }

    where settings are chart’s settings.

    • This reply was modified 4 years ago by  mykola.
    • This reply was modified 4 years ago by  mykola.
    zooming with scroll wheel #82585

    Peter Stoev
    Keymaster

    Hi mykola,

    I think the main problem is that you try to simulate range selector’s logic without a range selector and for this part you should know how jqxChart internally works and to know its code. The best approach in your case is to have a range selector and if you want to modify the range selector, implement mouse wheel behavior for the range selector. In addition, you should only do this if you have developer or enterprise license and then minify the source code which you use, as written in our EULA document.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    zooming with scroll wheel #82589

    mykola
    Participant

    Hi Peter,
    I think the main problem is that you try to simulate range selector’s logic without a range selector
    No, I have a range selector. You can see it in the example from my last post. Actually I’d like not to have it but I don’t know how to drag the chart when it’s zoomed without it.
    And it would be strange to have a problem with range selector without it. Don’t you think so? 🙂
    As for the license, we do have a developer license and a premium support. It’s about to expire soon, but I suppose that we’ll renew it. 🙂

    • This reply was modified 4 years ago by  mykola.
    • This reply was modified 4 years ago by  mykola.
    zooming with scroll wheel #82596

    Peter Stoev
    Keymaster

    Hi mykola,

    At least in this sample: https://www.jseditor.io/?key=data-with-gap-and-scrolling, there is no range selector.

    Anyway, my point from the last mail is still valid.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.