BySpot Hover Logic

Select a theme:

                     var randomExt = function (a, b) {
    return Math.round(Math.random() * (b - a + 1) + a);
};

anychart.onDocumentReady(function () {
    var chart = anychart.polar();

    chart.padding(0);

    // grid settings
    chart.yGrid(true)
            .xGrid(true);

    chart.xAxis(true);
    chart.yAxis(true);

    chart.listen('mouseMove', function (event) {
        if (event['target'].paginator) {
            return;
        }

        var interactivity = this.interactivity();

        if (interactivity.hoverMode() != 'bySpot') {
            return;
        }

        var spotRadius = interactivity.spotRadius();

        var clientX = event['clientX'];
        var clientY = event['clientY'];

        var container = $(this.container().getStage().container());
        var containerOffset = container.offset();
        var scrollLeft = $(document).scrollLeft();
        var scrollTop = $(document).scrollTop();

        var x = clientX - (containerOffset.left - scrollLeft);
        var y = clientY - (containerOffset.top - scrollTop);

        if (this.getType() == 'polar' || this.getType() == 'radar') {
            var dataBounds = this.xAxis().getRemainingBounds();
            var radius = Math.min(dataBounds.width, dataBounds.height) / 2;
            var cx = Math.round(dataBounds.left + dataBounds.width / 2);
            var cy = Math.round(dataBounds.top + dataBounds.height / 2);

            var clientRadius = Math.sqrt(Math.pow(cx - x, 2) + Math.pow(cy - y, 2));

            if (clientRadius > radius) {
                if (this.spotCircle)
                    this.spotCircle.parent(null);
                if (this.centerLine) this.centerLine.clear();
                if (this.leftLine) this.leftLine.clear();
                if (this.rightLine) this.rightLine.clear();
                return null;
            }

            if (!this.spotCircle)
                this.spotCircle = anychart.graphics.circle()
                        .radius(spotRadius)
                        .zIndex(1000)
                        .stroke('black .5');

            if (!this.spotCircle.hasParent())
                this.spotCircle.parent(this.container());

            this.spotCircle.centerX(x).centerY(y);

            if (!this.centerLine)
                this.centerLine = this.container().path().zIndex(1000).stroke('black .2').disablePointerEvents(true);
            this.centerLine.clear().moveTo(cx, cy).lineTo(x, y);

            var dx, dy, angle;
            var leftSideRatio, rightSideRatio;
            if (clientRadius - spotRadius >= 0) {
                dx = cx - x;
                dy = cy - y;

                angle = Math.atan(dx / dy);
                if (angle <= 0)
                    angle += Math.PI;
                if (dx < 0 || (angle == Math.PI && dy > 0))
                    angle += Math.PI;
                angle += this.startAngle();

                var dAngle = Math.asin(spotRadius / clientRadius);
                var leftSideAngle = angle + dAngle;
                var rightSideAngle = angle - dAngle;

                leftSideRatio = 1 - (leftSideAngle / (Math.PI * 2));
                rightSideRatio = 1 - (rightSideAngle / (Math.PI * 2));

                var leftA = (this.startAngle() - 90 + 360 * leftSideRatio) * Math.PI / 180;
                var rightA = (this.startAngle() - 90 + 360 * rightSideRatio) * Math.PI / 180;

                if (!this.leftLine) this.leftLine = this.container().path().zIndex(1000).stroke('black .2');
                this.leftLine.clear().moveTo(cx, cy).lineTo(cx + radius * Math.cos(leftA), cy + radius * Math.sin(leftA));

                if (!this.rightLine) this.rightLine = this.container().path().zIndex(1000).stroke('black .2');
                this.rightLine.clear().moveTo(cx, cy).lineTo(cx + radius * Math.cos(rightA), cy + radius * Math.sin(rightA));
            } else {
                if (this.leftLine) this.leftLine.clear();
                if (this.rightLine) this.rightLine.clear();
            }
        } else {
            var bounds = this.getPixelBounds();
            if (!bounds.contains({x: x, y: y})) {
                if (this.spotCircle)
                    this.spotCircle.parent(null);
                return null;
            }

            if (!this.spotCircle)
                this.spotCircle = anychart.graphics.circle()
                        .radius(spotRadius)
                        .zIndex(1000)
                        .stroke('black .5');

            if (!this.spotCircle.parent())
                this.spotCircle.parent(this.container());

            this.spotCircle.centerX(x).centerY(y);
        }
    });
    chart.listen('mouseOut', function (e) {
        if (!(this.getType() == 'polar' || this.getType() == 'radar')) {
            if (this.spotCircle)
                this.spotCircle.parent(null);
        }
    });

    chart.interactivity({hoverMode: 'by-spot', spotRadius: 40});

    var s1 = chart.line([
        [0, 1],
        [1, 2],
        [2, 3],
        [3, 4],
        [4, NaN],
        [0, 6],
        [1, 7],
        [2, 8],
        [3, NaN],
        [4, 10],
        [0, 11],
        [1, 12],
        [2, NaN],
        [3, 14],
        {x: 4, value: 15, state: 'selected'},
        [0, 16],
        [1, NaN],
        [2, 18],
        [3, 19],
        [4, 20]
    ]);


    var s2 = chart.marker([
        [0.5, 1],
        [1.5, 2],
        [2.5, 3],
        [3.5, 4],
        [4.5, NaN],
        [0.5, 6],
        {x: 1.5, value: 7, state: 'selected'},
        [2.5, 8],
        [3.5, NaN],
        [4.5, 10],
        [0.5, 11],
        [1.5, 12],
        [2.5, NaN],
        [3.5, 14],
        [4.5, 15],
        [0.5, 16],
        [1.5, NaN],
        [2.5, 18],
        [3.5, 19],
        [4.5, 20]
    ]);

    s1.labels().enabled(true);
    s2.labels().enabled(true);

    s1.markers(true);
    s1.hovered().markers()
            .fill('yellow')
            .size(s1.hovered().markers().size() + 2)
            .type('star10');

    s2.hovered().fill('yellow');
    s2.selected()
            .size(s2.hovered().size() + 2)
            .type('star10');

    chart.container('container').draw();
});

With AnyChart, you are able to create far much more than simple charts. Our component allows drawing anything besides the default elements. You can even create a picture that will have nothing to do with charts; also it’s possible to customize your charts, making them more attractive, informative and unique.

This sample of a Polar Chart demonstrates how to highlight the hovered points and make an accent on the points nearby. There is a polar chart with two series, which points look differently (circles and squares). The points are not only highlighted with bright yellow but also there is a circle (of a some defined radius) drawn around them. The rays bordering the circle put more attention to the hovered point and other that came into the hovering radius. Note that a tooltip shows the information about the first point that got into a hovering circle, if there are plenty of them.