带有ajax请求的高图表

Question

您好，我正在尝试创建图表。图表value 来自ajax return。

我得到了这个数据

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

这是我处理hightchart的js

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

        }]

我不知道怎么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

我最近的小提琴https://jsfiddle.net/oyrogu9v/1/

Answer 1

系列中应该有 2 个值：时间和总计。

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

您可以在此处查看示例： Highchart sample timeserie

请试试这个代码：

$(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/