Hightchart with ajax request

Question

Good day, i'm trying to create a chart. The chart value is from ajax return.

I got this data

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

and here it's my js for handle 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
                            })
                    ]

        }]

i don't know how to foreach ajax so i follow this link jQuery loop over JSON result from AJAX Success?

and here is my 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);
    }

The result from my script above is like this.

as you can see from my data above. My chart not showing the right value. It should be like this 2016-07-12 00:00:00.000 => 1283947 and 2016-07-01 00:00:00.000 => 1234618514

My lates fiddle https://jsfiddle.net/oyrogu9v/1/

Answer 1

you should have 2 values in the series: time and total.

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

you can see here a sample: Highchart sample timeserie

please try this code:

$(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);
    });

});

here you can see the results: https://jsfiddle.net/mb89apxr/