store my fetched data to my array const = players - ajax

newbie here. My target is to store my fetched data in my array. T
This is my script. This script function is to join 2 data in 1 if they have the same level. For example player 1 has level 1, player 6 has level 1 also, which means that Player 1 and player 6 will be joined in 1 array. This current script is static, it is not dynamic yet. My target is to store my fetched data here rather than the static ones. Thank you in advance, any help will be appreciated.
const players = [
{
id: 1,
name: 'player1',
level: '1',
},
{
id: 2,
name: 'player2',
level: '2',
},
{
id: 3,
name: 'player3',
level: '3',
},
{
id: 4,
name: 'player4',
level: '3',
},
{
id: 5,
name: 'player5',
level: '2',
},
{
id: 6,
name: 'player6',
level: '1',
}
];
const matching = (list, keyGetter) => {
let mapping = {};
const map = new Map();
list.forEach((item) => {
const key = keyGetter(item);
const collection = map.get(key);
if (!collection) {
map.set(key, [item]);
} else {
collection.push(item);
}
});
Array.from(map).map(([key, value]) => Object.assign(mapping, { [key]: value }));
return mapping
}
const result = matching(players, ({ level}) => { return level});
console.log("RESULT", result);
this is the result of the above script
In this function, this is how i fetch my data. My target is to store my fetched data to the array i made above const = players
views:
<table id="table_player" class="table table-bordered table-hover" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Player</th>
<th>Level</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
ajax:
$(document).ready(function() {
//datatables
table = $('#table_player').DataTable({
dom: 'lBfrtip',
buttons: [
'print', 'csv', 'copy', 'excel', 'pdfHtml5'
],
"processing": false, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo site_url('controller/ajax_list')?>",
"type": "POST",
"data": function (dateParams) {
return $.extend( { "start": dateParams.start,
"end": dateParams.end,}, dateParams, {
});
},
},
//Set column definition initialization properties.
"columnDefs": [
{
"targets": [ 0 ], //first column
"orderable": false, //set not orderable
},
{
"targets": [ -1 ], //last column
"orderable": false, //set not orderable
},
],
});
});
Controller:
public function ajax_list()
{
$list = $this->model->get_datatables();
$data = array();
$no = $_POST['start'];
foreach ($list as $person) {
$no++;
$row = array();
$row[] = $person->id;
$row[] = $person->player;
$row[] = $person->level;
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->model->count_all(),
"recordsFiltered" => $this->model->count_filtered(),
"data" => $data,
);
//output to json format
echo json_encode($output);
}
Model:
var $table = 'tbl_player';
var $column_order = array(null,'id','player','level');
var $order = array('id' => 'desc');
var $column_search = array('id','player','level');
//set column field database for datatable orderable //set column field database for datatable searchable just firstname , lastname , address are searchable var $order = array('id' => 'desc'); // default order
private function _get_datatables_query()
{
$this->db->from($this->table);
$i = 0;
foreach ($this->column_search as $item) // loop column
{
if($_POST['search']['value']) // if datatable send POST for search
{
if($i===0) // first loop
{
$this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND.
$this->db->like($item, $_POST['search']['value']);
}
else
{
$this->db->or_like($item, $_POST['search']['value']);
}
if(count($this->column_search) - 1 == $i) //last loop
$this->db->group_end(); //close bracket
}
$i++;
}
if(isset($_POST['order'])) // here order processing
{
$this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
}
else if(isset($this->order))
{
$order = $this->order;
$this->db->order_by(key($order), $order[key($order)]);
}
}
function get_datatables()
{
$this->_get_datatables_query();
if($_POST['length'] != -1)
$this->db->limit($_POST['length'], $_POST['start']);
$query = $this->db->get();
return $query->result();
}
function count_filtered()
{
$this->_get_datatables_query();
$query = $this->db->get();
return $query->num_rows();
}
public function count_all()
{
$this->db->from($this->table);
return $this->db->count_all_results();
}

Related

Laravel Yajra Datatables sorting column with 3 set of values

