title: high chart column chart dynamic update with ajax
body: <p>a Ajax was returning the value which will assign to highchart column , but as per my below code the charts are not defined . first i have tried to create a user define function and call that function within ajax that was not give proper update then i have put the optiion variable and calling from this even tho objects are not created </p>
  
  <p>below is the code: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;title&gt;C2S Success %&lt;/title&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  
    &lt;body class="theme-light"&gt;
      &lt;font color="WHITE"&gt;
        &lt;marquee behavior="scroll" direction="left" style="background:RED"&gt;Testing Etopup Dashboard &lt;/marquee&gt;
      &lt;/font&gt;
  
      &lt;script type="text/javascript"&gt;
        var options = {
          chart: {
            renderTo: 'chart1',
            type: 'column',
            height: 500,
            width: 530
          },
          title: {
            text: 'Success %'
          },
          xAxis: {
            categories: ['Today', 'YesterDay', 'D-7'],
            title: {
              text: 'DAYs'
            }
          },
  
          plotOptions: {
            column: {
              dataLabels: {
                enabled: true
              }
            }
          },
          series: []
        };
        $(function ready() {
          $.ajax({
            url: 'successper.php',
            type: 'GET',
            async: true,
            dataType: "json",
  
            success: function(point1) {
              options.series = point1;
              alert(point1);
              var chart = new Highcharts.Chart(options);
  
  
              setTimeout(ready, 50000);
            }
          });
        });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="chart1" style="width: 300px; height: 200px;  margin: center"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>below is the output of php file and it will update on every 5 minute </p>
  
  <pre><code> [
     {
       name: 'DEL',
       data: [96.65,96.71,96.37]
     },
     {
        name : 'MUM',
        data: [96.22,96.29,96.61]
     },
     {
        name: 'KOL',
        data: [97.21,97.56,97.24]
     },
     {
        name: 'CHN',
        data: [96.52,96.50,96.67]
    }
   ]
  </code></pre>