title: highchart dynamically data display using xmlhttp
body: <p>i have made changes to my previous script, not sure if its ok to make changes here...
  anyway what i am trying to do is
  On clicking respective link, i want to load "highchart line graph", so users dont have to leave the page.</p>
  
  <p>my <strong>main.php</strong> body has</p>
  
  <pre><code>user2 -- &lt;a href="#" onClick = "showgraph(2)"&gt;&lt;img src="go.png"&gt;&lt;/a&gt;&lt;BR&gt;
  user3 -- &lt;a href="#" onClick = "showgraph(3)"&gt;&lt;img src="go.png"&gt;&lt;/a&gt;
  &lt;script src="js/highcharts.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>head section</strong> contains [<strong>i have made new edits in my javascript, compared to the last one</strong>]</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function showgraph(keyid,serid){
              $.ajax({
              type: "GET",
              url: "new_graph.php",
              data: "id="+keyid+"&amp;serid="+serid,
              dataType: "json",
                  success: function(data){
                  drawgraph(data);
                  }
              });
              return false;
          }
  
  
      function drawgraph(data){
              alert(data);
              var seriesData = [];
              var xCategories = [];
              var i, cat, series, namedata;
              for(i = 0; i &lt; data.length; i++){
                  cat = data[i].ddate;
                  series = data[i].dvalue;
                  namedata = data[i].dname;
                   //alert(cat);
                   if(xCategories.indexOf(cat) === -1){
                      xCategories[xCategories.length] = cat;
                      seriesData[seriesData.length] = series;
                   }
              }
              //alert(xCategories);
              alert(seriesData);
              //alert(namedata);
      $(function () {
           $('#container').highcharts({
              chart: {
                  type: 'line',
                  marginRight: 130,
                  marginBottom: 25
              },
              title: {
                  text: namedata,
                  x: -20 //center
              },
              subtitle: {
                  text: 'Source: Sitename.com',
                  x: -20
              },
              xAxis: {
                  categories: xCategories
              },
              yAxis: {
                  title: {
                      text: 'Date'
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              tooltip: {
                  valueSuffix: '°C'
              },
              legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'top',
                  x: -10,
                  y: 100,
                  borderWidth: 0
              },
              series: [{
                  name: namedata,
                  data: seriesData
              }]
          });
      });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>new_graph.php</strong> file returns</p>
  
  <p>I have used php json_encode($data) function.    </p>
  
  <pre><code>echo json_encode($return_arr);
  </code></pre>
  
  <p>returns</p>
  
  <pre><code>[{"dvalue":"25","ddate":"2013-07-25","dname":"samsung"},{"dvalue":"26","ddate":"2013-07-26","dname":"samsung"},{"dvalue":"25","ddate":"2013-07-27","dname":"samsung"},{"dvalue":"25","ddate":"2013-07-28","dname":"samsung"},{"dvalue":"24","ddate":"2013-07-29","dname":"samsung"},{"dvalue":"23","ddate":"2013-07-30","dname":"samsung"},{"dvalue":"21","ddate":"2013-07-31","dname":"samsung"},{"dvalue":"23","ddate":"2013-08-01","dname":"samsung"},{"dvalue":"30","ddate":"2013-08-02","dname":"samsung"},{"dvalue":"28","ddate":"2013-08-03","dname":"samsung"},{"dvalue":"25","ddate":"2013-08-04","dname":"samsung"},{"dvalue":"26","ddate":"2013-08-05","dname":"samsung"},{"dvalue":"30","ddate":"2013-08-06","dname":"samsung"},{"dvalue":"25","ddate":"2013-08-07","dname":"samsung"},{"dvalue":"30","ddate":"2013-08-08","dname":"samsung"}]
  </code></pre>
  
  <p>for some reason graph is not showing up with seriesdata, rest of the data getting printed on the graph such as categories and name.</p>
  
  <p>I followed this thread but had no luck
  <a href="https://stackoverflow.com/questions/11472947/how-to-format-my-json-data-for-stack-column-chart-in-highcharts">How to format my json data for stack column chart in HighCharts</a></p>
  
  <p>honestly i'm not good in jquery and highchart. i will appreciate if someone helps me here,
  Thank you in advance</p>