I would like to know if it is possible to use datatables (Metronic Laravel Theme) to display a 6*4 grid of user-images instead of displaying the images row-by-row (the standard datatable behavior). Anyone able to help?
ive just started on this so i don't want to waste a lot of time if it's not possible at all, this is what i have so far:
let members_datatable,
members_element = $('...');
members_datatable = members_element.MyCustomDataTable({
columns: [
{
field: 'id',
title: members_element.data('column-id'),
width: 50,
template: function (row) {
return row.id;
}
},
{
field: 'first_name',
title: members_element.data('column-name'),
width: 150,
template: function (row) {
let user_id = ...;
let user_company = ...;
let company_branche = ...;
return `<div class="mt-card-item">
<div class="mt-card-avatar mt-overlay-4">
<img src="storage/public/userImages/${user_id}.jpg">
<div class="mt-overlay">
<h2>${user_company}</h2>
<div class="mt-info font-white">
<div class="mt-card-content">
${company_branche}
</div>
</div>
</div>
</div>
</div>`;
}
},
],
});
Related
I have a chart where I need to calculate the amount I'm earning as time goes by. In this chart, I have the amount (red line). My target is to calculate the total of every transaction that is going in. My current code is not working properly because when the time is 18:26:23 it is 1000 amount when it is 18:26:24, it is still 1000... It should be 2000. It should solve for the sum over time. I have provided my codes below and a screenshot of my current system and my target. Thank you in advance.
Views:
<div class="col-md-12">
<!-- LINE CHART -->
<div class="card card">
<div class="card-header">
<h3 class="card-title">Stats Per Day</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" style="width:30%;">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<div id="wholechart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></div>
</div>
</div>
<!-- /.card-body -->
</div>
</div>
Ajax:
function sampleeesasw(){
$.ajax({
type: 'post',
url: '<?=site_url('report/datas')?>',
dataType:'json',
success: function(result) {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function(){drawChart(result);});
function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'req');
data.addColumn('number', 'total');
data.addColumn('number', 'amount');
var dataArray =[];
$.each(result,function(i,obj){
dataArray.push([obj.req,parseInt(obj.total),parseInt(obj.amount)]);
});
data.addRows(dataArray );
var options = {
seriesType: "line",
};
var chart = new google.visualization.ComboChart(document.getElementById('wholechart')).
// Line,Bar,Area,Clomun,pie
draw(data, {curveType: "function",
vAxes: {0: {logScale: false},
1: {logScale: false, maxValue: 2}},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1},
2:{targetAxisIndex:1}}}
);
}
}
});
}
setInterval(function(){
sampleeesasw()
},1000);
Controller:
public function datas(){
$data= $this->reports->wholedatachart();
foreach($data as $row){
$data['req']=$row['req'];
$data['amount']=$row['amount'];
$data['total']=$row['total'];
}
echo json_encode($data);
}
Model:
function wholedatachart(){
$query=$this->db->query("SELECT timeProcess as 'req', transID as 'total', amount as 'amount' FROM tbl_transaction");
return $query->result_array();
}
You can do calculation part inside your drawChart function. Inside that function you can simply total value of amount then , save it in some variable and pass it to your dataArray.push(..).
Demo Code :
//suppose data look like this..
var result = [{
"req": "1",
"amount": 2000,
"total": 1000
},{
"req": "2",
"amount": 1000,
"total": 1000
},{
"req": "3",
"amount": 1000,
"total": 1000
}]
function sampleeesasw() {
/*$.ajax({
type: 'post',
url: '',
dataType: 'json',
success: function(result) {*/
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function() {
drawChart(result);
});
function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'req');
data.addColumn('number', 'total');
data.addColumn('number', 'amount');
var dataArray = [];
var total=0 //intialze..
$.each(result, function(i, obj) {
total +=parseInt(obj.amount)//add on each iteration
dataArray.push([obj.req, parseInt(obj.total), parseInt(total)]); //add value here ..
});
data.addRows(dataArray);
var options = {
seriesType: "line",
};
var chart = new google.visualization.ComboChart(document.getElementById('wholechart')).draw(data, {
curveType: "function",
vAxes: {
0: {
logScale: false
},
1: {
logScale: false,
maxValue: 2
}
},
series: {
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1
},
2: {
targetAxisIndex: 1
}
}
});
}
/* }
});*/
}
setInterval(function() {
sampleeesasw()
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="col-md-12">
<!-- LINE CHART -->
<div class="card card">
<div class="card-header">
<h3 class="card-title">Stats Per Day</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" style="width:30%;">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<div id="wholechart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></div>
</div>
</div>
<!-- /.card-body -->
</div>
</div>
I think you can try this one, you need to increment the amount of each data, you can use a temporary variable and increment all the amount.
I edited the answer sorry my bad.
change your controller to
public function datas(){
$data= $this->reports->wholedatachart();
$tempAmount = 0;
foreach($data as $row){
$tempAmount = $tempAmount + $row['amount'];
$output[]=array(
'req' => $timeline['time'],
'amount' => $tempAmount,
'amount' => $row['amount'],
);
}
echo json_encode($output);
}
if you want to add the total also you can do the same thing
As you see in picture: https://imgur.com/kDBu95D column that has 0 data is higher than column with value of 1 and 2. And y axis starting reverse, 0 is on the top instead on bottom. This happened when I use laravel eloquent.
Here is my code:
#extends('layouts.app')
#section('content')
<div class="container">
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['User', 'Added'],
#if ($users)
#foreach ($users as $user)
['{{$user->name}}', '{{$user->members->count()}}'],
#endforeach
#endif
]);
var options = {
chart: {
title: 'Users',
},
vAxis: {
format: 'decimal',
},
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
<div id="columnchart_material" style="width: 'auto'; height: 500px;"></div>
</div>
#endsection
I tried to add this:
vAxis: { minValue: 0 },
and this:
vAxis: { direction: -1, },
but nothing helps...
looks like the values for the y-axis are strings instead of numbers...
remove the single quotes from the second array value...
change --> ['{{$user->name}}', '{{$user->members->count()}}'],
to --> ['{{$user->name}}', {{$user->members->count()}}],
i have improve my code using highchart. I'm using plotoption to echo variabel just like in http://jsfiddle.net/gF8Cf/3/ .
Here is my highchart code :
plotOptions: {
series:
{
cursor: 'pointer',
point: {
events: {
click: function box() {
var week = this.category;
$("#dialog").dialog({
title: "Detail Data",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
},
And for the next, i set the dialog box by :
<div id="dialog" style="display: none">
<div style="margin-left: 35px; font-size:12px;">
IT IS WEEK :
<?php
box();
echo $week
?>
</div>
</div>
I want to show data this.category when the dialog-pop-up-box opened.
The problem is, did i set the wrong code for $week ?
$(function(){
var week = '<?php $week ?>';
});
Try to load the week variable on window load.
Need a code example of repaint() method for dxList widget in Phonejs
NB: I want to call repaint() after a user action such as click.
Use the "repaint" method in the following manner:
<!--TRIGGER-->
<div data-bind="dxButton: { text: 'repaint dxList', clickAction: onClick }"></div>
<!--TARGET LIST-->
<div id="targetList" data-bind="dxList: { width: 100, dataSource: [{ key: 1, title: 'element_1'}, { key: 2, title: 'element_2' }, { key: 3, title: 'element_3' }] }">
<div data-bind="dxAction: '#itemDetailsViewName/{key}'" data-options="dxTemplate : { name: 'item' } ">
<div data-bind="text: title"></div>
</div>
</div>
onClick: function () {
var list = $("#targetList").dxList("instance");
list.option('width', 200);
list.repaint();
}
I need help using a Kendo UI list view which lives within a grid row detail template.
here is something I have done so far.
<div id="grid">
</div>
<script type="text/x-kendo-template" id="gridDetailTemplate">
<div class='grid-edit'>
<div class='edit-list'></div>
</div>
</script>
<script type="text/x-kendo-template" id="editItemtemplate">
<div class='edit-Item'>
#if(Type=='string'){#
<ul><li><b>#:Name#</b></li><li><input class='inputString' value='#:DataVal()#'/></li></ul>
#}else if(Type=='number'){#
<ul><li><b>#:Name#</b></li><li><input class='inputNumber' data-role='numerictextbox' data-type='number' value='#:DataVal()#'/></li></ul>
#}else if(Type=='date'){#
<ul><li><b>#:Name#</b></li><li><input class='inputDate' data-role='datepicker' value='#:kendo.toString(DataVal(),'MM/dd/yyyy')#'/></li></ul>
#}else if(Type=='boolean'){Name #<input type='checkbox'/>
#}#
</div>
</script>
<script type="text/javascript">
$(document).ready(function () {
$.get("http://localhost:4916/DataAttribute", function (data, status) {
var selFields = new Object();
$.each(data, function (index, elem) {
selFields[elem.Name] = new Object();
selFields[elem.Name]["type"] = elem.Type;
});
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: "http://localhost:4916/Deal",
dataType: "json"
}
},
schema: {
data: "Data", total: "Total",
model: {
fields: selFields
}
}
},
height: 430,
filterable: true,
sortable: true,
pageable: false,
detailTemplate: kendo.template($("#gridDetailTemplate").html()),
detailInit: detailInit,
columns: [{
field: "SecurityName",
title: "Security Name",
width: 250
},
{
field: "DateOfAcquisition",
title: "Date Of Acquisition",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "Acres",
title: "Acres",
width: 120
}
]
});
});
});
function detailInit(e) {
$.get("http://localhost:4916/DataAttribute", function (data, status) {
var detailRow = e.detailRow;
detailRow.find(".edit-list").kendoListView({
dataSource: {
data: data,
schema: {
model: {
DataVal: function () {
switch (this.get("Type")) {
case "number"
}
if (e.data[this.get("Name")])
return e.data[this.get("Name")];
else
return '';
}
}
}
},
template: kendo.template($("#editItemtemplate").html())
});
});
}
</script>
My code gets dynamic field list and binds it to the data source for grid.
Then, in the detailInit event, I find the div within row detail and convert it into kendo UI list, for which the template have been created.
Now, when I use data-bind="value: DataVal()" ,it doesn't pick up the values of List data source. It works the way I have done i.e. value="#: DataVal() #". But, data-role does not convert the fields to specified types which are datepicker and numericinput in my case.
I believe that data-role not being used is caused due to same issue as data-bind not being read.
Can anyone help me out with this? Also, feel free to suggest any alternate ways and general code improvements. I am an ASP.NET developer and usually don't work on pure html and javascript.
PS: I would be happy to provide the context on what I am trying to achieve here if anyone is interested.
Thanks in advance.
If you can rig up a jsFiddle or jsBin example that would help debug the issue.
However, try removing the parenthesis:
data-bind="value: DataVal"
Kendo should detect that DataVal is a function and call it on its own.
I experienced a similar situation in a listview template. I created a JSFiddle to demonstrate:
http://jsfiddle.net/zacharydl/7L3SL/
Oddly, the solution is to wrap the contents of the template in a div. It looks like your template already has this, so YMMV.
<div id="example">
<div data-role="listview" data-template="template" data-bind="source: array"></div>
</div>
<script type="text/x-kendo-template" id="template">
<!--<div>-->
<div>method 1: #:field#</div>
<div>method 2: <span data-bind="text: field"></span></div>
<input data-role="datepicker" />
<!--</div>-->
</script>
var model = kendo.observable({
array: [
{ field: 'A'},
{ field: 'B'}
]
});
kendo.bind($('#example'), model);