this is my query on my controller. I want to register participants every year. I got the year and the data every year. but i dont know how to passing my data in highchart dynamically
if ($request->ajax()) {
$tahun = Peserta::orderBy('tanggal','asc')->select(\DB::raw("YEAR(tanggal) as year"))->distinct()->get();
$years = $tahun->pluck('year');
$value_an_year = [];
$month = [01,02,03,04,05,06,07,8,9,10,11,12];
$monthNames = collect($month)->transform(function ($value) {
return \Carbon\Carbon::parse(date('Y').'-'.$value.'-01')->format('M');
})->toArray();
$cetak_bulanan = [];
foreach($years as $key => $thn){
$value_an_year[] = Peserta::where(\DB::raw("DATE_FORMAT(tanggal, '%Y')"),$thn)->count();
$bulanan = [];
foreach($month as $key => $bln){
$bulanan[] = Peserta::where(\DB::raw("DATE_FORMAT(tanggal, '%Y')"),$thn)->where(\DB::raw("DATE_FORMAT(tanggal, '%m')"),$bln)->count();
}
$cetak_bulanan[] = implode(',',$bulanan);
}
$hasil_bulanan = implode('<br>',$cetak_bulanan);
$hasil_tahunan = implode(',',$value_an_year);
$nama_bulan = implode(',',$monthNames);
return response()->json(
[
'status' => 200,
'tahunan' => $value_an_year,
'tahun' => $years,
'message' => 'chart perkembangan pengguna tilawati'
]
);
}
this is the highchart javascript
$.ajax({
url: '{{ route("chart.perkembangan.pengguna") }}',
type: 'get',
dataType: 'json',
success: function(response) {
console.log(response.tahunan, '-' ,response.tahun);
Highcharts.chart('container3', {
chart: {
type: 'column'
},
title: {
align: 'left',
text: 'Browser market shares. January, 2018'
},
subtitle: {
align: 'left',
text: 'Click the columns to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
},
accessibility: {
announceNewData: {
enabled: true
}
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [
{
name: "Tahunan",
colorByPoint: true,
data: [
{
name: "Firefox",
y: 10.57,
drilldown: "Firefox"
},
{
name: "Internet Explorer",
y: 7.23,
drilldown: "Internet Explorer"
},
{
name: "Safari",
y: 5.58,
drilldown: "Safari"
},
{
name: "Edge",
y: 4.02,
drilldown: "Edge"
},
{
name: "Opera",
y: 1.92,
drilldown: "Opera"
},
{
name: "Other",
y: 7.62,
drilldown: null
}
],
}
],
drilldown: {
breadcrumbs: {
position: {
align: 'right'
}
},
series: [
{
name: "Chrome",
id: "Chrome",
data: [
[
"v65.0",
0.1
],
[
"v64.0",
1.3
],
[
"v63.0",
53.02
],
[
"v62.0",
1.4
],
[
"v61.0",
0.88
],
[
"v60.0",
0.56
],
[
"v59.0",
0.45
],
[
"v58.0",
0.49
],
[
"v57.0",
0.32
],
[
"v56.0",
0.29
],
[
"v55.0",
0.79
],
[
"v54.0",
0.18
],
[
"v51.0",
0.13
],
[
"v49.0",
2.16
],
[
"v48.0",
0.13
],
[
"v47.0",
0.11
],
[
"v43.0",
0.17
],
[
"v29.0",
0.26
]
]
},
{
name: "Firefox",
id: "Firefox",
data: [
[
"v58.0",
1.02
],
[
"v57.0",
7.36
],
[
"v56.0",
0.35
],
[
"v55.0",
0.11
],
[
"v54.0",
0.1
],
[
"v52.0",
0.95
],
[
"v51.0",
0.15
],
[
"v50.0",
0.1
],
[
"v48.0",
0.31
],
[
"v47.0",
0.12
]
]
},
{
name: "Internet Explorer",
id: "Internet Explorer",
data: [
[
"v11.0",
6.2
],
[
"v10.0",
0.29
],
[
"v9.0",
0.27
],
[
"v8.0",
0.47
]
]
},
{
name: "Safari",
id: "Safari",
data: [
[
"v11.0",
3.39
],
[
"v10.1",
0.96
],
[
"v10.0",
0.36
],
[
"v9.1",
0.54
],
[
"v9.0",
0.13
],
[
"v5.1",
0.2
]
]
},
{
name: "Edge",
id: "Edge",
data: [
[
"v16",
2.6
],
[
"v15",
0.92
],
[
"v14",
0.4
],
[
"v13",
0.1
]
]
},
{
name: "Opera",
id: "Opera",
data: [
[
"v50.0",
0.96
],
[
"v49.0",
0.82
],
[
"v12.1",
0.14
]
]
}
]
}
});
}
});
My Question is how do I get the "data name" in my series to be filled with "tahun" and "data y" to be filled with "tahunan"
CodePudding user response：
Use array and response json in your controller and each loop in your front js.
Controller:
$data['chart'] = array([
'status' => 200,
'tahunan' => $value_an_year,
'tahun' => $years,
'message' => 'chart perkembangan pengguna tilawati'
]);
return response()->json($data);
JS:
success: function(response) {
$.each(response.chart, function (key, value) {
let tahun = value.tahun;
let tahunan = value.tahunan;
use tahun and tahunan and other variables further in your js code or append it to html for example:
$("#div id").append('<span>' tahun '</span>');
or
$("#div id").html('<span>' tahun '</span>');
CodePudding user response：
You need to adapt your data structure to the format required by Highcharts - an array of objects or an array of arrays with 2 values. For example:
const mockedResponse = [{
tahunan: 2015,
tahun: 1
}, {
tahunan: 2017,
tahun: 86
}, {
tahunan: 2019,
tahun: 64
}, {
tahunan: 2020,
tahun: 52
}, {
tahunan: 2021,
tahun: 4514
}, {
tahunan: 2022,
tahun: 8881
}];
const processedData = response.map(dataEl => [dataEl.tahunan, dataEl.tahun]);
Highcharts.chart('container', {
series: [{
data: processedData
}]
});
Live demo: http://jsfiddle.net/BlackLabel/s58w3tdy/
API Reference: https://api.highcharts.com/highcharts/series.line.data