CODEWITHSUNDEEP
angularjschartshighchartsscatterhighcharts-ng
Pratik Rawlekar
Pratik Rawlekar

Reputation: 327

3D Scatter chart scrolling if I scroll the scrollbar

I am rendering Highcharts 3D scatter graph and enabled scrolling as follows

xAxis: {
  categories: xlist,
  min: 0,
  max: 4,
  scrollbar: {
    enabled: true
  },
}

Also having chart scrolling with below code

$(chart.container).on('mousedown.hc touchstart.hc', function (eStart) {
                eStart = chart.pointer.normalize(eStart);

                var posX = eStart.chartX,
                posY = eStart.chartY,
                alpha = chart.options.chart.options3d.alpha,
                beta = chart.options.chart.options3d.beta,
                newAlpha,
                newBeta,
                    sensitivity = 5; // lower is more sensitive

                    $(document).on({
                        'mousemove.hc touchmove.hc': function (e) {

                        e = chart.pointer.normalize(e);
                        newBeta = beta + (posX - e.chartX) / sensitivity;
                        chart.options.chart.options3d.beta = newBeta;


                        newAlpha = alpha + (e.chartY - posY) / sensitivity;
                        chart.options.chart.options3d.alpha = newAlpha;

                        chart.redraw(false);
                    },
                    'mouseup touchend': function () {
                        $(document).off('.hc');
                    }
                });
                });

If I scroll through scrollbar then the chart also moves. Is there any way to avoid chart scrolling if I scroll the scrollbar and if I take mouse on chart then the chart should move.

Upvotes: 0

Views: 132

Answers (1)

Pratik Rawlekar
Pratik Rawlekar

Reputation: 327

I made a hack and updated the above function as below, where I have restricted the chart rotation with if(e.target.classList.length == 0) when we use scrollbar.

$(chart.container).on('mousedown.hc touchstart.hc', function (eStart) {
            eStart = chart.pointer.normalize(eStart);

            var posX = eStart.chartX,
            posY = eStart.chartY,
            alpha = chart.options.chart.options3d.alpha,
            beta = chart.options.chart.options3d.beta,
            newAlpha,
            newBeta,
                sensitivity = 5; // lower is more sensitive

                $(document).on({
                    'mousemove.hc touchmove.hc': function (e) {
                  if (e.target.classList.length == 0) {
                    e = chart.pointer.normalize(e);
                    newBeta = beta + (posX - e.chartX) / sensitivity;
                    chart.options.chart.options3d.beta = newBeta;


                    newAlpha = alpha + (e.chartY - posY) / sensitivity;
                    chart.options.chart.options3d.alpha = newAlpha;

                    chart.redraw(false);
                  }
                },
                'mouseup touchend': function () {
                    $(document).off('.hc');
                }
            });
            });

Upvotes: 0

Related Questions