RangeSelector – moving in months not days

[antrax13Participant]

Hi I have an issue with RangeSelector.

I am using months only not days so when I am selecting/moving/dragging range selector I need to move in months not days.

The issue is that when I can move to any specific day my stacked columns wont be aligned with x.

OK screenshot https://postimg.cc/B8G9NRY6
NOT OK screenshot https://postimg.cc/Th1SjRd0

how can I implement this?

my data does not contain days only months like 01/2013,02/2013,03/2013

var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'Open' },
                    { name: 'High' },
                    { name: 'Low' },
                    { name: 'Close' },
                    { name: 'Volume' },
                    { name: 'AdjClose' }
                ],
                url: 'web/images/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>';
        };
        // prepare jqxChart settings
        var settings = {
            title: "Tesla Motors Stock Price",
            description: "(June 2017 - March 2018)",
            enableAnimations: true,
            animationDuration: 1500,
            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(2016, 0, 1),
                    maxValue: new Date(2017, 0, 1),
                    type: 'date',
                    baseUnit: 'month',
                    labels:
                        {
                            formatFunction: function (value) {
                                return 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,
                        minValue: new Date(2016, 0, 1),
                        maxValue: new Date(2019, 0, 1),
                        padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
                        backgroundColor: 'white',
                        dataField: 'Open',
                        baseUnit: 'month',
                        gridLines: { visible: true },
                        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: 'stackedcolumn',
                        orientation: 'vertical',
                        series: [
                            {
                                dataField: 'Open',
                                color: "#006699",
                            },
                            {
                                dataField: 'Close',
                                color: "#ffb84d",
                            }
                        ]
                    },
                    {
                        type: 'line',
                        toolTipFormatFunction: toolTipCustomFormatFn,
                        valueAxis: {
                            position: 'right',
                            unitInterval: 20,
                            visible: true,
                            gridLines: { visible: false },
                            title: { text: 'Open Anomalies' },
                            minValue: 0,
                        },
                        series: [
                            {
                                dataField: 'Open',
                                labels:
                                    {
                                        visible: true,
                                        backgroundColor: '#FEFEFE',
//                                        backgroundOpacity: 0.2,
                                    borderColor: '#7FC4EF',
//                                        borderOpacity: 0.7,
                                    padding: { left: 5, right: 5, top: 0, bottom: 0 }
                                },
                            },
                        ]
                    }
                ]
        };
        $('#jqxTest').jqxChart(settings).
        on('rangeSelectionChanging', function (event) {
            var args = event.args;
            args.instance.description = args.minValue.getFullYear() + " - " + args.maxValue.getFullYear();
        });

[HristoParticipant]

Hello antrax13,

I try to recreate your case but it seems to work fine.
Could you provide me with a few dummy records to reproduce your cases?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[antrax13Participant]

01/2013,19,25,17.54,23.89,18766300,23.89
02/2013,25,25.92,20.27,21.96,8218800,21.96
03/2013,23,23.1,18.71,19.2,5139800,19.2
04/2013,20,20,15.83,16.11,6866900,16.11
05/2013,16.4,16.63,14.98,15.8,6921700,15.8
06/2013,16.14,17.52,15.57,17.46,7711400,17.46
07/2013,17.58,17.9,16.55,17.4,4050600,17.4
08/2013,17.95,18.07,17,17.05,2202500,17.05
09/2013,17.39,18.64,16.9,18.14,2680100,18.14
10/2013,17.94,20.15,17.76,19.84,4195200,19.84
11/2013,19.94,21.5,19,19.89,3739800,19.89
12/2013,20.7,21.3,20.05,20.64,2621300,20.64
01/2014,21.37,22.25,20.92,21.91,2486500,21.91
02/2014,21.85,21.85,20.05,20.3,1825300,20.3
03/2014,20.66,20.9,19.5,20.22,1252500,20.22
04/2014,20.5,21.25,20.37,21,957800,21
05/2014,21.19,21.56,21.06,21.29,653600,21.29
06/2014,21.5,21.5,20.3,20.95,922200,20.95
07/2014,20.91,21.18,20.26,20.55,619700,20.55
08/2014,20.55,20.9,20.51,20.72,467200,20.72
09/2014,20.77,20.88,20,20.35,616000,20.35
10/2014,20.2,20.44,19.55,19.94,426900,19.94
11/2014,20.5,20.97,20.33,20.92,718100,20.92
12/2014,21,21.95,20.82,21.95,1230500,21.95
01/2015,21.95,22.18,20.85,21.26,913000,21.26
02/2015,21.54,21.55,20.05,20.45,796200,20.45
03/2015,20.1,20.16,19.52,19.59,741900,19.59
04/2015,19.9,19.98,19.45,19.6,812700,19.6
05/2015,19.65,19.65,18.82,19.03,1281300,19.03
06/2015,18.69,18.88,17.85,17.9,797600,17.9
07/2015,17.8,17.9,17.39,17.6,691000,17.6
08/2015,18.18,18.45,17.66,18.32,634000,18.32
09/2015,18.45,18.8,18.26,18.78,485800,18.78
10/2015,18.96,19.4,18.78,19.15,447900,19.15
11/2015,19.59,19.59,18.6,18.77,601300,18.77
12/2015,18.54,19.25,18.33,18.79,579100,18.79
01/2016,18.65,19.11,18.51,19.1,296000,19.1
02/2016,19.09,20.39,19,20.13,1088100,20.13
03/2016,19.25,19.71,18.95,19.2,673100,19.2
04/2016,19.16,19.98,18.56,19.9,503300,19.9
05/2016,19.89,20.27,19.6,19.75,433800,19.75
06/2016,19.75,19.87,19.5,19.7,379600,19.7
07/2016,19.7,20.19,19.61,19.87,732800,19.87
08/2016,19.66,19.79,19.33,19.48,201400,19.48
09/2016,19.62,20.69,19.6,20.45,494900,20.45
10/2016,20.37,21.24,20.31,21.06,487100,21.06
11/2016,20.87,21.3,20.66,21.05,434600,21.05

[antrax13Participant]

If you cant replicate that issue could you post your solution and data somewhere?

[HristoParticipant]

Hello antrax13,

Thank you for the example and the data.
I try to recreate your case but it seems to work fine.
In a case where the whole month is not visualized the jqxChart does not render column.
The second image that you provided looks a little bit strange – the columns are not aligned.
I use your code and data and it seems to work fine.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[antrax13Participant]

Hi Hristo,

https://i.postimg.cc/zv0C9R3x/stillthesameissue.png

Your solution can replicate my issue. Please have a look at the screenshot from your jsfiddle.

There are certain points (ORANGE arrow) when these points are selected, Stack bar wont be aligned with X asis (RED ARROWS).

Thats why I was trying to ask if there is a posibility for a range selector to move/slide in months instead of days.

Thank you very much for trying to find the solution Hristo much appreciated.
Our company owns the licence for jqwidgets so we definetely would like and love this feature.

Maybe just something for you guys to add/consider in next release.

In the meantime if that will help someone we got rid of zooming chart (range selector) and we have a predefined dates(4 dropdowns = start month, start year, end month & end year) that user can select. User is no longer able to slide to date 15/02/2018 but will be forced to select Start month february and start year = 2018 and this will align chart properly.

[HristoParticipant]

Hello antrax13,

Thank you for this feedback.
Also, I would like to suggest another option that you could try.
You could integrate our jqxRangeSelector separately.
As the suggestion in this topic.
You could use it to slide on a specific slice of ticks (months).

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts