score:6

Accepted answer

three solutions:

1.) forget the ajax call. you just cache all the "tooltip" data in memory on page load and load it using the formatter function.

2.) you make the ajax call in the formatter synchronous. this will stall the tooltip from popping up (and it will be "jerky"):

 formatter: function() {
    var rv = null;
    $.ajax({
      datatype: "json",
      url: 'ajax.json',
      async: false, // this will stall the tooltip
      success: function(ajax){
        rv = ajax.someproperty;
      }
    });
    return rv;
 }

example here.

3.) you keep the ajax async, display loading in the tooltip, and then manipulate the tooltip after the ajax call completes. be careful with this, you'll have a race condition on the ajax call and it will be possible to have the wrong data retreived for a tooltip.

 formatter: function() {
    $.getjson('ajax.json', function(ajax){
        var tt = highcharts.charts[0].tooltip;
        var label = tt.label.element.lastchild; // find contents of tooltip
        $(label).text(ajax.someproperty);
    });
    return "...loading...";
  }

example here.

score:0

mark give me the right solution thats why i market it..

if you wanna show html in the tooltip at this

    usehtml: true,

this is the solution for me. i use dataformat now because i switch to utc time stamp

tooltip: {
            usehtml: true,
            formatter: function() {
                var msg ="<span>"+highcharts.dateformat('%a , %d %b', this.x)+'</span><br/>';
                msg = msg +"<b> totaal: </b>" + this.y +'<br/><br />';
                msg = msg +'<table><body >';
                var msgend= '</body></table>';


                       console.log('a');
                     jquery.getjson("getdatachar.php?datedetailparam="+highcharts.dateformat('%y-%m-%d', this.x), function(json)
                        {
                                console.log('c');
                                var timearray = "";
                                jquery.each(json.dagen.dagen, function(i,times){
                                    timearray = timearray + '<tr><td>'+times+ '</td></tr>';
                                });
                                console.log(timearray);

                                chart.tooltip.label.textsetter(msg+timearray+msgend);
                        });


                            console.log('b');

                    return "loading..";


            }
        }

Related Query

More Query from same tag