range selector

[atomicParticipant]

Hi guys,
I have two jqx charts on my page, only one of them use rangeSelector. I noticed that sometimes this value is kept among other instances of jqx chart and rendering is wrong since x-axis gets selected values. if you console.log instances of both charts on page I noticed that each have property _selectorRange set and sometimes other jqx charts (one without range selector) is affected.
Below you can fin two functions for creating two charts on my page, one is with range selector and other is not.

createResultChart(daResults, iter){
        let minValue = 1;
        let maxValue = iter;

        var settings = {
            title: "",
            description: "",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            enableCrosshairs: true,
            source: daResults,
            xAxis:
                {
                    type:'basic',
                    dataField: 'iteration',
                    unitInterval: 1,
                    axisSize: 'auto',
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    gridLines: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    rangeSelector: {
                        serieType: 'area',
                        dataField: 'iteration',
                        padding: { /*left: 0, right: 0,*/ top: 10, bottom: 0 },
                        backgroundColor: 'white',
                        size: 75,
                        gridLines: {visible: false},
                    }
                },
            valueAxis:
            {
                flip: false,
                title: { text: 'LUEC, mills/kWh' },
                labels: { horizontalAlignment: 'right' },
                tickMarks: { color: '#BCBCBC' },
            },
            colorScheme: 'scheme01',
            seriesGroups:
                [
                    {
                        type: 'stackedcolumn',
                        orientation: 'vertical',
                        columnsGapPercent: 50,
                        seriesGapPercent: 0,
                        series: 
                        [
                            { dataField: 'LUEC', displayText: 'LUEC'},
                            { dataField: 'LUAC', displayText: 'LUAC'},
                            { dataField: 'LUFC', displayText: 'LUFC'  },
                            { dataField: 'LUOM', displayText: 'LUOM' }
                        ]
                    }
                ]
        };
        // setup the chart
        $('#jqxResultChart').jqxChart(settings);
}

    createCandleStick(daCandleStick){
        // prepare jqxChart settings
        var settings = {
            title: "",
            description: "",
            enableAnimations: true,
            showLegend: false,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: daCandleStick,
            xAxis:
                {
                    dataField: 'iteration',
                    unitInterval: 1,
                    axisSize: 'auto',
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    gridLines: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    }
                },
            valueAxis:
            {
                flip: false,
                title: { text: 'mills/kWh' },
                labels: { horizontalAlignment: 'right' },
                tickMarks: { color: '#BCBCBC' }
            },
            colorScheme: 'scheme09',
            seriesGroups:
                [
                    {
                        type: 'candlestick',
                        orientation: 'vertical',
                        columnsGapPercent: 50,
                        seriesGapPercent: 0,
                        series: 
                        [
                            {
                                dataFieldClose: 'max',
                                displayTextClose: 'max label',
                                dataFieldOpen: 'minLimit',
                                displayTextOpen: 'min label',
                                dataFieldHigh: 'maxLimit',
                                displayTextHigh: 'maxLimit label',
                                dataFieldLow: 'min',
                                displayTextLow: 'minLimit label',
                                lineWidth: 2
                            }
                        ]
                    }
                ]
        };
        // setup the chart
        $('#jqxCandleStick').jqxChart(settings);
}

Am I doing something wrong? Why this property _selectorRangeis kept among all instances of jqx Chart.
Thanks for your help.

[HristoParticipant]

Hello atomic,

This is private variable (“_selectorRange”).
The rangeSelector provides options to render it in specific container.
You could achieve this by “renderTo” member.
Could you provide a whole example (one jseditor/jsfiddle)?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[atomicParticipant]

Hi Hristo,

Thank you for your reply. I created jsfiddle and would like to highlight two problems.

https://jsfiddle.net/atomic81/z4q37etw/83/

First problem is
1. Narrow down range selector to some range. for example select from i5 to i10
2. Change chart type by clicking buttons on the top.
Result chart will render only series from i5 to i10 on the chart, but range selector will also be nerrowed to i5 to i10, and I belive that range selector should always show i0 -i20 values. I think this works OK in JQX Widgets ver below 5.

Second problem is if you do again steps 1 and 2 and then just change size of result pane in jsfiddle (drag the edge of result pane) you will notice that x-axis of candle stick chart will change according to range selected in the instance of first chart.

Thank you very much.

[MartinParticipant]

Hello atomic,

It seems that this is an issue. We have created a work item for this case.
Thank you for the feedback!

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts