美好的一天,我正在尝试创建一个图表。图表value
来自ajax return
。
我得到了这个数据
"tgl":["2016-07-12 00:00:00.000","2016-07-01 00:00:00.000"],"total":[1283947,1234618514]}
这里是句柄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
})
]
}]
我不知道如何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
答案 0 :(得分:2)
你应该在系列中有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/