Home/ Questions/Q 7665849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T14:40:56+00:00

I am trying to populate a chart with button click. <html> <head> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>

  • 0

I am trying to populate a chart with button click.

<html>
<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">



$(document).ready(function(){
$('#hello').click(function() {

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
     },

series: [{
    data: [29.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]         
}] //series
}); //chart




chart.series[0].setData([29.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]);
//return false;
});; //button click

}); //doc ready
</script>
</head>
<body>
<h3>generate table and plot</h3>


<form id="helloform">
<table border=1>
<tr><td>probability, p: </td><td><input type=text name=p size=5></td></tr>


<tr><td colspan=2 align=center><button id="hello">populate table</button></td></tr>


<tr>
<td colspan=2 align=center><input type=reset></td></tr>
</table>
</form>
<div id="container" style="height: 400px"></div>


</html>

For some reason, after the click , the plot renders, and disappears. I am thinking it may be because of .ready function and I tried load function instead of ready and nothing happens.Any help.

By the way I am new to jQuery and even javascript

Thanks

Ananta

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a form and the button submits the form. -> Pageload

    Change the first lines of your click function and it will work

    $('#hello').click(function(e) {
    e.preventDefault();
    var chart = new Highcharts.Chart({
    ...

    fiddle with fix: http://jsfiddle.net/wH3FA/

    • 0