Highcharts - Adding External Content to Tooltips

author(s): Torstein Hønsi

by bizamajig

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="dialog" title="Input Data">
    <table>
<tr><td>
<form id="pForm" >
<label for="txt1">First input</label>
<textarea id="txt1">1st comment</textarea>
<br/>
<label for="txt2">Second input</label>
<textarea id="txt2">2nd comment</textarea>
<br/>
<label for="txt3">Third input</label>
<textarea id="txt3">3rd comment</textarea>
<br/>
<label for="txt4">Fourth input</label>
<textarea id="txt4">4th comment</textarea>
<br/>
    </form></td>&nbsp;&nbsp;&nbsp;&nbsp;
    <td><form id="ppForm" >
<label for="text1">First input</label>
<textarea id="text1">11st comment</textarea>
<br/>
<label for="text2">Second input</label>
<textarea id="text2">22nd comment</textarea>
<br/>
<label for="text3">Third input</label>
<textarea id="text3">33rd comment</textarea>
<br/>
<label for="text4">Fourth input</label>
<textarea id="text4">44th comment</textarea>
<br/>
        </form></td></tr>
    </table>
<input type="button" value="OK" onclick="getdata()" />
<input type="button" value="cancel" onclick="getPdata( this.value )" />
</div>
<button type="button" id="button" >Insert data</button>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

var dataValues = [29.9,29.9, 106.4, 129.2];
var dataValues2 = [194.1, 95.6, 54.4, 29.9];

$(function () {
    $('#container').highcharts({
        chart: {},

        tooltip: {
            useHTML:true,
            formatter: function () {
                var serieI = this.series.index;
              var index = dataValues.indexOf(this.y);
             var index1= dataValues2.indexOf(this.y);
debugger;
                var comment = "";
                if (serieI == 0) {
                    comment = $("#ppForm textarea:eq(" + (index) + ")").val();
                } else {
                   //comment = "second serie matched!";
                    comment = $("#ppForm textarea:eq(" + (index1) + ")").val();
                }
                /*return ''+ this.x +
                    '</b> is <b>' + this.y + '</b> -->' + comment;*/
                return '<div style="word-wrap: break-word;width:50px">-->'+comment +'</div>';
            }
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr']
        },

        series: [{
            data: dataValues
        }, {
            data: dataValues2
        }]
    });
});

        var person1;
		var person2;
		var person3;
		var person4;
		var person5;
		var person6;
		var person7;
		var person8;
		var person9;
		var person10;
		var person11;
		var person12;

function getdata(passedValue)
		{
		    
			 person1=$("#txt1").val(); 
             person2=$("#txt2").val();
             person3=$("#txt3").val();
             person4=$("#txt4").val();
             
			 close();
			 return;
		 }

$(document).ready(function (){   
            $("#dialog").dialog({
            autoOpen: false,
            width: 500,
            height: 500,
            modal : true,
			resizable: false,
	        show:"slow"
             });
			 
			
	        $('#button').click(function() {
            $( "#dialog" ).dialog( "open" );
			$("#myDialogText").text("Data");
           });
		   
        });

 function getPdata(...