CODEWITHSUNDEEP
javascriptjqueryhighcharts
Palindrome
Palindrome

Reputation: 195

How to add a second tooltip to highcharts

I would like to add an external popover to highcharts. I'm currently looking at using WebUI Popover

So the standard highcharts popover displays the standard data, however, I would like to use WebUI Popover to display some data to explain a specific column, which can be fetched from the DB.

The actual fetching of data etc is fine, but I can't figure out how to display a specific popover for a column

The way WebUI Popover works is that it requires some HTML identifier to know where to show the popover:

$(#identifier).webuiPopover({"content"})

I cant find any identifier to use to link the popover to each column:

<g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(55,48) scale(1 1)" style="" clip-path="url(#highcharts-3)">
    <rect x="63.5" y="33.5" width="119" height="162" stroke="#FFFFFF" fill="rgb(124, 181, 236)" rx="0" ry="0" stroke-width="1" data-target="webuiPopover0"></rect>
    <rect x="309.5" y="98.5" width="119" height="97" stroke="#FFFFFF" fill="rgb(124, 181, 236)" rx="0" ry="0" stroke-width="1"></rect>
    <rect x="555.5" y="65.5" width="119" height="130" stroke="#FFFFFF" fill="rgb(124, 181, 236)" rx="0" ry="0" stroke-width="1"></rect>
</g>

So I want to show a popover for each coloumn (rect), but I really don't know how. I've tried:

var thePoint = "rect[x='" + 63.5 + "'][y='" + 33.5 + "']"; 
$(thePoint).webuiPopover(...)

This works to some extent, but obviously I've hard coded the 63,5 and 33,5. I've tried everything to dynamically get the x and y values, but I can never get those exact numbers.

Any other suggestions? Maybe if someone could explain how the built in popover gets the position?

Upvotes: 1

Views: 262

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

There is this demo of clickable points: http://www.highcharts.com/demo/line-ajax

It uses Highslide.

If you want to use WebUI Popover, then you can find columns' rectangles and add popups. Example: http://jsfiddle.net/j57me5w1/

Looks like popups will start from top left corner.

$(function () {
    $('#container').highcharts({
        series: [{
            type: 'column',
            data: [1, 2, 3, 4, 5, 6, 7]
        }]
    });

    var columns = $('.highcharts-tracker > rect');
    $.each(columns, function (i, c) {
        $(c).webuiPopover({
            title: 'test',
            content: '<div id="popup">popup content</div>',
            closeable: true,
            arrow: true,
            placement: 'auto'
        });
    });
});

Upvotes: 3

Related Questions