Home/ Questions/Q 7027391
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T00:14:28+00:00

I have a chart that I would like to update whenever a form on

  • 0

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 itself (it draws a chart). When I put it inside the callback function for the .click() event, when I click the corresponding submit button, the updated plot flashes on the screen for a second and is then erased and replaced by the original plot.

I’m so close to doing what I need to, but I’m stumped by this. Thanks for your help.

Libraries:

<link type="text/css" href="css/cupertino/jquery-ui-1.8.16.custom.css" rel="stylesheet" />      
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>

Here is the Javascript:

<script>
  $(function() {
$("#lines").val(),colors: $("#colors").val(),},
var options = {
    chart : {
        renderTo : 'container',
        defaultSeriesType: 'line',
        zoomType: 'xy' },
    title : { text : 'Foo' },
    xAxis: { title: { text: 'x label'  } },
    yAxis: { title: { text: 'y label' } },
    series : {}
}
    var chart = new Highcharts.Chart(options);
    $( "#submit" ).click(function() {
    options.series = [{"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]]}];
    var chart = new Highcharts.Chart(options);
    });

  });
  </script>

Here is the HTML body:

<body>
<form name="chartform" id="chartform">
<input type="submit" id="submit" /><br />
</form>
<div id="container" style="width: 100%; height: 800px"></div>
</body>

This is driving me nuts.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0