I want to show hour,minute,second and milliseconds in time column of my jqgrid but millisecond is not showing and while modifing millisecond field showing wrong data.
This is my used code:
{
text: 'Time', filterable: false, datafield: 'Time', width: '120px',
cellsFormat: "HH:mm:ss.fff",
createfilterwidget: function (column, columnElement, logReportSearchGrid){
$(logReportSearchGrid).jqxDateTimeInput({
formatString: 'MM/dd/yyyy',
dropDownHorizontalAlignment: 'right'
});
}
}
Related
My requirement is to show an event with time interval. When I try to use this code it seems not working properly. May be I am wrong at timezone selection but not getting exactly what need to do. Please help.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-02-12',
defaultView: 'agendaWeek',
editable: false,
eventLimit: true, // allow "more" link when too many events
timeFormat: 'h:mm a',
//timezone: "local",
events: [
{
title: 'Meeting',
start: '2016-02-09T13:00:00-00:00',
end: '2016-02-09T14:00:00-00:00'
}
]
});
I'm using highcharts to display data for over a period of one month so it it could be displaying anywhere form 1 data point to 31 data points (I'm using the jQuery Datepicker widget to select dates). My problem is with the x-Axis. When viewing between 2 and 7 data points the x-axis is automatically trying to adjust itself which works fine the more data points are being rendered but when there are less as previously mentioned there are problems.
I have captured some screenshots showing my perdicament as well as created a JSFiddle. I do have a specific size that I need to fit the chart in and I have used the same size in the JSfiddle.
What I would like ideally is for the x-axis to start on the first of the month (or at the lest NOT start on the end of the previous month) and avoid overlapping issues. I'm hoping it's a setting that I'm overlooking that controls how highcharts "automatically" calculates what is displayed on the x-axis and it's interval. I know there is a tick-interval setting but I've not had any luck with that in my situation.
Image: http://i.imgur.com/p0bQg6U.png
JSFiddle: http://jsfiddle.net/engemasa/sgKcB/
Here is the highcharts code:
$('.chart').highcharts({
chart: {
type: 'column'
},
xAxis: {
labels: {
enabled: true,
formatter: function() {
return Highcharts.dateFormat("%b %e, '%y", this.value);
}
}
},
title: {
text: null
},
tooltip: {
formatter: function() {
var date = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b><br />';
return date + this.y;
}
},
yAxis: {
labels: {
enabled: true
}
},
credits: {
enabled: false
}
});
Assistance is greatly appreciated!
Solution seems to be datetime xAxis and dateTimeLabelFormats option for Highcharts. For example: http://jsfiddle.net/sgKcB/26
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: "%b %e, '%y",
week: "%b %e, '%y"
}
},
You can use tickPositioner parameter, which allows your own function. You can calculate and return correct order of your ticks.
http://api.highcharts.com/highstock#xAxis.tickPositioner
i binded by jqgrid with json returned from ajax. json has date in following format
11/1/2013 12:00:00 AM
in the colmodel i have specified the following
{ name: 'datecol', index: 'SignDate', width: '200', jsonmap: 'cell.SignDate', editable: true, sorttype: 'date',
editable: true, formatter: 'date', formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'Y-M-d'
},
editoptions: { dataInit: initDateEdit },
initDateEdit = function(elem) {
setTimeout(function() {
$(elem).datepicker({
formatter: 'date', formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'yy-M-d'
}
autoSize: true,
showOn: 'button', // it dosn't work in searching dialog
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
//$(elem).focus();
},100);
}
This displays the date correctly in the grid as
2013-Nov-01
but when i hit addnew record, the popup comes and when i select the date and hit submit, in the grid, the new record is showing
NaN-undefined-NaN
in the date column. what is wrong here?
when I use the same code as given in this link
http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm
edit works fine, but when i add new row, the date comes as NaN-undefined-NaN
please help.
I think that the reason of the problem which you described is wrong parameters of jQuery UI Datepicker which you use. You use formatter and formatoptions parameters of datepicker which not exists. Instead of that you should use dateFormat option which format described here.
UPDATED: The main reason of the problem which you describe is wrong date format which you use. It's important to understand that srcformat and newformat of formatoptions should have PHP date format, but jQuery UI Datepicker supports another format which described here for example. The input data 11/1/2013 12:00:00 AM contains both date and time. On the other side jQuery UI Datepicker support date only. Because you use newformat: 'yy-M-d' then I suppose that you want just ignore the time part of the date. In the case I would suggest you to use
formatter: 'date',
formatoptions: {
srcformat: 'm/d/Y',
newformat: 'Y-m-d'
}
instead of
formatter: 'date',
formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'Y-m-d'
}
which you use currently. Next problem is the dateFormat option of jQuery UI Datepicker. You have to use format which corresponds srcformat, but which uses correct format (described here). In case of srcformat: 'm/d/Y' you should use dateFormat: 'm/d/yy' instead of dateFormat: 'yy-m-dd' which you use in your jsfiddle demo.
The modified demo works now correctly.
I am using highstock chart for displaying the stock chart.when charts gets loaded by default i am showing 6M button selected.
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1min'
}, {
type: 'day',
count: 5,
text: '10min'
}, {
type: 'month',
count: 6,
text: '6M'
},
{
type: 'year',
count: 3,
text: '3yr'
}, {
type: 'year',
count: 10,
text: '10yr'
}
],
inputEnabled: false,
selected: 2
},
The chart contains lot of data points.So when i tap to another spot on the series, the time period above loses the "boldness". Hence i no longer know what was the time period i had selected.
If the chart contains only 3 buttons then its working fine. If more buttons then the button is disable.
Can you tell me how to enable the selected button always when i tap on series of highstock chart?
Thanks in Advance.
I opened this example http://www.highcharts.com/stock/demo/basic-line/gray and click on the buttons, and bold doesn't disappear. Which version of HS do you use? Could you prepare your example as live demo?
I need to load columns to Jqgrid Dynamically and am trying to follow jqGrid and dynamic column binding
Am trying in MVC. for Column name am fetching from Table(Which has a list of Columns to be displayed in GRID) and returning the Json data which is straightforward.
How do i implement for ColModel. For ex: i need to send JSon object like this dynamically
{name: 'Airport', formatter: UrlFmatter, width: 95, align: "center", index: 'AIRPORT', searchoptions: { sopt: ['eq', 'ne', 'cn']} }
{name: 'Country', width: 100, align: "center", index: 'Country', searchoptions: { sopt: ['eq', 'ne', 'cn']} }
How my design should be to send json to set the colModel ?
My UrlFmatter code
function UrlFmatter(cellvalue, options, rowObject) {
return "<a href='DetailResult?airportname=" + options.rowId + "' >" + cellvalue + "</a>";
}
How do i write as per your answer for formatting and unformatting ?
Thanks
I suppose that you have the problem with sending information about the formatter (formatter: UrlFmatter) inside of JSON. JSON strings don't support functions as the type of data. The most easy way to solve the problem seems me registering your formatter in the same way as standard formatters. For example is you want that your formatter have the name "myUrlFormatter" you can use the following
(function ($) {
'use strict';
/*jslint unparam: true */
$.extend($.fn.fmatter, {
myUrlFormatter: function (cellValue, options) {
// you should place here the code of
// your custom formatter UrlFmatter
}
});
$.extend($.fn.fmatter.myUrlFormatter, {
unformat: function (cellValue, options, elem) {
// you should place here the code of
// your custom unformatter
}
});
}(jQuery));
You should include the code after jquery.jqGrid.min.js (or after jquery.jqGrid.src.js). After such registration of the formatter you can use it in colModel as
{name: "Airport", index: "AIRPORT", formatter: "myUrlFormatter", width: 95,
align: "center", searchoptions: { sopt: ["eq", "ne", "cn"]} }
So the value of formatter property will be string (formatter: "myUrlFormatter") instead of the function (formatter: UrlFmatter).