CODEWITHSUNDEEP
javascriptjquerychartshighchartsdrilldown
Ferran Buireu
Ferran Buireu

Reputation: 29305

Highcharts tooltip showing selected points

I allowed multiple selection while clicking (first click selects a chart and second click performs a drilldown on that chart). I want to show a tooltip (or any other way) that displays all selected charts (i.e: if I select two charts I want a tooltip showing information about this two charts).

Here my HTML:

<html>
    <head>
        <title>Highcharts</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/data.js"></script>
        <script src="http://github.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/drilldown.js"></script>
        <script src="highcharts.js" type="text/javascript"></script>
        <!--Black theme
        <script src="black-theme.js" type="text/javascript"></script>
        -->
    </head>
    <body>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
        <!-- <button id="button">Get selected points</button>
         <div>event: <span id="label"></span></div>-->
    </body>
</html>

And here my Javascript file:

$(function () {
    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions && e.point.selected) {
                        var chart = this,
                                points = chart.getSelectedPoints(),
                                drilldowns = {
                                    'Animals': {
                                        name: 'Animals',
                                        data: [
                                            ['Cows', 2],
                                            ['Sheep', 3]
                                        ]
                                    },
                                    'Fruits': {
                                        name: 'Fruits',
                                        data: [
                                            ['Apples', 5],
                                            ['Oranges', 7],
                                            ['Bananas', 2]
                                        ]
                                    },
                                    'Cars': {
                                        name: 'Cars',
                                        data: [
                                            ['Toyota', 1],
                                            ['Volkswagen', 2],
                                            ['Opel', 5]
                                        ]
                                    }
                                };

                        Highcharts.each(points, function (p) {
                            chart.addSingleSeriesAsDrilldown(p, drilldowns[p.name]);
                        });
                        chart.applyDrilldown();
                    }

                },
                drillup: function (e) {
                    var chart = this,
                            points = [];
                    setTimeout(function () {
                        points = chart.getSelectedPoints();

                        Highcharts.each(points, function (p) {
                            // unselect points from previous drilldown
                            p.selected = false;
                            p.setState('', true);
                        });
                    }, 0);
                }
            }
        },
        title: {
            text: 'Async drilldown'
        },
        xAxis: {
            type: 'category',
            categories: [
                'Animals',
                'Fruits',
                'Cars'
            ],
        },
        yAxis: {
            title: {
                text: 'Values'
            }

        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            column: {
                allowPointSelect: true
            },
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
                allowPointSelect: true,
                name: 'Test things',
                colorByPoint: true,
                data: [{
                        name: 'Animals',
                        y: 5,
                        drilldown: true
                    }, {
                        name: 'Fruits',
                        y: 2,
                        drilldown: true
                    }, {
                        name: 'Cars',
                        y: 4,
                        drilldown: true
                    }]
            }],
        drilldown: {
            series: []
        }
    });
});

Edit: I've tried this solution, but unfortunetely only shows the last point selected:

plotOptions: {
    column: {
        allowPointSelect: true
    },
    series: {
        borderWidth: 0,
        dataLabels: {
            enabled: true
        },
        point: {
            events: {
                select: function () {
                    var text = this.category + ': ' + this.y + ' was last selected',
                            chart = this.series.chart;
                    if (!chart.lbl) {
                        chart.lbl = chart.renderer.label(text, 100, 70)
                                .attr({
                                    padding: 10,
                                    r: 5,
                                    fill: Highcharts.getOptions().colors[1],
                                    zIndex: 5
                                })
                                .css({
                                    color: '#FFFFFF'
                                })
                                .add();
                    } else {
                        chart.lbl.attr({
                            text: text
                        });
                    }
                }
            }
        },
    }
},

Thanks for you help!

Upvotes: 1

Views: 1605

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

It is possible to get all selected points, through chart.getSelectedpoints() (same is used in drilldown), and if selections is accumulative (event.accumulative in select event will be true) add information about all selected points into your custom label.

Example: http://jsfiddle.net/xbvmpev5/

Edit:

Changed code, because description above is not clear enough:

            point: {
                events: {
                    select: function (event) {
                        var text = 'All selected points: <br/>',
                            chart = this.series.chart,
                            otherSelected = chart.getSelectedPoints();
                        if (event.accumulate) {
                            Highcharts.each(otherSelected, function (point) {
                                text += point.category + ': ' + point.y + '<br/>';
                            });
                        }
                        text += this.category + ': ' + this.y + ' (last selected)';

Upvotes: 1

Related Questions