Render Highcharts after user updates shortcuts

Question

I am trying to create a chart builder. I have custom inputs for the title and location of the legend. I want the user to type the title and when the click (blur) of the chart is updated with what they typed.

The problem is that the chart is being displayed for the first time, however I can never display the char again. Here is a brief description of the code.

$('#legendlocation-select').blur(function updateChartLegend(){
console.log($('#legendlocation-select').val());
if($('#legendlocation-select').val()==='none'){
    chartData.legend.enabled = 'false';
}else{
    chartData.legend.enabled = 'true';
    chartData.legend.align = $('#legendlocation-select').val();
}
renderChart();
});
function renderChart(){
if(chart == undefined){
    console.log("First Draw");
    chart = new Highcharts.Chart(chartData);
}else{
    console.log("Redraw");
    chart.destroy();
    chart = new Highcharts.Chart(chartData);
    chart.redraw();
}
};

The chart displays the first time, and then only the empty white area a second time. Any ideas? chartData is a variable with all parameters that display correctly.

here is a JSFiddle that shows the problem http://jsfiddle.net/zVjrb/3/

Answer 1

. : http://highslide.com/forum/viewtopic.php?f=12&t=15255

Highcharts.charts .

:

var chart;
var chartData = { /* you chart data goes here */ };
$('#legendlocation-select').blur(function updateChartLegend(){
  console.log($('#legendlocation-select').val());
  if($('#legendlocation-select').val()==='none'){
    chart.options.legend.enabled = false;
  }else{
    chart.options.legend.enabled = true;
    chart.options.legend.align = $('#legendlocation-select').val();
  }
  renderChart();
});

function renderChart(){
  //console.log(chartData);
  if(chart == undefined){
    console.log("First Draw");
    chart = new Highcharts.Chart(chartData);
  }else{
    console.log("Redraw");
    chart.options.chart.animation = false;
    chart = new Highcharts.Chart(chart.options);
    chart.render();
  }
};