jQWidgets Forums

Tagged: chart, charting, jquery chart, jqwidgets chart, jqxChart

This topic contains 18 replies, has 3 voices, and was last updated by mykola 9 years, 1 month ago.

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

1 2 →

Author

zooming with scroll wheel Posts

March 3, 2016 at 10:01 am 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?

March 3, 2016 at 10:07 am 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

March 3, 2016 at 3:48 pm 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?

March 5, 2016 at 7:55 am zooming with scroll wheel #82119

Peter Stoev

Keymaster

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

Regards,
Peter

March 6, 2016 at 5:16 pm 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

March 6, 2016 at 5:54 pm 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)?

March 10, 2016 at 9:44 am 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?

March 11, 2016 at 12:27 pm zooming with scroll wheel #82356

vasumullapudi

Participant

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

March 15, 2016 at 3:24 pm 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

March 15, 2016 at 3:43 pm 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

March 16, 2016 at 6:08 pm 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?

March 17, 2016 at 1:19 pm 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.

March 17, 2016 at 2:40 pm 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

March 17, 2016 at 3:31 pm 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.

March 17, 2016 at 4:04 pm 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

Author

Posts

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

1 2 →

You must be logged in to reply to this topic.