How to put data with format true json in Highchart

Question

i need help how to put data with format true json in highchart. i have json data like this:

{"stocksdata":[{"item_code":"SPH001","stock":"40.0"},
  {"item_code":"SPH002","stock":"40.0"},
  {"item_code":"SPH003","stock":"40.0"},
  {"item_code":"SPH004","stock":"40.0"},
  {"item_code":"SPH005","stock":"40.0"},
  {"item_code":"SPH006","stock":"20"}]
}

where json data is result from my controller like this:

 function get_stock(){
                $item_stock = $this->M_item->get_stock();
                $data['item_stock']=$item_stock;
                $data = array();
                $stocksdata = array();
                foreach($item_stock as $item_stocks){
                    $stocksdata []= array(
                        "item_code"=>$item_stocks->item_code,
                        "stock"=>$item_stocks->stock
                        );
                }
                $data['stocksdata']= $stocksdata;
                echo json_encode($data);
         }

and this my a part code from view where on top page i added some link like this:

<script src="<?php echo base_url();?>assets/Highcharts/jquery.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>



       <script type="text/javascript">
  function get_stockdata(stockdata){

      $.ajax({
              type    : "post",
              data    : {stockdata:stockdata},                       
              url     : '<?php echo base_url();?>index.php/Home/get_stock',
              dataType:"json",
              success: function(data){ 
              console.log(data);
            //START -->the 3rd lines with marked is updated
             var data=[];  
              for(var i = 0; i < data.length; i++) {
              var obj = data[i];
              }
           //END          
      }

    });
    }

var chart1;
jQuery(document).ready(function(){
  chart1 = new Highcharts.Chart({
            chart:{
            renderTo:'container',
            type:'line',
            borderWidth:1,
            spacingRight:20

          },
                    title: {
                        text: "Item Data"
                    },

                tooltip:{
              formatter: function() {
              return '<b>'+ this.series.name +'</b><br/>'+
              this.x +': '+ this.y+ ('Kg');
              }

          },
                    xAxis: {
                        type: 'category',
                        allowDecimals: false,
                        title: {
                            text: ""
                        }
                    },
                    yAxis: {
                        title: {
                            text: "Stocks"
                        }
                    },
                    series: [get_stockdata]

                }); 
            });

</script>
<div class="box-body">     
     <div id="container" width="400" height="246"></div>
</div>

and finally i got a result is blank page bordered. what is wrong in my javascript? previously, thanks for attention. one more i want to get result is like this : http://www.knowstack.com/webtech/charts_demo/highchartsdemo4.html thanks guys.

thanks Tpojka for your response .. i checked console and there is no errors for this script. — crazycoder, Jun 13 '17 at 07:57
I think I see two errors. First in AJAX response for loop, you are overwriting obj with each iteration. And second, after AJAX method, you are setting obj to empty array. — Tpojka, Jun 13 '17 at 09:05
@Tpojka i changed that with remove var obj .var data as well as obj in series instead get_stock but still got blank page. — crazycoder, Jun 13 '17 at 10:56
Now I saw: You are emptying data on response. First line on AJAX callback. What are you getting from this: `console.log(data);`? — Tpojka, Jun 13 '17 at 10:59
Thanks @Tpojka and for others friends welcome please to fix this issue. — crazycoder, Jun 13 '17 at 11:02
Willy i am checking that there is clean for errors(not found errors) — crazycoder, Jun 13 '17 at 11:05

How to put data with format true json in Highchart

0 Answers0