Хайтчарт с запросом ajax
Добрый день, я пытаюсь создать диаграмму. Диаграмма value взята из ajax return.
Я получил эти данные
"tgl":["2016-07-12 00:00:00.000","2016-07-01 00:00:00.000"],"total":[1283947,1234618514]}
И вот мой js для обработки 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 по JSON в результате успеха AJAX?
А вот мой 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/
1 answers
У вас должно быть 2 значения в ряду: время и общее.
series: [{
name: 'Winter 2012-2013',
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
..................
Здесь вы можете увидеть образец: Примерная временная шкала высокого графика
Пожалуйста, попробуйте этот код:
$(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/