I have implemented yajra datatables successfully for all reviews. One review can have 3 statuses: Approved, Pending, Blocked.
I have a column on datatables which is called Status and I want to sort column by status. By default the status is being ranged as per Approved and Declined but not for Pending.
Is there any way so I can sort this column by routing on this 3 statuses?
I'm sure that there is some editColumn or filterColumn method for my question but I'm not finding it any where.
Any way for #andrewjames pleasure I'm adding some non necessary code here:
public function indexDataService()
{
$reviews = DB::table('reviews')
->join('users', 'reviews.user_id', '=', 'users.id')
->join('statuses', 'reviews.status_id', '=', 'statuses.id')
->join('products', 'reviews.product_id', 'products.id')
->join('categories', 'reviews.category_id', 'categories.id')
->select([
'reviews.*',
'reviews.created_at AS created_at',
'statuses.title AS status',
DB::raw('CONCAT(users.first_name, " ", users.last_name) AS full_name'),
'products.title',
DB::raw('categories.title as category'),
])
->where('reviews.deleted_at', '=', NULL);
return Datatables::of($reviews)
->addColumn('action', function($review){
return view('admin/reviews/reviews_actions', compact('review'));
})
->editColumn('created_at', function ($review) {
$formatedDate = Carbon::createFromFormat('Y-m-d H:i:s', $review->created_at)->format('d-m-Y');
return $formatedDate;
})
->filterColumn('full_name', function ($query, $keyword) {
$keywords = trim($keyword);
$query->whereRaw("CONCAT(first_name, last_name) like ?", ["%{$keywords}%"]);
})
->filterColumn('category', function ($query, $keyword) {
$keywords = trim($keyword);
$query->whereRaw("categories.title like ?", ["%{$keywords}%"]);
})
->make(true);
}
On blade:
<script>
$('#category-reviews-table tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="'+title+'" />' );
} );
$(function() {
$('#category-reviews-table').DataTable({
"sDom":"ltipr",
processing: false,
serverSide: true,
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Italian.json"
},
ajax: '{{ route('admin.reviews.data') }}',
columnDefs: [
{"className": "dt-center", "targets": "_all"},
{
targets: [1],
render: function ( data, type, row ) {
return type === 'display' && data.length > 10 ?
data.substr( 0, 20 ) +'…' :
data;
}
}
],
columns: [
{ data: 'full_name', name: 'full_name' },
{ data: 'title', name: 'products.title' },
{ data: 'category', name: 'category'},
{ data: 'no_yes', name: 'reviews.no_yes', searchable:false },
{ data: 'status', name: 'status', searchable:false,
render: function( data, type, full, meta ) {
if (data === 'In attessa') {
return "<span class=\"badge badge-warning\">In attessa</span>";
} else if (data === 'Approvata') {
return "<span class=\"badge badge-success\">Approvata</span>";
} else if (data === 'Rifiutata') {
return "<span class=\"badge badge-danger\">Rifiutata</span>";
}
}
},
{ data: 'created_at', name: 'reviews.created_at', searchable:false },
{ data: 'action', name: 'action', orderable: false, searchable:false }
],
initComplete: function () {
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
},
});
});
Can anyone give me some example how to achieve it?

Remove select options from datatable header in pdf export

I have included select element in header of datatable. Now all the options append and show in header when I export to pdf. I do not want to show these values in header.
<script>
$(document).ready(function() {
$('#colSearch').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6 ]
}
},
{
extend: 'pdf',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6 ],
},
],
initComplete: function () {
this.api().columns([0,1,2,3,4,5,6]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.header()))
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
});
$( select ).click( function(e) {
e.stopPropagation();
});
column.data().unique().sort().each( function ( d, j ) {
var val = $('<div/>').html(d).text();
select.append( '<option value="' + val + '">' + val + '</option>' );
});
});
},
});
});
</script>
This provided solution removes all of the header.
https://stackoverflow.com/a/54803204/9660462
You can add a format.header option to your existing exportOptions:
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6 ],
format: {
header: function ( data ) {
var n = data.indexOf("<select>");
if (n > -1) {
return data.substring(0, n);
} else {
return data;
}
}
}
}
The above code assumes your DataTable contains HTML in its headings which looks similar to the following:
<th class="sorting">
Office
<select>
<option value=""></option><option value="Edinburgh">Edinburgh</option><option value="London">London</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option><option value="Singapore">Singapore</option><option value="Sydney">Sydney</option><option value="Tokyo">Tokyo</option>
</select>
</th>
This causes the heading to contain the following text, which is all the inner HTML from the th element:
Office<select><option value=""></option><optionvalue="Edinburgh">Edinburgh</option><option value="London">London</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option><option value="Singapore">Singapore</option><option value="Sydney">Sydney</option><option value="Tokyo">Tokyo</option></select>
To exclude the drop-down values (in my case, the office locations), and to only show the heading (in my case, the word "Office"), my code checks for the location of the first <select> substring in the extracted text. It then ignores everything from that point onwards.
The format.header option is documented in this page.

