I have a javascript chart built with "highcharts" and I would display data from database in the chart.
I need to display data for each day of the week. I'm using laravel so I can use Carbon, but I don't know how.
Here is my view:
<div id="container"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Actions statistics'
},
xAxis: {
categories: ['01', '02', '03', '04', '05', '06', '07'] // days of the week
},
yAxis: {
title: {
text: 'Actions'
}
},
series: [{
name: 'Submitted actions',
data: [monday rows, tuesday rows, wednesday rows, thursday rows, friday rows, saturday rows, sunday rows]
// data can be retrieved from database where them are stored with "created at" column.
// Something like Actionshistory::where('created_at', first day of the week)?
}
]
});
});
</script>
How can I do this ?
Thanks
Solved
I solved using this in the javascript:
series: [{
name: 'Actions submitted',
data: [<?php echo Actionshistory::whereRaw('WEEKDAY(created_at) = 0')->count() ?>,and so go on]
}
0=Monday, 1=Tuesday,ecc...
Thanks to all.
Related
Sorry for the english ...
I got a chart with custom data grouping.
When I click to change the zoom, the new data are displayed over the previous one (which aren't deleted) :-(
rangeSelector : {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
selected: 2
},
I found a fiddle with this problem :
http://jsfiddle.net/tqyyqmzs/12/
Month data are displayed.
Click on "Day" or "week" and you will see that month data sill be on the graph :-(
P.S : One or two month ago, this code works.
And now .... don't and I really don't understand why.
Did someone see the problem ?
Regards
David
Got the same problem on my website :
https://www.bdpv.fr/en/ficheUtilisateur.php?util=boyardgo
Click on panel "Production"
Then click on zoom "Mois".
Same behaviour, data for mois stay ...
I have dynamic JQGrid in which one of the column is Date column. I get the data from feeds which has the URL and Date.
I need to develop column model for "Date column" in such a way that it shows the Date and Hyper link. But unfortunately the data get displayed as NAN/NAN/NAN (This could be because it is treating the entire string - <a>...</a> as date rather than "20/8/2016"). Can any one please let me know how can I display the Date here in correct text rather than NAN??
Note: I Should even make sure that Sorting of the date is maintained
Sample Code Snippet that is working - When there is no Anchor tag & not working - when there is a Anchor tag. However irrespective of anchor tag this works always when the column modal is of type text - in other words this happens only for date column and not for other columns.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = [{ 'Date': "<a href=https://google.com target=_blank style=text-decoration:underline;>20/8/2016</a>" },
{ 'Date': "<a href=https://google.com target=_blank style=text-decoration:underline;>21/8/2016</a>" },
{ 'Date': "<a href=https://google.com target=_blank style=text-decoration:underline;>22/8/2016</a>" },
{ 'Date': "2016-08-09T06:11:14.907Z" }, { 'Date': "2016-08-10T06:11:14.907Z" }
]
$("#grid").jqGrid({
datatype: 'jsonstring',
datastr: data,
colNames: ["Date"],
colModel: [{ name: 'Date', sorttype: 'date', formatter: 'date', formatoptions: {newformat:'n/j/Y'} }]
});
});
</script>
</head>
<body>
<table id="grid"></table>
</body>
</html>
jqgrid afterinsertrow use
var data = [{ 'Date': "20/8/2016" },
{ 'Date': "20/8/2016" },
{ 'Date': "20/8/2016" },
{ 'Date': "2016-08-09T06:11:14.907Z" },
{ 'Date': "2016-08-10T06:11:14.907Z" }
]
$("#grid").jqGrid({
datatype: 'jsonstring',
datastr: data,
colNames: ["Date"],
colModel: [{ name: 'Date', sorttype: 'date', formatter: 'date', formatoptions: {newformat:'n/j/Y'} }],
**afterInsertRow : function(rowid, aData){
if(rowid == 1){
$("#grid").jqGrid('setCell' ,rowid, 'Date', "<a href=https://google.com target=_blank style=text-decoration:underline;>"+aData.Date+"</a>", {});
}
}**
});
colModel: [{ name: 'Date', sorttype: 'date',
formatter:function(cellvalue, options, rowObject) {
var dt=new Date(cellvalue);
if(dt=='Invalid Date')return cellvalue;//chrome
var y=dt.getFullYear();
var m=dt.getMonth()+1<10?'0'+(dt.getMonth()+1):dt.getMonth()+1;
var d=dt.getDate()<10:'0'+dt.getDate():dt.getDate();
return y+'-'+m+'-'+d;
}
}]
I'm evaluating the Kendo UI Gantt chart to see if it fits our project requirements.
One particular requirement is to display a status column which would be a drop down in edit mode and has three statuses
Red 2. Green 3. Yellow, along with an image indicator something like what is shown in the image below
I am able to achieve the above effect when i edit a cell after using a custom editor for the drop down
function statusDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Status",
dataValueField: "StatusId",
valueTemplate: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>',
template: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>',
dataSource: {
transport: {
read: function (e) {
// on success
e.success([{ Status: 'Not Started', StatusId: '0', Url: 'Image/red.png' }, { Status: 'Red', StatusId: '1', Url: 'Image/red.png' }, { Status: 'Green', StatusId: '2', Url: 'Image/red.png' }, { Status: 'Yellow', StatusId: '3', Url: 'Image/red.png' }]);
// on failure
//e.error("XHR response", "status code", "error message");
}
}
}
})
}
The Gantt Column for Status looks like the below snippet
{ field: "status", title: "Status", editable: true, width: 150, editor: statusDropDownEditor, template: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>' }
However when done with selecting a particular item from drop down and on exiting the edit mode this is how the cell looks like
Seems like the default cell template in read only mode does not render html and the invokes the toString of the object bound to the cell, is there a way to fix this in the kendo UI Gantt
I have been trying to solve the same issue today and it looks like gantt columns do not support the template properties.
I have created a new feature suggestion on the Kendo user feedback site. If enough people vote for it maybe they will implement this.
The only work around I found was to prepend an image tag onto the field column like this. But this solution is not conditional.
<div id="gantt"></div>
<script>
$(document).ready(function() {
var gantt = $("#gantt").kendoGantt({
dataSource: [
{
id: 1,
title: "apples",
orderId: 0,
parentId: null,
start: new Date("2015/1/17"),
end: new Date("2015/10/17"),
summary:false,
expanded:false
},
{
id: 2,
orderId: 1,
parentId: null,
title: "banana",
start: new Date("2015/1/17"),
end: new Date("2015/3/17"),
summary:false,
expanded:true
}
],
views: [
{ type: "year", selected: true }
],
columns: [
{ field: "title", title: "fruit", width: 220 },
{ field: "start", title: "start", width: 80 }
],
}).data("kendoGantt");
$(".k-grid-content tbody[role='rowgroup'] tr[role='row'] td:first-child").prepend("<img href='#' alt='image here'></img>");
});
</script>
The sample page is on git.
I use plugin Ext.ux.form.DateTimeField for Extjs and standart Ext.form.field.Date to edit defferent cells in grid according to special parameters in other column. Here is an example:
var myOwnGrid = {
xtype: 'gridpanel',
store: myOwnStore,
...
columns: [
{xtype: 'gridcolumn',
dataIndex: 'mainParamValues',
text: 'MyValues',
...
getEditor: function(record){
switch(record.raw.mainParamNames){ //accourding to value from other column
case "date":
return Ext.create('Ext.grid.CellEditor', {
field: Ext.create('Ext.form.field.Date', {
value: record.raw.mainParamValues,
format: 'Ymd',
altFormats: 'Ymd',
emptyText: "Empty field!"
})
});
}
}
}]
}
When I press on cell and edit, it has correct format for me (20141212 for example). After I press enter or produce other action to save this value, it is automatically formated to "Fri Dec 12 2014 00:00:00 GMT+0300 (MSK)". I have to use these data after editing of full form, so I need 'Ymd' format. Any ideas how to fix such behaviour?
You do not specify default renderer for this field type
{
xtype: 'gridcolumn',
dataIndex: 'mainParamValues',
text: 'MyValues',
...
renderer: Ext.Function.bind(renderCell, this)
}
...
function renderCell(val, meta, rec, rowIndex, colIndex) {
var mainParamNames = 'date'; // your code by record
switch (mainParamNames) {
case "date":
return Ext.util.Format.date(val, 'Y.m.d');
}
}
Fiddle
I'm trying to allow rows to be selected via checkboxes and for those selected rows and their IDs to be sent to another grid when a 'Submit' button is clicked. In other words, acting as some sort of filter.
I've contacted Telerik's support team and was advised to take the following steps in order to get it working:
Get the selected rows with the Select() method of the Grid
Loop through them & get the underlying item with the dataItem method
Save them into an array
Destroy the grid
Initialize a new grid by setting the data data
Here's a sample on JSBin that shows what I have in mind.
I'm not sure where to start honestly. I would really appreciate it if someone could point me in the right direction to any resources or guides that would be helpful. Thanks!
Assuming you are using RadGrid, make sure you have client side selection turned on, you would see something like this:
<ClientSettings>
<Selecting AllowRowSelect="True" />
<ClientEvents OnRowSelected="RowSelected" />
</ClientSettings>
On the input button, make sure to call your JS method as follows :
<input onclick="GetSelected();" .... >
Your JS code might look something like this :
function GetSelected() {
var grid = $find("<%=Your Grid's ClientID Here%>");
var MasterTable = grid.get_masterTableView();
var selectedRows = MasterTable.get_selectedItems(); // 1. Get the selected rows. The selected item can be accessed by calling the get_selectedItems() method of the GridTableView client-side object.
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
// This is where you would have to insert it in a collection so that you can bind it to another grid... You will need to call .Rebind() once you assign the new datasource to the other grid.
}
Hopefully this will give you some idea.. I can see if I can find any examples on inserting rows into other grid if you get stuck.
check this code
html
<div id="grid1"></div>
<input type="button" value="Submit" onclick="Move()" />
<div id="grid2" ></div>
script
<script>
$(document).ready(function() {
var data1 = [
{ id: 1, rating: 3, year: 1997, title: "Rock" }
, { id: 2, rating: 5, year: 1999, title: "X-Man" }
, { id: 3, rating: 4, year: 2011, title: "World War Z" }
];
var grid1=$("#grid1").kendoGrid({
sortable: true
, silectable: true
, selectable: "multiple row"
, filterable: true
, pageable: true
, columns: [
{ template: "<input type='checkbox' class='checkbox' />", width: "40px" }
,{ field: "id", title: "Id", filterable: false }
, { field: "rating", title: "Rating", filterable: false }
, { field: "year", title: "Year", filterable: true, type: "string"}
, { field: "title", title: "Title" }
]
, dataSource: { page: 1,
pageSize: 5,
data: data1
}
}).data("kendoGrid");
grid1.table.on("click", ".checkbox", selectRow);
var data2 = [
{ id: 101, rating: 6, year: 2012, title: "The Impossible" }
, { id: 102, rating: 8, year: 2013, title: "Escape" }
, { id: 103, rating: 7, year: 2013, title: "Gravity" }
];
$("#grid2").kendoGrid({
sortable: true
, silectable: true
, selectable: "multiple row"
, filterable: true
, pageable: true
, columns: [
{ field: "id", title: "Id", filterable: false }
, { field: "rating", title: "Rating", filterable: false }
, { field: "year", title: "Year", filterable: true, type: "string"}
, { field: "title", title: "Title" }
]
, dataSource: { page: 1,
pageSize: 5,
data: data2
}
});
});
function Move() {
var grid1 = $("#grid1").data("kendoGrid");
var rows = grid1.select();
rows.each(function(index, row) {
var selectedRow = grid1.dataItem(row);
//-move to grid2
var grid2 = $("#grid2").data("kendoGrid");
var ins = { id: selectedRow.id, rating: selectedRow.rating, year: selectedRow.year, title: selectedRow.title }; //id=1,rating=9.2,year=1995,title="The Godfather"
grid2.dataSource.insert(ins);
});
rows.each(function() {
grid1.removeRow($(this).closest('tr'));
});
}
function selectRow() {
var checked = this.checked,
row = $(this).closest("tr");
if (checked) {
//-select the row
row.addClass("k-state-selected");
} else {
//-remove selection
row.removeClass("k-state-selected");
}
}
</script>
this will help you :)