Updating a Highchart from a form with a click() event in jquery

Question

I have a chart that I would like to update whenever a form on the same page is submitted. The var chart = new Highcharts.Chart(options) expression works fine by its

Answer 1

This is working fine for me:

var chart;
$(document).ready(function() {
    options ={ 
        chart: {
         renderTo: 'container',
         defaultSeriesType: 'line',
         zoomType: 'xy'
      },
               title : { text : 'Foo' },
                xAxis: { title: { text: 'x label'  } },
    yAxis: { title: { text: 'y label' } },

        series: {}
              };

   chart = new Highcharts.Chart(options);
   series3 = [{"name": 10402, "color": "rgba(255,139,0,0.5)", data: [[ 146,55.8 ],[150,60.9]]},{"name": 10403, "color": "rgba(255,255,0,0.5)", "data": [[ 130,25.8 ],[150,54.9]]}];
   series2 = [{
         name: '1042',
         color: "rgba(255,139,0,0.5)",
         data: [[ 146,55.8 ],[150,60.9]]
      }, {
         name: '10403',
          color: "rgba(255,255,0,0.5)",
         data: [[ 130,25.8 ],[150,54.9]]
      }];
    $( "#chartform" ).submit(function() {
    options.series = series3;
    var chart = new Highcharts.Chart(options);
return false;
    });


});

EDIT: I believe the problem is that you are submitting the form. Do a return false and use submit handler instead of click. You can check it live in: http://jsfiddle.net/bCFHL/157/