I've got the code for Highcharts in combination with Thingspeak from here:
https://forum.arduino.cc/index.php?topic=213058.0
My problem is, I am not able to implement the different suffix into the code :-(. I've tried a lot, but I dont understand the mechanism behind the Java code.
I've tried some things, but result is, I only have one datafield for the first series but not for the other series...
Formatter function is on line 246.
My different yAxies on line 286.
How can formatter decide which yAxies do actual series use?
Maybe somebody have fun to help me?
http://jsfiddle.net/cbmj8rku/
Best regards, David
Each series is assigned to one yAxis. You can detect which series uses which axis for example by axis title:
tooltip: {
formatter: function() {
var points = this.points,
title,
result = '';
Highcharts.each(points, function(p) {
result += p.y;
title = p.series.yAxis.axisTitle.textStr;
if (title === 'yAxis1') {
result += 'suffix1<br>'
} else if (title === 'yAxis1') {
result += 'suffix2<br>'
} else {
result += 'suffix2<br>'
}
});
return result
}
}
Live demo: http://jsfiddle.net/BlackLabel/ncvtxoke/
I changed the code like this:
http://jsfiddle.net/cbmj8rku/20/
formatter: function() {
var d = new Date(this.x + (myOffset*60000));
var _Min = (d.getMinutes()<10) ? '0' + d.getMinutes() : d.getMinutes();
var _Sec = (d.getSeconds()<10) ? '0' + d.getSeconds() : d.getSeconds();
var s = d.getHours() + ':' + _Min + ':' + _Sec + '<br/>';
$.each(this.points, function () {
s += '<br/>' + this.series.name + ' <b>' + this.y + this.series.yAxis.userOptions.labels.suffix + '</b>';this.series.tooltipOptions.valueSuffix[this.point.index];
});
return s;
}
I need to format numbers in a column with white space as thousand separator and with two decimal places. For example: 125895456.8942 -> 125 895 456.89
columns: [
{
field: "sumStartDebit",
title: "Debit",
width: "130px",
template: function (dataItem) {
if (dataItem.sumStartDebit == 0) { return "" }
else if (dataItem.sumStartDebit < 0) { return "<span style='color:red'>" + dataItem.sumStartDebit + "</span>" }
else { return "<span>" + dataItem.sumStartDebit + "</span>" }
},
locked: true,
},
]
What can i achieve it w/o culture? I have a function that works for thousand separator but not for my condition of two decimal places
function numberWithSpaces(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
What about this:
function numberWithSpaces(x) {
return kendo.toString(x, "##,#.##").replace(/,/g, " ")
}
You format your string with the usual decimal seperator in your culture (in this case "," for en-US) and then replace that with a whitespace using regex.
For "12345678.0394" you would get "12 345 678.04"
You could inline this inside your template as well:
template: '#= kendo.toString(sumStartDebit, "##,#.##").replace(/,/g, " ")#'
I have a View page with loops that create inputs. These inputs are manipulated through CoffeeScript when the blur signal is triggered. I would like to wait that the ruby loop generates all of my inputs and then launch my script. It works when using the inputs but it doesn't at the initialization.
$(document).ready ->
$('body').on 'blur', 'input', ->
arr = [
'nb_kms'
'parkings'
'trains'
'taxis'
'metros'
'meals'
'hotels'
'amounts'
'o_ns'
'clients'
]
name = $(this).attr('name').slice(0, -2)
if jQuery.inArray(name, arr) != -1
total = 0
$('input[name=\'' + $(this).attr('name') + '\']').each ->
total += parseInt($(this).val())
return
$('#' + name + 'Total').text total
return
$('input[name=\'' + $(this).attr('name') + '\']').first().trigger 'blur'
return
The last line triggers the blur signal but nothing is detected. Why?
Assuming that you posted the exact indentation from your coffeescript file, then you need to be indenting your $('body').on 'blur', 'input', -> handler underneath the $(document).ready -> line. This will make sure the handler isn't defined until the document is fully loaded. Also, you need to then indent the body of your handler as well:
$(document).ready ->
$('body').on 'blur', 'input', ->
arr = [
'nb_kms'
'parkings'
'trains'
'taxis'
'metros'
'meals'
'hotels'
'amounts'
'o_ns'
'clients'
]
name = $(this).attr('name').slice(0, -2)
# etc...
Found the solution:
arr = [
'nb_kms'
'parkings'
'trains'
'taxis'
'metros'
'meals'
'hotels'
'amounts'
'o_ns'
'clients'
]
$(document).ready ->
$('body').on 'blur', 'input', ->
name = $(this).attr('name').slice(0, -2)
if jQuery.inArray(name, arr) != -1
total = 0
$('input[name=\'' + $(this).attr('name') + '\']').each ->
total += parseInt($(this).val())
return
$('#' + name + 'Total').text total
return
alert name + '[]'
$('input[name=\'' + name + '[]\']').first().trigger 'blur'
return
$(document).ready ->
$.each arr, (index, value) ->
$('input[name=\'' + value + '[]\']').first().trigger 'blur'
return
return
I had to put my trigger call in a second $(document).ready. I don't know why it wasn't working inside the first one.
I am sorry for the indentation, I don't know how to make it properly like CoffeeScript (pasting the code breaks the indentation).
I have a easyUI datagrid with several rows and I want to insert these rows into a database table.How can I do this.
NB:am using datagrid not editable datagrid.
Hi I have one solution like that you need, first you must store the data into String or Array and after send this to your script that save this into Database, check this code.
/* Array to store datagrid records /*
var facturas = {
lineas:[]
};
linea_facturas="";
//Armado del arreglo JSON a enviar
rows = $('#dg').datagrid('getRows'); // get all rows of Datagrid
for(var i=0; i<rows.length; i++){
var renglon = rows[i];
facturas.lineas.push({
"id_header" : $("#idheader").val() ,
"fecha_cr" : $('#dd').datebox('getValue') ,
"contrato" : renglon.id_contrato ,
"factura" : renglon.id_factura ,
"importe" : renglon.importe ,
"iva" : renglon.iva ,
"total" : renglon.total
});
linea_facturas =
linea_facturas +
$("#idheader").val() + "," +
$('#dd').datebox('getValue')+ ","+
renglon.id_contrato + "," +
renglon.id_factura + "," +
renglon.importe + "," +
renglon.iva + "," +
renglon.total + "&" ;
}
//var jsonText = JSON.stringify(facturas); //Convierte un valor de JavaScript en una cadena de la notación de objetos JavaScript (JSON).
//$.messager.alert('Info',linea_facturas);
//window.console.log(linea_facturas);
$.ajax({
type: "POST",
url: "Lector?action=SAVEDETAILS",
data: {registros :linea_facturas},
dataType: "json",
success: function(jsondata){
//$.messager.alert("Almacenado de detalles exitoso y se insertaron " + jsondata.detalle + " registros");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
},
complete: function() { EnviaDatos(2); }
});
URL in POST must be your program that save the data, you must parse the data in the server side
So in a current app, I have to use a custom Formatter on a couple rows in my jqGrid. All these do is take a few fields from my ajax call, concat them into one, and place that into a row.
EG ( data.toStreet + data.toCity + data.toState + data.toZip ) comes back as "Street City, State Zip" into the "To Address" column. This works fine and the data displays correctly, but when using the filtering toolbar, the filter is only based on the first val (data.street). below is a super simplified version of the pieces of code in question.
$('#grid').jqGrid({
...
colNames:["AddressTo", "AddressFrom"],
colModel:[
{name:"toStreet" formatter: ToAddressFormatter},
{name:"fromStreet" formatter: FromAddressFormatter}
],
...
}),
$('#grid').jqGrid('filterToolbar',
{
stringResult:true,
searchOnenter: true,
defaultSearch: 'cn'
}
});
ToAddressFormatter = function(el, opt, rowObj){
var address = rowObj.toStreet+ " " + rowObj.toCity + ", " + rowObj.toState + " " + rowObj.toZip;
return address;
},
FromAddressFormatter = function(el, opt, rowObj){
var address = rowObj.fromStreet+ " " + rowObj.fromCity + ", " + rowObj.fromState + " " + rowObj.fromZip;
return address;
}
So if the value in the cel says "123 fake st, springfield, Va 22344" after being formatted, the filter toolbar can only search on "123 fake st" and nothing else.
Does anybody have any clue on how to remedy this, or possibly why it's happening and a good workaround??
EDIT:
I have included the beginning of my grid. Also, the property Address of result.d is created in the code below, and not returned from the webservice. My column is mapped to "Address" which displays the formatting properly, but still does not search as intended.
$('#grdDisasters').jqGrid({
datatype: function(postdata) {
var obj = { "showActive": $('#btnFilterActive.pressed').length > 0 ? true : false, "showInactive": $('#btnFilterActive.pressed').length > 0 ? true : false,
'page': postdata.page, 'rows': postdata.rows, 'sortIndex': postdata.sidx, 'sortDirection': postdata.sord, 'search': postdata._search,
'filters': postdata.filters || ''
};
$.ajax({
url: "/GetGrid",
data: JSON.stringify(obj),
success: function(result) {
for (var i = 0, il = result.d.rows.length; i < il; i++) {
LoadedDisasters[i] = result.d.rows[i];
result.d.rows[i].cells.Address = result.d.rows[i].cells.Street + " " + result.d.rows[i].cells.City + ", "+ result.d.rows[i].cells.State+ " "+ result.d.rows[i].cells.Zip;
}
result.d = NET.format(result.d);//just correctly format dates
UpdateJQGridData($('#grdDisasters'), result.d);
},
error: function(result) {
//alert("Test failed");
}
});
jqGrid has a problem filtering rows when data is formatted using custom/predefined formatter.
You will have to filter rows on the server-side.
Add 2 more request parameter in your controller to handle jqgrid search request:
When jqGrid requests for filtered raws it will add a parameter: _search with value: true
and all the search parameter like col1=abc&col4=123 meaning user wanted to filter using column named col1 and column named col4 with values respectively: abc and 123
Use those values and query the database with like operation something as follows:
select id, concat(street1, street2, city, state, zip) as address
where address like "%abc%" and id like "%123%"
return these rows as json to jqGrid and display those in the current page. So basically you will have to have a jqGrid with server-side paging, sorting and searching. You can not use client-side paging, sorting and searching features. Also, make sure you don't have loadonce: true set.
I think that you fill the grid in the wrong way. If your source data has toStreet, toCity, toState, toZip, fromStreet, fromCity, fromState, fromZip properties and you need to have composed addressTo and addressFrom you should do this in another way. Your problem is that toStreet and fromStreet will be saved locally in the internal data parameter in the original format like you get it from the server. The local searching uses the data parameter, so the toStreet and fromStreet like you get there from the server will be used.
You don't posted more full code of jqGrid which you use. So I suppose that you use datatype: 'json', datatype: 'jsonp' or datatype: 'xml' in combination with loadonce: true. You should define colModel
$('#grid').jqGrid({
...
colNames:["AddressTo", "AddressFrom"],
colModel:[
{name: "addressTo", ...},
{name: "addressFrom", ...}
],
beforeProcessing: function (data) {
var i, rows = data.rows, l = rows.length, item;
for (i = 0; i < l; i++) {
item = rows[i];
item.addressTo = item.toStreet + " " + item.toCity + ", " +
item.toState + " " + item.toZip;
item.addressFrom = item.fromStreet+ " " + item.fromCity + ", " +
item.fromState + " " + item.fromZip;
}
}
...
});
The exact code depend on the format of the input data. The advantage of the usage of beforeProcessing is that it will be called before the data will be processed by jqGrid. So you can do any modification in the data or like in the above.
UPDATED: The code of datatype can be easy implemented in another way using standard jqGrid options. So I suggest to use the following settings:
datatype: "json",
url: "/GetGrid",
postData: {
// add and to the list of parameters sent to the web service
showActive: function () {
return $('#btnFilterActive.pressed').length > 0;
},
showInactive: function () {
return $('#btnFilterActive.pressed').length > 0;
}
},
prmNames: {
// rename some parameters sent to the web service
sort: "sortIndex",
order: "sortDirection",
search: "search",
// don't send nd parameter to the server
nd: null
// you leave the nd is you don't set any "Cache-Control" HTTP header
// I would recommend you to set "Cache-Control: private, max-age=0"
// For example
// HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0));
},
serializeGridData: function (postData) {
// control modification of the the data (parameters) which will be sent
// to the web method
if (typeof postData.filters === "undefined") {
postData.filters = "";
}
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json" },
jsonReader: {
root: "d.rows",
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.rows.length; },
repeatitems: false
},
loadError: function (jqXHR, textStatus, errorThrown) {
// see an implementation example in the answers
// https://stackoverflow.com/a/6969114/315935
// and
// https://stackoverflow.com/a/5501644/315935
},
colNames:["AddressTo", "AddressFrom"],
colModel:[
{name: "addressTo", ...},
{name: "addressFrom", ...}
],
beforeProcessing: function (data) {
var i, rows, l, item;
data.d = NET.format(data.d); // just correctly format dates
rows = data.d.rows;
l = rows.length;
for (i = 0; i < l; i++) {
item = rows[i];
LoadedDisasters[i] = item;
item.addressTo = item.toStreet + " " + item.toCity + ", " +
item.toState + " " + item.toZip;
item.addressFrom = item.fromStreet+ " " + item.fromCity + ", " +
item.fromState + " " + item.fromZip;
}
}
...
The usage of nd: null with setting of "Cache-Control: private, max-age=0" I described in the answer. You can download the corresponding demo project which use this. In general one needs just include one additional line where you call SetMaxAge
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public MyGridData GetGrid(...) {
HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0));
...
}
See more about caching control you can read here.