Render Highchart with dynamic ID in jQuery tooltip

Question

I am trying to render a highchart chart to a jquery tooltip. I also want to pass the ID of the element being hovered, so that it is passed directly to highcharts as a variable to the renderTo argument. Right now I cannot get this to work. Please click here for the JS fiddle:

My code is as follows.

  $(document).tooltip({

    open: function() {

    var widget = $(this).data("ui-tooltip");
    var widget = $(widget.element[0]).attr("id")

      Highcharts.chart({
        chart: {
          renderTo: widget,
          type: 'bar'
        },

Edit

I need the ID of the hovered element. At least I think I do. The reason is that I need to feed an array specific to this ID to the highchart function. Also, I may want to hover a class and generate the graph to a div with a prefix. Here is another jsfiddle with pseudo code.

HTML

<p>
 <label for="age">Your age:</label>
 <input id="age" title="<div class='container' id='containerX'>
 <div id='chart_containerX' style='width:500px;height:500px;background:red'>
 </div>
</div>"/>
    </p>
    <p>Hover the field to see the tooltip.</p>

JScript

$(function() {
  $(".container").tooltip({

  <pseudo> get ID and generate array so that it can be passed to highcharts </pseudo>
  <pseudo> get ID and add 'chart_' prefix so that it can be passed to renderTo </pseudo>


    open: function(event, ui) {
      ui.tooltip.highcharts({
        data: { <<'array specific to this chart'>>},
        chart: {
          renderTo: <<chart_container (with prefix!)>>
          type: 'bar'
        },

Jorge Fuentes González Jorge Fuentes González · Accepted Answer · 2018-01-28T05:57:56

This is a perfect example to learn to check the documentation carefully and also to debug.

First, you don't need the element ID to render Highcharts to an element. As documentation says, you can do this:

element.highcharts({/* options */});

And second, have you tried to see if your widget variable actually contains something? If you do a console.log(widget), you will see that the console outputs undefined, and if you do console.log($(this).data("ui-tooltip")) you see that the console logs the document, not the widget element. This is a perfect point to check the documentation and see that the open event receives a second ui argument with the actual tooltip element, being it a jQuery element so no need for $(ui.tooltip) but directly access ui.tooltip.

Now with all this info you can do this:

open: function(event, ui) {
  ui.tooltip.highcharts({

Which comes into this: https://jsfiddle.net/yx27xf7h/5/

IMPORTANT: You need to destroy the Highchart when the widget closes or you will end with a memory leak (Insert dramatic ♪DUN DUN DUUUN♫ music here).

EDIT: If you want to use a container element, is better to avoid adding IDs as IDs must be unique in the entire webpage so you must find a way to create a unique ID each time and that's adding extra code when you can avoid it. The less code for the same task, the better.

When working with containers that are created and destroyed on the fly is better to work with references and ways to gather them as references inside their parent containers, for example doing .class or using data attributes, like this: https://jsfiddle.net/yx27xf7h/6/

Render Highchart with dynamic ID in jQuery tooltip

1 Answers