아약스 요청이있는 Hightchart

Question

좋은 하루, 차트를 만들려고합니다. value 차트는 ajax return입니다.

나는이 데이터

"tgl":["2016-07-12 00:00:00.000","2016-07-01 00:00:00.000"],"total":[1283947,1234618514]} 

여기가 핸들 hightchart

xAxis: { 
      categories: [ 
      $.each(data.tgl, function(k, v) { 
        data.tgl 
      }) 
       ] 
      }, 
    series: [{ 
      name: 'Outlet' +$("#outlet").val(), 
        data: [ 
         $.each(data.total, function(k, v) { 
           data.total 
          }) 
        ] 

     }] 

내 JS있어 내가이 링크를 따라하는 방법을 foreach ajax 너무 모르고있어 jQuery loop over JSON result from AJAX Success?

여기 내 PHP는

function getajax() 
    { 
     extract(populateform()); 
     $explode = explode('-',$date_search); 
     $start_date = inggris_date($explode[0]); 
     $end_date = inggris_date($explode[1]); 

     $hasil = $this->modelmodel->showdata("select tanggal,(cash + cc + dc + flash + piutang + reject + disc50) 
               total from transaksi 
               where tanggal between '$start_date' and '$end_date' and 
               outlet = '".$outlets."' order by tanggal desc"); 

     $data = array(); 
     foreach($hasil as $hsl) 
      { 
       $data['tgl'][] = $hsl->tanggal; 
       $data['total'][] = $hsl->total; 
      } 
     echo json_encode($data); 
    } 

위의 스크립트 결과는 다음과 같습니다.

위 내 데이터에서 볼 수있다. 내 차트에 올바른 가치가 표시되지 않습니다. 시간과 총이 2016-07-12 00:00:00.000 => 1283947 and 2016-07-01 00:00:00.000 => 1234618514

내 lates을가 https://jsfiddle.net/oyrogu9v/1/

Answer 1

바이올린처럼 당신이 시리즈의 2 개 값이 있어야합니다 있어야합니다. Highchart sample timeserie

이 코드 시도하십시오 :

series: [{ 
     name: 'Winter 2012-2013', 
     data: [ 
      [Date.UTC(1970, 9, 21), 0], 
      [Date.UTC(1970, 10, 4), 0.28], 
      .................. 

여기 샘플을 볼 수 있습니다

$(document).ready(function() { 

    $("#test").click(function() { 
     var $btn = $(this); 
     $btn.button('loading'); 
      $.ajax({ 
       url: '<?=base_url();?>graph/getajax', 
       data: {outlets:$("#outlet").val(),date_search:$("#reservation").val()}, 
       type: 'POST', 
       dataType: 'JSON', 
       success: function(data) { 
         var res= []; 
      $.each(data, function(k, v) { 
              res.push([new Date(data[k].tanggal).getTime(), data[k].total])}); 

       $('#container').highcharts({ 
          title: { 
           text: '', 
           x: -20 //center 
          }, 
          subtitle: { 
           text: 'Omset ' + $("#outlet").val(), 
           x: -20 
          }, 
          xAxis: { 
           type: 'datetime' 
          }, 
          yAxis: { 
           title: { 
            text: 'Rupiah (Rp.)' 
           }, 
           plotLines: [{ 
            value: 0, 
            width: 1, 
            color: '#808080' 
           }] 
          }, 
          tooltip: { 
           valueSuffix: ' Rupiah' 
          }, 
          legend: { 
           layout: 'vertical', 
           align: 'right', 
           verticalAlign: 'middle', 
           borderWidth: 0 
          }, 

          series: [{ 
           name: 'Outlet '+ $("#outlet").val(), 
           data:res 
          }] 

         }); 

        }); 

     setTimeout(function() { 
      $btn.button('reset'); 
     }, 1000); 
    }); 

을}); 여기

당신이 결과를 볼 수 있습니다 https://jsfiddle.net/mb89apxr/