Highcharts Chart inside of a Highslide popout

Question

I am currently trying to put a Highcharts chart inside of a Highslide pop-out (the Highslide pop-out itself comes out of an existing Highcharts line graph). Basically, I want someone to be able to click on a point in the line graph and have a Highslides popout that contains additional charts with further information on that data point.

The code below works - once. After the user clicks on a point and then closes the Highslide popout, the Highcharts graphs no longer show up in the Highslide popout if you click on the point again (the data contained in the "tile" div does continue to appear, however).

What's happening here? Why do the charts only show up when you first click on the point but not on any subsequent clicks?

PS: If there are multiple points in the line graph, clicking on each point once will correctly show the additional charts for that data point. But if you close the Highslide popout and click on the point again, it will not show the Highcharts graphs.

Note: The two functions in the .done call create the Highcharts graphs for the Highslide pop-out

Code (inside series for the existing Highcharts line graph):

click: function ()
                            {
                                window.Task_ID = this.Task_ID; 

                                window.Task_Record = this.Task_Record; 

                    hs.htmlExpand(null, 
                    { 
                        pageOrigin: 
                        {
                            x: this.pageX,
                            y: this.pageY
                        },

                        headingText: "<p style='margin: 0 auto;'> Task: " + this.Task_ID + " for " + this.Company + "</p>",

                        maincontentText: "<p class='tile'></p>" + "<div class='charts'><p class = 'studentTaskChart' id='studentTaskChart" + this.Task_ID + "'></p>" + "<p class = 'businessTaskChart' id='businessTaskChart" + this.Task_ID + "'></p></div>",

                        width: 700, 

                        height: 700
                    }),

                    hs.Expander.prototype.onAfterExpand(null, {
                            maincontentText: 
                            $.ajax
                        ({
                            type: "post",
                            url: "TrackRecord_Beta/practice.php",
                            data: 
                            {
                                "timestamp" : this.x
                            },
                            success: function(result)
                            {
                                $('.tile').html(result); 
                            }
                        }) 
                        .done(function() 
                        {
                            createStudentTaskChart();
                            createBusinessTaskChart();
                        }),
                    })
                 }

Answer 1

The problem is that Highslide each time creates new window (that's why you can have more than one), so you need to change each time container's ID (not create duplicates). For example: http://jsfiddle.net/y4JV5/4/

I know, this is not using AJAX, but idea should be the same:

var counter = 0;

hs.Expander.prototype.onAfterExpand = addChart;

function addChart() {
    var chart = $("#hc-test" + counter).highcharts();
    if (chart) {
        chart.destroy();
    }
    $("#hc-test" + counter).highcharts({
        chart: {
            width: 300,
            height: 300
        },
        series: [{
            type: 'pie',
            data: [Math.random() * 10, Math.random() * 10, Math.random() * 10]
        }]
    });
}

Click handler:

                    click: function () {
                        counter++;
                        hs.htmlExpand(null, {
                            pageOrigin: {
                                x: this.pageX,
                                y: this.pageY
                            },
                            headingText: this.series.name,
                            maincontentText: '<div>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' visits' + '</div><div id="hc-test' + counter + '"></div>',
                            width: 310,
                            height: 500
                        });



                    }