YVS1102 YVS1102 - 4 months ago 19
JSON Question

Hightchart with ajax request

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.

enter image description here

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


enter image description here

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

Answer

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/

Comments