22646

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 <a href="https://jsfiddle.net/Guill84/yx27xf7h/4/" rel="nofollow">JS fiddle:</a>

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' },

<strong>Edit</strong>

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 <a href="https://jsfiddle.net/Guill84/3r2kkeqy/" rel="nofollow">jsfiddle</a> with pseudo code.

<strong>HTML</strong>

<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>"/>

Hover the field to see the tooltip.

<strong>JScript</strong>

$(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' },

Answer1:

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. <a href="https://www.highcharts.com/docs/getting-started/your-first-chart" rel="nofollow">As documentation says</a>, 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 <a href="https://api.jqueryui.com/tooltip/#event-open" rel="nofollow">check the documentation</a> 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: <a href="https://jsfiddle.net/yx27xf7h/5/" rel="nofollow">https://jsfiddle.net/yx27xf7h/5/</a>

<strong>IMPORTANT:</strong> You need to destroy the Highchart when the widget closes or you will end with a <strong>memory leak</strong> (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: <a href="https://jsfiddle.net/yx27xf7h/6/" rel="nofollow">https://jsfiddle.net/yx27xf7h/6/</a>

Recommend

  • Visual Studio 2015 Using Incorrect Cordova Version
  • Search feature with multiple criteria - PHP/MySQL
  • Julia custom type assignment
  • Neo4J / py2neo — cursor-based query?
  • K Shortest Path Python Not Working
  • Rely on Facebook user id as a permanent user identifier
  • How to send control C to Mac Terminal using python?
  • SQL Server re-calculate or not?
  • Search files(key) in s3 bucket takes longer time
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • PHP get selected value of select form
  • How to add learning rate to summaries?
  • What does Main.1 output file do in XCode?
  • Double dispatch in Java example
  • cell spacing in div table
  • Trying to get the char code of ENTER key
  • Validate child input components on submit with Vee-Validate and vue js 2
  • Using Sax parsing to edit and write XML in VB6
  • SetWindowsHookEx does not react on media keys
  • Intel-64 and ia32 atomic operations acquire-release semantics and GCC 5+
  • Debug.DrawLine not showing in the GameView
  • Yii2: Config params vs. const/define
  • Database structure design with variable amounts of fields
  • How to clear text inside text field when radio button is select
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Why joiner is not used after Sequence generator or Update statergy
  • Java static initializers and reflection
  • unknown Exception android
  • JaxB to read class hierarchy
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app
  • Android Heatmap on canvas or ImageView