Feeding highchart with x and y values from ajax

I'm trying to feed my highchart from a database using ajax. From my ajax request, I want to return both x and y values (the x value is like that: year-week, ie 2020-16; the y value is a random number). My chart remains blank, I have a silent error that I cannot figure out. I'm pretty sure it comes from the strucure of the data returned by ajax, but I can't seem to fix it on my own.
Here's my javascript:
var weekOptions = {
chart: {
renderTo: 'weekContainer',
type: 'column',
},
title: {
text: 'Last 52 weeks',
},
credits: {
enabled: false,
},
xAxis: {
lineWidth: .5,
tickWidth: 1,
tickLength: 10,
},
yAxis: {
title: {
text: 'Distance (miles)'
},
labels: {
formatter: function() {
return this.value;
},
},
allowDecimals: false,
gridLineWidth: 1,
},
tooltip: {
crosshairs: true,
split: true,
useHTML: true,
valueDecimals: 2,
valueSuffix: ' miles',
formatter: '',
},
plotOptions: {
spline: {
marker: {
symbol: "circle",
radius: 3,
}
}
},
lang: {
noData: "No Data. Make sure at least one activity type is selected."
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
},
exporting: {
buttons: {
contextButton: {
menuItems: ['viewFullscreen']
}
},
},
series: [{}],
};
//get series from ajax filtered by activity types
$.ajax({
url: "weekGetSeries.php",
type: "POST",
data: {
activityType: activityTypeSelected,
dataToDisplay: dataToDisplay,
},
dataType: "JSON",
success: function (json) {
weekOptions.series = json;
var chart = new Highcharts.Chart(weekOptions);
}
});
And here my ajax php file:
<?php
require 'dbConnection.php';
$activityType = array(1,2,3,4,5);
$dataToDisplay = "distance";
$startingDate = date('Y-m-d', strtotime('-52 week', time()));
$firstWeek = strtotime($startingDate);
$conditionActivityType = ' WHERE startingTime >= "' . $startingDate . '" AND (type=' . implode(" OR type=",$activityType) . ')';
$dataSerie = array("name" => "Weekly Stats","data" => array());
for($i = 0; $i < 52; $i++){
$nextWeek = strtotime('+'.$i.' week', $firstWeek);
$dataSerie["data"][date("o",$nextWeek) . "-" . date("W",$nextWeek)] = 0;
}
$getActivities = $conn->query("SELECT * FROM activity" . $conditionActivityType . " ORDER BY startingTime ASC");
if ($getActivities->num_rows > 0) {
while($row = $getActivities->fetch_assoc()) {
$date = substr($row["startingTime"],0,10);
$date = strtotime($date);
$week = date("W",$date);
$category = date("Y-",$date).$week;
$distance = ($row["distance"]);
$movingTime = $row["movingTime"];
$elapsedTime = $row["elapsedTime"];
$totalElevationGain = ($row["totalElevationGain"])*3.28084;
switch ($dataToDisplay) {
//distance
case "distance":
$dataSerie["data"][$category] += $distance;
break;
//Moving Time
case "movingTime":
break;
//Elapsed Time
case "elapsedTime":
break;
//elevation gain
case "totalElevationGain":
break;
//number activities
case "activities":
break;
}
}
};
$data = array();
array_push($data,$dataSerie);
echo json_encode($data);
?>
My ajax returns this:
[{"name":"Weekly Stats","data":{"2019-17":13184.4,"2019-18":73560.2,"2019-19":36899.4,"2019-20":0,"2019-21":38691.3,"2019-22":165127.8,"2019-23":188163.2,"2019-24":12888.5,"2019-25":60011.3,"2019-26":32585.2,"2019-27":12952.8,"2019-28":7944.8,"2019-29":79258.3,"2019-30":60885.2,"2019-31":0,"2019-32":0,"2019-33":0,"2019-34":0,"2019-35":0,"2019-36":0,"2019-37":30974.6,"2019-38":7766.5,"2019-39":7685,"2019-40":21128.7,"2019-41":28996,"2019-42":46362.6,"2019-43":0,"2019-44":0,"2019-45":63694.8,"2019-46":81551.1,"2019-47":104595.9,"2019-48":18121.7,"2019-49":18691.6,"2019-50":37538,"2019-51":40671.8,"2019-52":22109.6,"2020-01":22079,"2020-02":22086.7,"2020-03":21933.2,"2020-04":30702.1,"2020-05":58259,"2020-06":38811.3,"2020-07":43754,"2020-08":45109.1,"2020-09":50870.1,"2020-10":62917.8,"2020-11":0,"2020-12":95912.5,"2020-13":20836.2,"2020-14":25293,"2020-15":110540.5,"2020-16":150804.9}}]
How do I structure my data so I can feed my chart?
In your case series.data needs to be an array of arrays or an array of objects. Now it is an object.
data: [
[0, 6],
[1, 2],
[2, 6]
]
Or:
data: [{
x: 1,
y: 9
}, {
x: 1,
y: 6
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4977/
API Reference: https://api.highcharts.com/highcharts/series.column.data

How to solve Chart js mismatched x-axes label and value dynamically in Laravel?

I have encountered a problem using chart js when applying it dynamiccally, which means I get a data from my database and output a bar graph using Chart JS. I found this example which works when a value is 0, but on my situation some data on a specific year cannot be found yet on my database, which leads to a null value. How can I set this empty or null value to zero so that I can achieve this example https://jsfiddle.net/17mw40rx/1/. I want also to show my JS code which I copied from the same sample and applied it to my project. The script works fine but when a year data is missing let say no record found in 2002 and 2005, the data are filled automatically by a wrong year data. I hope you understand my problem. Please I need help from someone about this.
JS Script
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<script>
var year = ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'];
var female = <?php echo $female; ?>;
var male = <?php echo $male; ?>;
var entranceDataset = {
label: 'Female',
type: 'bar',
yAxesID : "y-axis-1",
data: female,
backgroundColor: 'rgba(0, 204, 0, 0.2)',
borderColor: 'rgba(0, 204, 0,1)',
borderWidth: 1
};
var dataset = [];
dataset.push(entranceDataset);
var exitDataset = {
label: 'Male',
type: 'bar',
yAxesID : "y-axis-1",
data: male,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
};
dataset.push(exitDataset);
var ctx = $('#enrollcanvas');
mainThroughputChart = new Chart(ctx, {
type: 'bar',
data: {
labels: year,
datasets: dataset
},
options: {
scales: {
xAxes : [{
gridLines : {
display : false
},
scaleLabel: {
display: true,
labelString: 'Year'
}
}]
},
}
});
</script>
Laravel Controller and query
$female = Enroll::select(DB::raw("SUM(tot_enroll) as count"))
->orderBy(DB::raw('sy'))
->groupBy(DB::raw("(sy)"))
->where('gender','=', 'Female')
->get()->toArray();
$female = array_column($female, 'count');
$male = Enroll::select(DB::raw("SUM(tot_enroll) as count"))
->orderBy(DB::raw('sy'))
->groupBy(DB::raw("(sy)"))
->where('gender','=', 'Male')
->get()->toArray();
$male = array_column($male, 'count');
return view('home')
->with('female',json_encode($female,JSON_NUMERIC_CHECK))
->with('male',json_encode($male,JSON_NUMERIC_CHECK));
Blade Page
<canvas id="enrollcanvas" name="enrollcanvas" height="280" width="600"></canvas>
Actual Bar Chart Result
Database Table where the bar chart is based from
I think the problem with mismatched data of $female and $male with JS year variable.
var year = ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'];
var female = <?php echo $female; ?>;
var male = <?php echo $male; ?>;
Pass the '0' if $female OR $male doesn't have value for each year(Let's say 2000). So your $female and $male should be like:
var year = ['2000','2001','2002','2003', '2004'...];
var female = ['0','34', '0','65', '54',...];
var male = ['0','75', '0','34', '0',...];
Update
Try this below code with full snippet of controller side. Replace enroll with your database table name into this query.
$rsltEnrollData = DB::table('enroll')->selectRaw('sy as sy, gender, SUM(tot_enroll) as count')
->groupBy('sy')
->orderBy('sy')
->get();
$arrFemale = array();
$arrMale = array();
$arrYearData = array();
foreach($rsltEnrollData as $key => $objEnrollData){
if(!isset($arrYearData[$objEnrollData->sy])){
$arrYearData[$objEnrollData->sy]['Male'] = 0;
$arrYearData[$objEnrollData->sy]['Female'] = 0;
}
$arrYearData[$objEnrollData->sy][$objEnrollData->gender] = $objEnrollData->count;
$arrFemale = $arrYearData[$objEnrollData->sy]['Female'];
$arrMale = $arrYearData[$objEnrollData->sy]['Male'];
}
Debug
foreach($rsltEnrollData as $key => $objEnrollData){
print('<pre style="color:red;">');
print_r($objEnrollData);
print('</pre>');
}
exit;
this is a snippet of the script in my project. maybe a little different, but maybe someone needs it. and hope it helps in configuring chart js with laravel and database
JAVASCPT
$(document).ready(function() {
var statistics_chart = document.getElementById("myChart").getContext('2d');
fetch("{{url('chart')}}")
.then(response =>response.json())
.then(json=>{
var myChart = new Chart(statistics_chart, {
type: 'line',
data: {
labels: json.labels,
datasets: json.dataset,
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
// display: false,
drawBorder: false,
color: '#f2f2f2',
},
ticks: {
beginAtZero: true,
stepSize: 10000,
}
}],
xAxes: [{
gridLines: {
display: false,
tickMarkLength: 15,
}
}]
},
}
});
})
});
Controller
public function chart()
{
$data = Kas::select([
DB::raw("SUM(debit) as total_debit"),
DB::raw("SUM(kredit) as total_kredit"),
DB::raw("MONTH(created_at) as bln"),
// DB::raw("YEAR(created_at) as year")
])
->whereYear('created_at', 2022)
->groupBy([
'bln'
])
->orderBy('bln')
->get();
$arrBln = [1 => 'Jan','Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
$totalD = $totalK = [];
foreach ($data as $tot) {
$totalD[$tot->bln] = $tot->total_debit;
$totalK[$tot->bln] = $tot->total_kredit;
}
foreach ($arrBln as $month =>$name){
if(!array_key_exists($month, $totalD)){
$totalD[$month]= 0;
}
if(!array_key_exists($month, $totalK)){
$totalK[$month]= 0;
}
}
ksort($totalD);
ksort($totalK);
return[
'labels' => array_values($arrBln),
'dataset' => [
[
'label' => 'Pemasukan',
'data' => array_values($totalD),
'borderWidth'=> 2,
'backgroundColor'=> 'rgba(63,82,227,.8)',
'borderWidth' => 0,
'borderColor' =>'transparent',
'pointBorderWidth' => 0,
'pointRadius' => 3.5,
'pointBackgroundColor' => 'transparent',
'pointHoverBackgroundColor' => 'rgba(63,82,227,.8)',
],
[
'label' => 'Pengeluaran',
'data' => array_values($totalK),
'borderWidth'=> 2,
'backgroundColor' => 'rgba(254,86,83,.7)',
'borderWidth' => 0,
'borderColor' =>'transparent',
'pointBorderWidth'=> 0,
'pointRadius'=> 3.5,
'pointBackgroundColor'=> 'transparent',
'pointHoverBackgroundColor'=> 'rgba(254,86,83,.8)',
],
]
];
}

Merge results of query

I have a query that outputs its values as json in the following format:
[
{
"name":"Bob",
"date":"2016-02-05 00:00:00",
"value":34
},
{
"name":"John",
"date":"2016-02-05 00:00:00",
"value":5
},
{
"name":"Bob",
"date":"2016-02-05 00:00:00",
"value":3
},
{
"name":"Sarah",
"date":"2016-02-05 00:00:00",
"value":56
}
...
]
I need to put this data into the form:
[
{
"name":"Bob",
"data": [
[2016-02-05 00:00:00, 34],
[2016-02-05 00:00:00, 3]
]
},
{
"name":"John",
"data": [
[2016-02-05 00:00:00, 5]
]
},
{
"name":"Sarah",
"data": [
[2016-02-05 00:00:00, 56]
]
}
...
]
Or in other words, I need to combine the results that share a name and put the data into an array data, where each array holds the date and value.
The original json data is held in a variable $results:
foreach ($results as $result)
{
//
}
How do I achieve this?
Something like
function process_results($results) {
$out = [];
foreach ($results as $result) {
$name = $result['name'];
if ( ! $out[$name]) {
$out[$result['name']] = array( 'name' => $name, 'data' => array());
}
array_push($out[$name]['data'], array($result['date'], $result['value']));
}
return array_values($out);
}
This also seems to work
function process_results($results) {
return array_values(array_reduce($results, function($acc, $result) {
$name = $result['name'];
if ( ! $acc[$name]) {
$acc[$result['name']] = array( 'name' => $name, 'data' => array());
}
$acc[$name]['data'][] = array($result['date'], $result['value']);
return $acc;
}, []));
}

Resources