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 have been trying to change the locale of formatInputTooShort.
In order to find the correct select2.js file (as I have several versions of the select2-rails gem) I inputed the command RAILS_ENV=production bundle exec gem list select2-rails. Then I did RAILS_ENV=production bundle exec gem env to find where the gem's are installed.
So I changed the correct (I think) select2.js file, restarted my unicorn server but the locale did not change on the minimumInputLength. It still says "Please enter 1 or more character" instead of my custom message.
Any clue what I might be doing wrong?
Note: I use english.
You can override the text by overriding the function by doing the following:
$(#my_selector).select2({
minimumInputLength: 1,
formatInputLength: function(){
return "Enter the text you want"
}
});
$(#my_selector).select2({
minimumInputLength: 1,
formatNoMatches: function () { return "No se encontraron resultados"; },
formatInputTooShort: function (input, min) {
var n = min - input.length; return "Por favor, introduzca " + n + " nombre";
},
formatInputTooLong: function (input, max) {
var n = input.length - max;
return "Por favor, elimine " + n + " car" + (n == 1? "á" : "a") + "cter" + (n == 1? "" : "es");
},
formatSelectionTooBig: function (limit) {
return "Sólo puede seleccionar " + limit + " elemento" + (limit == 1 ? "" : "s");
},
formatLoadMore: function (pageNumber) {
return "Cargando más resultados...";
},
formatSearching: function () {
return "Buscando...";
}
});
I'm using ASP MVC and KendoUI. Data are sent in json format. I'm getting ModelState error from KendoUI grid update where the according to debugger the ModelState ErrorMessage - "The value '/Date(1361499139623)/' is not valid for FirstAvailableDate."
Here's the print screen of my firebug POST
How to resolve this? I'm currently doing ModelState.Clear(); ...sad...
Most probably the project is missing the "kendo.aspnetmvc.min.js" script.
I ended up formating the date using javascript before posting it back to ASP MVC Controller.
Here's my javascript:
function toISOString(d) {
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
return year + '-' + month + '-' + date;
}
function toMVCDateTime(d) {
return d.getUTCFullYear() + '-' + padzero(d.getUTCMonth() + 1) + '-' + padzero(d.getUTCDate()) + 'T' + padzero(d.getUTCHours()) + ':' + padzero(d.getUTCMinutes()) + ':' + padzero(d.getUTCSeconds()) + '.' + pad2zeros(d.getUTCMilliseconds()) + 'Z';
}
$.ajax({
url: "TimeSheet/GetWeeklyHistoricalTimeSheets",
type: "POST",
//data: { date: utcDate.toISOString() },
data: { date: toISOString(utcDate)},
success: function (response) {
htmlFactory(response);
}
});
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.
I currently have a filter working on a fusion table rendered as a Map Layer, and I want to zoom to best fit all of the data whenever the filter is changed.
I figure I need to wait until the query is applied and then iterate through the markers to find the min/max x & y locations and pan to that rectangle, but I don't see a way in the Maps api to access the markers of a layer.
Anyone have an idea how to do this?
The short answer is no. To me this is one of the shortcomings of dealing with Fusion Tables via the Maps API. E.g. wanting to display a count of the results of my most recent query. But there is a work-around through the "undocumented" JSONP API to Fusion Tables. I've had great success using it but I must credit Robin Kraft with informing me about this API.
http://www.reddmetrics.com/2011/08/10/fusion-tables-javascript-query-maps.html.
Here's some code which allows you to re-execute your most recent query via an AJAX JSONP request and do what you want with the results, such as calculating the bounding-box. Note: this example uses Jquery for the AJAX JSONP calls. This example creates a <table> display but can be modified as needed.
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
// Example call
getFTData(tableid, 'latitude,longitude', example_dataHandler);
<script>
// Globals same for all requests
var queryUrlHead = 'https://fusiontables.googleusercontent.com/fusiontables/api/query?sql=';
var queryUrlTail = '&jsonCallback=?'; // ? could be a function name
// getFTData()
// table_id - Fusion Table id MUST have public permissions
// col_list - comma separated list of FT column names
// successFunction - function to parse the CSV results (see exampleParser below)
//////////////////////////////
function getFTData(table_id, col_list, successFunction) {
var query = "SELECT " + col_list + " FROM " + table_id;
var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);
$.ajax({
type: "GET",
url: queryurl,
dataType: "jsonp", // return CSV FustionTable response as JSON
success: successFunction,
error: function () {alert("AJAX ERROR for " + queryurl ); }
});
}
function example_dataHandler(d) {
// get the actual data out of the JSON object
var cols = d.table.cols;
var rows = d.table.rows;
var row_count = 0;
var results = '<table border="1" cellpadding="4">';
results += '<tr>';
for (var i = 0; i < cols.length; i++) {
results += '<th>' + cols[i] + '</th>';
}
results += '</tr>';
// loop through all rows to add them to the map
for (var i = 0; i < rows.length; i++) {
// Per the expected columns
results += '<tr>';
for(j=0; j < rows[i].length; j++)
{
results += '<td>' + rows[i][j] + '</td>';
}
results += '</tr>';
row_count++;
}
results += '</table>';
results += '<br />';
results += 'Row Count: ' + row_count + '<br />';;
document.getElementById("program_select").innerHTML = results;
}
</script>
Since retrieving the count of recent Fusion Table rows returned is common, I'm adding a snippet of how to do that.
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var tableid = 3167783
var where = "WHERE type = 9";
getFTCount(current_table_id, where, displayCount);
// Globals same for all request
var queryUrlHead = 'https://fusiontables.googleusercontent.com/fusiontables/api/query?sql=';
var queryUrlTail = '&jsonCallback=?'; // ? could be a function name
///////////////////////////////
// Get Counts from Fusion Tables.
// table_id required
// where optional "WHERE column == 'value' " where clause for count()
// successFunction callback required
///////////////////////////////
function getFTCount(table_id, where, successFunction) {
if(!table_id){
alert("table_id required.");
return;
}
if(!successFunction){
alert("successFunction callback required.");
return;
}
var query = "SELECT count() FROM " + table_id;
if(where){
query += ' ' + where;
}
var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);
$.ajax({
type: "GET",
url: queryurl,
dataType: "jsonp", // return CSV FustionTable response as JSON
success: successFunction,
error: function () {alert("AJAX ERROR for " + queryurl ); }
});
}
function displayCount(d) {
var count = d.table.rows[0];
alert(count);
}
</script>
If your data is in a fusion table, then use the fusion table's sql api to find the Max/Min val for Lat and Lng respectively:
https://www.googleapis.com/fusiontables/v1/query?sql=SELECT
MINIMUM(Lat) AS MinLat, MAXIMUM(Lat) AS MaxLat,
MINIMUM(Long) AS MinLong, MAXIMUM(Long) AS MaxLong
FROM <table_id>
See here for full details on api: https://developers.google.com/fusiontables/docs/v1/sql-reference. (One thing to remember is to ecodeURI this sql statement)
This returns those for value to json array. And as I'm sure your aware, use these values to set your map's 'center' and 'zoom' parameters.