title: How to loop through JSON values and plot lines on highcharts
body: <p>I have below JSON data </p>
  
  <pre><code>[
  
      {"line":"BAH","data":{"May":120}},
      {"line":"DOM","data":{"May":120,"Apr":90,"Mar":43.5}},
      {"line":"GLW","data":{"May":120}}
  
  ]
  </code></pre>
  
  <p>I would like to loop through this data and plot line graph with the values (BAH,DOM,GLW) on Y-axis and Month Names(May, Apr, Mar) on X-axis.</p>
  
  <p>Code </p>
  
  <pre><code> $.ajax({ 
                                       type : 'GET' ,
                                       url: '&lt;?php echo public_path() ?&gt;index.php/dashboard/getGraph?indicator_id='+id,
                                      // dataType: 'JSON' ,
                                       success: function(results)
                                       {      
                                          // console.log("results "+results) ;
                                          // alert('Graph Type &gt;&gt;&gt;&gt;&gt;&gt;&gt; '+results) ;
                                           var graph_results = JSON.parse(results);
  
                                      //   console.log("Graph Type &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; "+graph_results.graph_type); 
                                      //   console.log("Graph Name &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; "+graph_results.graph_name); 
                                           //
                                      //   alert("indicator_input "+graph_results.graph_type);
                                            // for Line graph only
                                           if(graph_results.graph_name != null &amp;&amp; graph_results.graph_type == 'line') 
                                           { 
  
                                           //BUILD SERIES
                                           //1. Do an Ajax call
                                           //var test = 1 ; 
                                          // alert("It is a line ") ;
                                           $.ajax({ 
                                               type: 'GET' ,
                                               url: '&lt;?php echo public_path() ?&gt;index.php/dashboard/showGraphSeries',
                                               data: {
  
                                                      indicator_id:graph_results.indicator_id ,
                                                      year_user_filter:year_user_filter ,
                                                      month_user_filter:month_user_filter ,
                                                      q_user_filter:q_user_filter ,
                                                      date_from_filter_input: date_from_filter_input ,
                                                      date_to_filter_input: date_to_filter_input ,
                                                   } ,
                                               success: function(series_results) 
                                               {
                                                    //console.log("HOW MANY TIMES "+graph_results.indicator_id) ;
  
                                                   //2. get the series and construct data
                                                  // console.log(JSON.parse(series_results));
                                                   //3. We construct the required structure for display
                                                   // [{ 'name': 'Some name' , 'data': 'Some Data'}]
                                                  // console.log("Series data"+series_results);
                                                  // console.log('#'+graph_results.graph_table_name);
                                                      var data_series = JSON.parse(series_results) ;
                                                     // console.log('data_series '+data_series.data);
                                                      //
                                                    //alert(data_series.toSource());
                                                      var data_t = [] ;
                                                      var categ = [] ;
                                                      var categ_sorted = null ;
                                                      //
                                                      var graph_data = [] ;
                                                      var values = {} ;
                                                      var d = [] ;
  
                                                      for(var item in data_series)
                                                      {
                                                            // alert(data_series[item].line) ;
                                                             values['name'] = data_series[item].line ;
                                                            // alert(item);
                                                             //
                                                              // alert(data_series[item].line) ;
                                                               for(var i in data_series[item].data)
                                                               {
                                                                  // alert("&gt;&gt;&gt;&gt;"+data_series[item].line+"&gt;&gt;&gt;&gt;&gt;&gt;"+i);
                                                                  // 
                                                                   values['data'] = [data_series[item].data[i]] ;
                                                                   //
                                                                   categ.push(i);
                                                                   graph_data.push(values);
  
                                                               }
  
                                                              // alert(categ.toSource());
                                                              // alert(data_series[item].data) ;
                                                           //  values['name'] = data_series.line ;
                                                           //  values['data'] = [data_series.data[item]] ;
                                                             //
                                                            alert(values.toSource()) ;
                                                            // graph_data.push(values);
                                                           //  categ.push(item);
                                                      }
  
                                                      categ_sorted = sortMonths(categ) ; 
                                                  //  alert(values.toSource()) ;
                                                  //  alert(graph_data.toSource());
                                                  //  alert(categ.toSource());
                                                       //dynamically build graphs
  
                                                      $('#'+graph_results.graph_table_name).highcharts({
                                                          title: {
                                                              text: ''+graph_results.graph_name,
                                                              x: -20 //center
                                                          },
                                                          subtitle: {
                                                              text: 'Source: '+data_series.data_source,
                                                              x: -20
                                                          },
                                                          xAxis: {
                                                              categories: categ_sorted
                                                          },
                                                          yAxis: {
                                                              title: {
                                                                  text: ''+graph_results.name_y_axis
                                                              },
                                                              plotLines: [{
                                                                  value: 0,
                                                                  width: 1,
                                                                  color: '#808080'
                                                              }]
                                                          },
                                                          credits:
                                                          {
                                                              enabled: false
                                                          },
                                                          tooltip: {
                                                              valueSuffix: ''
                                                          },
                                                          legend: {
                                                              layout: 'vertical',
                                                              align: 'right',
                                                              verticalAlign: 'middle',
                                                              borderWidth: 0
                                                          },
                                                          series: graph_data
                                                      });
  
                                                      //end dynamic graphs
  
  
                                               } ,
                                               error: function() 
                                               {
  
                                               }
  
                                           }) ;
  
                                       }
                                          //end for line
  
                                           } ,
                                           error: function(){
                                                //console.log("getGraph error");
                                                alert("getGraph error") ;
                                           }
                                      });
  </code></pre>
  
  <p>Any idea on how i can achieve this ? Thank you.</p>