title: Highchart with dynamic data
body: <p>I am trying to generate chart when a user click on link so the data.php get data from db based on user request and redirect user to chart.php to generate the chart while user is redirected the chart is totally blink.</p>
  
  <p>Data.php file code bellow</p>
  
  <pre><code>&lt;?php
  
  include('../../conn.php');
  
  @$query = $connection-&gt;query("SELECT * from localitems where city='".$_REQUEST['prov']."' ");
  
  $category = array();
  $category['name'] = 'Month';
  
  $series1 = array();
  $series1['name'] = 'Wheat';
  $series2 = array();
  $series2['name'] = 'Rice';
  
  $series3 = array();
  $series3['name'] = 'Maize';
  $series4 = array();
  $series4['name'] = 'Mungbeans';
  
  $series5 = array();
  $series5['name'] = 'Pea';
  $series6 = array();
  $series6['name'] = 'Potato';
  $series7 = array();
  $series7['name'] = 'Milk';
  $series8 = array();
  $series8['name'] = 'Beef ';
  $series9 = array();
  $series9['name'] = 'Mutton';
  $series10 = array();
  $series10['name'] = 'Chicken';
  $series11 = array();
  $series11['name'] = 'DAP ';
  $series12 = array();
  $series12['name'] = 'Agriculture';
  $series13 = array();
  $series13['name'] = 'Pair of Oxan';
  $series14 = array();
  $series14['name'] = 'Water Pump';
  $series15 = array();
  $series15['name'] = 'Tractor Hiring';
  
  while($r =$query-&gt;fetch_assoc()) {
      $category['data'][] =$r['month'];
      $series1['data'][] = $r['Wheat'];
      $series2['data'][] = $r['Rice'];
      $series3['data'][] = $r['Maize'];
      $series4['data'][] = $r['Mungbeans'];
      $series5['data'][] = $r['Pea'];
      $series6['data'][] = $r['Potato'];
      $series7['data'][] = $r['Milk'];
      $series8['data'][] = $r['Beef'];
      $series9['data'][] = $r['Mutton'];
      $series10['data'][] = $r['Chicken'];
      $series11['data'][] = $r['Dap'];
      $series12['data'][] = $r['Oxan_pair'];
      $series13['data'][] = $r['Agriculture'];
      $series14['data'][] = $r['Waterpump'];
      $series15['data'][] = $r['Tractor_hiring'];
  }
      $result = array();
      array_push($result,$category);
      array_push($result,$series1);
      array_push($result,$series2);
      array_push($result,$series3);
      array_push($result,$series4);
      array_push($result,$series5);
      array_push($result,$series6);
      array_push($result,$series7);
      array_push($result,$series8);
      array_push($result,$series9);
      array_push($result,$series10);
      array_push($result,$series11);
      array_push($result,$series12);
      array_push($result,$series13);
      array_push($result,$series14);
      array_push($result,$series15);
      print json_encode($result, JSON_NUMERIC_CHECK);
      if($result==true){
      header('location:chart.php');
     }else{ echo "Nothing fetched";}
  
  //mysql_close($con);
  ?&gt; 
  </code></pre>
  
  <p>This file reads data.php and generate.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Imported Kabul&lt;/title&gt;
              &lt;script type="text/javascript" src="../js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              var options = {
                  chart: {
                      renderTo: 'container',
                      type: 'column',
                      marginRight: 130,
                      marginBottom: 25
                  },
                  title: {
                      text: 'Local Item Price in Kabul',
                      x: -20 //center
                  },
                  subtitle: {
                      text: '',
                      x: -20
                  },
                  xAxis: {
                      categories: []
                  },
                  yAxis: {
                      title: {
                          text: 'Price Per (KG, Hour, Labor)'
                      },
                      plotLines: [{
                          value: 0,
                          width: 1,
                          color: '#808080'
                      }]
                  },
                  tooltip: {
                      formatter: function() {
                              return '&lt;b&gt;'+ this.series.name +'&lt;/b&gt;&lt;br/&gt;'+
                              this.x +': '+ this.y;
                      }
                  },
                  legend: {
                      layout: 'Vertical',
                      align: 'right',
                      verticalAlign: 'top',
                      x: -10,
                      y: 100,
                      borderWidth: 0
                  },
                  series: []
              }
              $.getJSON("data.php", function(json) {
                  options.xAxis.categories = json[0]['data'];
                  options.series[0] = json[1];
                  options.series[1] = json[2];
                  options.series[2] = json[3];
                  options.series[3] = json[4];
                  options.series[4] = json[5];
                  options.series[5] = json[6];
                  options.series[6] = json[7];
                  options.series[7] = json[8];
                  options.series[8] = json[9];
                  options.series[9] = json[10];
                  options.series[10] = json[11];
                  options.series[11] = json[12];
                  options.series[12] = json[13];
                  options.series[13] = json[14];
                  options.series[14] = json[15];
  
                  chart = new Highcharts.Chart(options);
              });
          });
          &lt;/script&gt;
  
          &lt;script src="../js/highcharts.js"&gt;&lt;/script&gt;
          &lt;script src="../js/exporting.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  .text{
      font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
      font-size:14px;
      color:#FFF;
      font-size:medium;
  }
  &lt;/style&gt;
  &lt;link rel="stylesheet" href="../../css/main.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;&lt;br/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>