Chart Value Selection

[Sefa Dogan]

Hello, 

I manipulated the chart using checkbox so that the user can select by drawing at will, and when he doesn't want, he can close the selection process by pulling the checkbox to false. I do this with the following codes:

$("#determine-range").click(function (value) {
    if ($("#determine-range").is(":checked")) {
        chart.zoomSettings = {
            enableMouseWheelZooming: false,
            enablePinchZooming: false,
            enableSelectionZooming: false,
        }
        console.log(chart.zoomSettings)
        chart.dragComplete = function (args) {
            console.log(args.selectedDataValues);
            var startDate = args.selectedDataValues[0][0].x;
            var endDate = args.selectedDataValues[0][args.selectedDataValues[0].length - 1].x;
            console.log(startDate + "  --  " + endDate)

            drawMeterInfoGrid(startDate, endDate);
        }
    }
    else {
        chart.zoomSettings = {
            enableMouseWheelZooming: false,
            enablePinchZooming: true,
            enableSelectionZooming: true,
        }
        chart.dragComplete = null
    }
})

But once I do this operation, after I set the checkbox to false position, the image appears as if the user is both selecting the value and zooming in as in the photo I uploaded while zooming. How can I prevent this?

[Durga Gopalakrishnan]

Hi Sefa,

Greetings from Syncfusion.

By default, both selection and zooming operations are related to user interaction, only one works at a time, so while enabling both first preference is provided for zooming.

As per your requirement, the chart selection and zooming are working properly by enabling and disabling the checkbox. We have prepared sample based on your requirement. Please check with below snippet and sample.

document.getElementById('select').onchange = function () {

      var element = (document.getElementById('select'));

     if(element.checked){

        chart.selectionMode = 'DragXY';

        chart.zoomSettings = {

            enableMouseWheelZooming: false,

            enablePinchZooming: false,

            enableSelectionZooming: false,

        };

     }

     else{

        chart.selectionMode = 'None';

        chart.zoomSettings = {

            enableMouseWheelZooming: true,

            enablePinchZooming: true,

            enableSelectionZooming: true,

            mode :'XY'

        };

     }

        chart.refresh();

    };

Sample : https://stackblitz.com/edit/gqj7sk-4zvgfl

Note : Please confirm us whether you are using Essential JS1 or Essential JS2.

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Sefa Dogan]

I am using EJ2 and thank you it works as i want

[Jayashree Suresh Anand]

Hi Sefa,

We are glad that it worked on your end, please get back to us if you need any further assistance. We will be happy to help you as always.

Regards,

Jayashree