Json数组用于高图

时间:2016-07-14 10:28:43

标签: php jquery json codeigniter highcharts

[{"outlet":"K-SM3","tanggal":"2016-06-02","total":5083600},
 {"outlet":"K-SM3","tanggal":"2016-06-01","total" :4660500},
 {"outlet":"K-PKM","tanggal":"2016-06-02","total":1576250},
 {"outlet":"K-PKM","tanggal":"2016-06-01" ,"total":921300}]

我目前正在学习高图。以上是我console.log的结果,我使用ajax来显示某些数据。但没有运气,图表没有显示出来。我无法在console.log内找到错误。

我的PHP脚本

function onchange()
    {
        extract(populateform());
        $explode = explode('-',$tgl);
        $start_date = inggris_date($explode[0]);
        $end_date = inggris_date($explode[1]);
        $jumlah = count($datanya);
        $result = array();
        for($x = 0 ;$x<$jumlah;$x++)
            {
                $hasil = $this->modelmodel->showdata("select outlet,convert(date,tanggal)tanggal,(cash + cc + dc + flash + piutang + reject + disc50)
                                                total from transaksi 
                                                where outlet = '".$datanya[$x]."' and tanggal between '$start_date' and '$end_date' order by tanggal desc");
                    foreach($hasil as $hsl)
                        {
                            $result[] = $hsl;
                        }
            }
        echo json_encode($result);
    }

这是我的JavaScript

$('.changeschanges').change(function() {
      $.ajax({
                 url: '<?=base_url();?>graph/onchange',
                 data: {datanya:$(".select2").val(),tgl:$("#reservation").val()},
                 type: 'POST',
                 dataType: 'JSON',
                 success: function(data) {
                      $.each(data, function(k, v) { 
                     res.push(data[k].outlet,[data[k].tanggal, data[k].total])
            });
              $.each(data, function(k, v) { 
                     date.push([data[k].tanggal])
            });
             $.each(data, function(y, x) { 
                     otl.push([data[y].outlet])
            });

                $('#container').highcharts({
                                title: {
                                    text: '',
                                    x: -20
                                },
                                subtitle: {
                                    text: 'Perbanding Grafik Pendapatan',
                                    x: -20
                                },
                                xAxis: {
                                 categories: date
                                },
                                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 '+ otl,
                                    data: res

                                }]

                            });
                            setTimeout(function () {
        }, 1000);
        },

    });
    });

我能够用这个ajax结果创建ajax

 [{"tanggal":"2016-04-03","total":5371010},
     {"tanggal":"2016-04-02","total":6387090},
     {"tanggal":"2016-04-01","total":2116550}]

为什么我在最新的ajax结果中添加outlet(在顶部)。因为会有多行K-SM3 & K-PKM。抱歉我的英语不好。

结果示例

enter image description here

0 个答案:

没有答案