I am trying to get the datetime values and aggregated
response time from hana database to a bar chart.
I have done the aggregation in .xsodata file as :
{
service namespace "excercise.services" {
"ABC"."XYZ" as "sample" key generate local "Key"
aggregates always(SUM of "respti" ) ;
}
}
I am getting aggregated response time values but it is not
getting synchronized with the respective date values .
Please help me on getting the correct values.
Here is the view.js file:
{
var oModel = sap.ui.model.odata.ODataModel('.xsodata/', false);
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: 'Time Instance',
value: {
path: "ts",
formatter: function(fValue) {
jQuery.sap.require("sap.ui.core.format.DateFormat");
var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance();
return oDateFormat.format(new Date(fValue));
}
},
},
],
measures: [{
name: 'Response Time',
value: '{respti}'
}],
data: {
path: "/sample",
filters: [
new sap.ui.model.Filter("inst", sap.ui.model.FilterOperator.EQ, "instance")
],
parameters: {
select: 'ts,respti'
},
}
});
}
you may want to try
dimensions: [{
axis: 1,
name: 'Time Instance',
value: {
path: "ts",
formatter: function(fValue) {
if(fValue){
jQuery.sap.require("sap.ui.core.format.DateFormat");
var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance();
return oDateFormat.format(new Date(fValue));
} else {
return fValue;
}
}
},
}],
what is the format of respti, you may want to format that also, using a D3 formatter maybe simplest way
Related
I'm using echarts to plot my data. Then I have two data which has different time(which is X axis),and I want to plot them in one picture. But I found that echart's data just can be a array,So this two data's value will not plot right as their real time.
So my questions is that can echarts use a dictionary data?which use time as key.Then the two data will plot at right time.
try using the type 'time' on xAxis. See also the new way to pass data to the chart using dataset:
var myChart = echarts.init(document.getElementById('main'));
// format with arrays:
var source = [
['2019-08-28T07:01:00+02:00', 127.7],
['2019-08-28T07:02:00+02:00', 148.0],
['2019-08-28T07:03:00+02:00', 1180.4],
['2019-08-28T07:04:00+02:00', 117.9]
]
// format with objects:
// var source = [
// { datetime: '2019-08-28T07:01:00+02:00', value: 127.7 },
// { datetime: '2019-08-28T07:02:00+02:00', value: 148.0 },
// { datetime: '2019-08-28T07:03:00+02:00', value: 1180.4 },
// { datetime: '2019-08-28T07:04:00+02:00', value: 117.9 }
// ];
option = {
dataset: {
dimensions: ['datetime', 'value'],
source: source
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value'
},
series: [{
name: 'series1',
type: 'line',
}]
}
myChart.setOption(option);
I have a KendoGrid like below and when I run the application, I'm not getting the expected format for date column.
$("#empGrid").kendoGrid({
dataSource: {
data: empModel.Value,
pageSize: 10
},
columns: [
{
field: "Name",
width: 90,
title: "Name"
},
{
field: "DOJ",
width: 90,
title: "DOJ",
type: "date",
format:"{0:MM-dd-yyyy}"
}
]
});
When I run this, I'm getting "2013-07-02T00:00:00Z" in DOJ column. Why it is not formatting? Any idea?
I found this piece of information and got it to work correctly. The data given to me was in string format so I needed to parse the string using kendo.parseDate before formatting it with kendo.toString.
columns: [
{
field: "FirstName",
title: "FIRST NAME"
},
{
field: "LastName",
title: "LAST NAME"
},
{
field: "DateOfBirth",
title: "DATE OF BIRTH",
template: "#= kendo.toString(kendo.parseDate(DateOfBirth, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
},
...
References:
format-date-in-grid
jsfiddle
kendo ui date formatting
just need putting the datatype of the column in the datasource
dataSource: {
data: empModel.Value,
pageSize: 10,
schema: {
model: {
fields: {
DOJ: { type: "date" }
}
}
}
}
and then your statement column:
columns: [
{
field: "Name",
width: 90,
title: "Name"
},
{
field: "DOJ",
width: 90,
title: "DOJ",
type: "date",
format:"{0:MM-dd-yyyy}"
}
]
This is how you do it using ASP.NET:
add .Format("{0:dd/MM/yyyy HH:mm:ss}");
#(Html.Kendo().Grid<AlphaStatic.Domain.ViewModels.AttributeHistoryViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.AttributeName);
columns.Bound(c => c.UpdatedDate).Format("{0:dd/MM/yyyy HH:mm:ss}");
})
.HtmlAttributes(new { #class = ".big-grid" })
.Resizable(x => x.Columns(true))
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(c => c.Id);
})
.Read(read => read.Action("Read_AttributeHistory", "Attribute", new { attributeId = attributeId })))
)
Try formatting the date in the kendo grid as:
columns.Bound(x => x.LastUpdateDate).ClientTemplate("#= kendo.toString(LastUpdateDate, \"MM/dd/yyyy hh:mm tt\") #");
The option I use is as follows:
columns.Bound(p => p.OrderDate).Format("{0:d}").ClientTemplate("#=formatDate(OrderDate)#");
function formatDate(OrderDate) {
var formatedOrderDate = kendo.format("{0:d}", OrderDate);
return formatedOrderDate;
}
As far as I'm aware in order to format a date value you have to handle it in parameterMap,
$('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '#Url.Action("_ListMy", "Placement")',
data: refreshGridParams,
type: 'POST'
},
parameterMap: function (options, operation) {
if (operation != "read") {
var d = new Date(options.StartDate);
options.StartDate = kendo.toString(new Date(d), "dd/MM/yyyy");
return options;
}
else { return options; }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
StartDate: { type: 'date', format: 'dd/MM/yyyy' },
Area: { type: 'string' },
Length: { type: 'string' },
Display: { type: 'string' },
Status: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
columns:
[
{
field: 'StartDate',
title: 'Start Date',
format: '{0:dd/MM/yyyy}',
width: 100
},
If you follow the above example and just renames objects like 'StartDate' then it should work (ignore 'data: refreshGridParams,')
For further details check out below link or just search for kendo grid parameterMap ans see what others have done.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap
This might be helpful:
columns.Bound(date=> date.START_DATE).Title("Start Date").Format("{0:MM dd, yyyy}");
I am having trouble with a date field being displayed in a Extjs grid. I am using php to do the query and return my data in json format. The database is SQL Server. The date is coming back in the json file as:
"TERMDATE":{"date":"2013-02-13 00:00:00","timezone_type":3,"timezone":"America/New_York"}
this is just the date field, there are other fields in the row and they all display properly.
I just want to display the date, should I be doing something in my php file or is there a way to pull the date out of what is being sent. The date field displays as [object Object] when the grid is refreshed.
Here is my SQL Statement:
SELECT CPK_USERS, FNAME, LNAME, STATUS, DEPARTMENT, Email, PHONE1, CellPhone, Work_Ext, HIREDATE, SUPERVISOR, TERMDATE FROM USERS where DELFLAG = 0 and CPK_USERS > 0 order by FNAME
Here is the first record returned in json format:
{"succuss":true,"data":[{"CPK_USERS":153,"FNAME":"Aaron","LNAME":"Booth","STATUS":"Out","DEPARTMENT":"Customer Support","Email":"aaron.booth#xxxxx.com","PHONE1":"2134354709","CellPhone":"6357662738","Work_Ext":"550","HIREDATE":{"date":"2008-06-09 00:00:00","timezone_type":3,"timezone":"America\/New_York"},"SUPERVISOR":"","TERMDATE":{"date":"2013-02-13 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},
My model:
Ext.define('DHS.model.dhsusers.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'CPK_USERS' },
{ name: 'FNAME' },
{ name: 'LNAME' },
{ name: 'STATUS' },
{ name: 'DEPARTMENT' },
{ name: 'Email' },
{ name: 'PHONE1' },
{ name: 'CellPhone' },
{ name: 'Work_Ext' },
{ name: 'HIREDATE' },
{ name: 'SUPERVISOR' },
{ name: 'TERMDATE' }
]
});
My View:
Ext.define('DHS.view.dhsusers.UserInfoList', {
extend: 'Ext.grid.Panel',
alias: 'widget.userinfolist',
frame: true,
store: Ext.create('DHS.store.dhsusers.UserInfo'),
columns:[
{text:"CPK_Users", dataIndex:'CPK_USERS', flex:1, hidden: true, hideable: false},
{text:"First Name", dataIndex:'FNAME', flex:1},
{text:"Last Name", dataIndex:'LNAME', flex:1},
{text:"Term Date", dataIndex:'TERMDATE', flex:1, type:'datecolumn'},
{text:"Email", dataIndex:'Email', flex:1},
{text:"Home Phone", dataIndex:'PHONE1', flex:1},
{text:"Cell", dataIndex:'CellPhone', flex:1},
{text:"Work Ext", dataIndex:'Work_Ext', flex:1}
]
});
I gues you are using TERMDATE as grid column, if you use TERMDATE.date(teorically) you will get riht display. but if you share extjs codes that will be better.
I have put together a simple jsfiddle demonstrating the issue. It has a grid with two records. One has a true value in in the Boolean column and the other has a false.
I have logged the data to the console so you can see the values that the grid is getting.
Yet the grid shows false for both rows.
http://jsfiddle.net/codeowl/KhBMT/
Thanks for your time,
Scott
Code for StackOverflow:
var _Data = [
{ "SL_TestData_ID": "1", "SL_TestData_String": "Bool is 1", "SL_TestData_Boolean": "1" },
{ "SL_TestData_ID": "2", "SL_TestData_String": "Bool is 0", "SL_TestData_Boolean": "0" }
];
var _kendoDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
console.log('Transport READ Event Raised - Data: ', JSON.stringify(_Data, null, 4));
options.success(_Data);
}
},
schema: {
model: {
id: "SL_TestData_ID",
fields: {
SL_TestData_ID: { editable: false, nullable: false },
SL_TestData_String: { type: "string" },
SL_TestData_Boolean: { type: "boolean" }
}
}
},
error: function (a) {
$('#TestGrid').data("kendoGrid").cancelChanges();
}
});
// Initialize Grid
$("#TestGrid").kendoGrid({
columns: [
{ field: "SL_TestData_ID", title: "ID" },
{ field: "SL_TestData_String", title: "String" },
{ field: "SL_TestData_Boolean", title: "Boolean" }
],
dataSource: _kendoDataSource
});
I found that if I altered my select statement to return "TRUE"/"FALSE" for my TINYINT column in the database it worked. Eg;
SELECT
SL_TestData_ID,
SL_TestData_Number,
SL_TestData_String,
SL_TestData_Date,
SL_TestData_DateTime,
if (SL_TestData_Boolean = 1, "TRUE", "FALSE") as SL_TestData_Boolean
FROM
SL_TestData;
Regards,
Scott
Situation:
kendo DataSource
var ordersDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "http://localhost/odata.svc/Orders?$expand=OrderDetails"
}
},
schema: {
type: "json",
data: function(response){
return response.value;
}
total: function(response){
return response['odata.count'];
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: true
})
the json data read from the odata source is like:
{
odata.metadata: "xxxx",
odata.count: "5",
value: [
{
OrderId: 1,
OrderedDate: "2013-02-20",
OrderInfoA: "Info A",
OrderInfoB: "Info B"
OrderDetails: [
{
OrderDetailId: 6,
OrderDetailInfoC: "Info C",
OrderDetailInfoD: "Info D"
},
{
//Another OrderDetail's data
}
]
},
{
// Another Order's data
}
]
}
Question 1:
1.If I wanna define a "computed" property: OrderedDateRelative, which should be the number of days between Today(2013-02-25) and the Day the Order was Created(2013-02-20), Like: "5 days ago", HOW can i achieve this in the client side?
Answer to Question1: http://jsbin.com/ojomul/7/edit
Question 2 --UPDATE--
2.Every Order has its Nested Property OrderDetails, so is it possible to define a Calculated Field for the Nested OrderDetails Property? Like: OrderDetailInfoCAndD for each OrderDetail, and the value should be something like: OrderDetailInfoC + OrderDetailInfoD, which is "Info C Info D"?
Thanks,
dean
You can create a calculated field by specifying the model of the data source:
dataSource = new kendo.data.DataSource({
data: [
{ first: "John", last: "Doe" },
{ first: "Jane", last: "Doe" }
],
schema: {
model: {
// Calculated field
fullName: function() {
return this.get("first") + " " + this.get("last");
}
}
}
});
Here is a live demo: http://jsbin.com/ojomul/1/edit
Here is a way to use calculated field in Kendo Grid.
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
}
},
pageSize: 20,
schema: {
model: {
total: function (item) {
return this.UnitPrice * this.UnitsInStock;
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
sortable: true,
filterable: true,
toolbar: ["create"],
columns: [
{ field: "UnitPrice", title: "Unit Price"},
{ field: "UnitsInStock", title: "Units In Stock", width: "120px" },
{ field: "total()", title: "Total" }]
});
Below an example to use it in a grid. It can then also sort the column.
$("#grid").kendoGrid({
dataSource: {
data: [
{ first: "John", last: "Doe" },
{ first: "Jane", last: "Doe" }
],
schema: {
model: {
// Calculated field
fullName: function() {
return this.first + " " + this.last;
},
fields: {
first: { type: "string" },
last: { type: "string" }
}
}
}
},
columns: [
{
// Trigger function of the Calculated field
field: "fullName()",
title: "Fullname"
},
{
field: "first",
title: "firstname"
}
]
});