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/

marius · Accepted Answer · 2016-07-13T08:46:08.930

2

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/

edited Jul 13 '16 at 08:46

answered Jul 13 '16 at 06:16

marius

319
1
9

is that a must ? i was able to create a single series and it's working fine – YVS1102 Jul 13 '16 at 06:26
yes, it's a single series but you have 2 axes.. one value is for the x axis and another for the y axis.. you need to have 2 values to draw a point in order to specify the top and left for that point. so you serie should contains the date and the total.. you have both values – marius Jul 13 '16 at 06:29
yes, it's more easy to change the json result. you have 2 options: one to parse the json result and set serie to [ [tgl[0], total[0]], [tgl[1], total[1]], ........[tgl[n], total[n] ] or you can change the json result to send the result in this format: [ [tgl0, total0], [tgl1, total1] .....[tgln, totaln] ]. you already have this format in the $hasil variable from php code – marius Jul 13 '16 at 06:59
i've change my php and i got this `[{"tanggal":"2016-07-12 00:00:00.000","total":1283947},{"tanggal":"2016-07-01 00:00:00.000","total":1234618514 }]` – YVS1102 Jul 13 '16 at 07:01
please change the function from series: $.each(data, function(k, v) { return [data[k].tanggal, data[k].total]; }) – marius Jul 13 '16 at 07:09
i see ` [Object Object] [Object Object]` at the bottom and there is no line – YVS1102 Jul 13 '16 at 07:16
can you declare a variable and see the value from the serie. something like that: var testVal = $.each(data, function(k, v) { return [data[k].tanggal, data[k].total]; }) and console.log(testVal) – marius Jul 13 '16 at 07:18
[Object { tanggal="2016-07-12 00:00:00.000", total=1283947}, Object { tanggal="2016-07-01 00:00:00.000", total=1234618514}] – YVS1102 Jul 13 '16 at 07:29
ok, I found the error.. please use this code: var res= []; $.each(obj, function(k, v) { res.push([obj[k].tanggal, obj[k].total]) }); and series: [{ name: 'Outlet' +$("#outlet").val(), data: res} ] }] – marius Jul 13 '16 at 07:37
do i need to `var obj?` – YVS1102 Jul 13 '16 at 07:45
should i put it at the begining `var res`of js ? – YVS1102 Jul 13 '16 at 07:49
res will be used in chart, so you should have that variable declared and filled before use it in chart – marius Jul 13 '16 at 07:50
`series: [{ name: 'Outlet '+ $("#outlet").val(), data:res }]` data only need res? – YVS1102 Jul 13 '16 at 08:13
thanks bro for helping me . sorry for wasting your time – YVS1102 Jul 13 '16 at 08:41

Hightchart with ajax request

1 Answers1