Parsing through a GeoJson in D3 - d3.js

I am having difficulty saving the names in a variable or something, found in features.properties.ADMIN as to call them for a tooltip. I wish to save them where it would simply call d.country or something for my tooltip.
d3.json('countries.geojson', function(drawMaps) {
var features = drawMaps.features
var data2;
data2 = drawMaps.parse(function(d) {
return {
country: d.features.properties.ADMIN
};
});
console.log(drawMaps.features[1].properties.ADMIN);
console.log(features[2].properties.ADMIN);
});
Edit 1.
d3.json('countries.geojson', function(drawMaps2) {
for (var j = 0; j < drawMaps2.features.length; j++) {
var jsonCountry = drawMaps2.features[j].properties.ADMIN;
console.log(jsonCountry);
break;
}
console.log(jsonCountry);
console.log(drawMaps2.features[3].properties.ADMIN);
});

Related

Telerik UI Kendo Grid Dirty Markers

I have a razor page that implements a Telerik UI Kendo Grid .I want to use javascript to set / unset the dirty markers for certain fields in the grid when there is an error.
I have searched many forums and google'd the problem and looked at the examples on GitHub, but I cannot get anything to work.
I tried :
`
function onError(e) {
// got any error messages
if (e.errors) {
e.preventDefault();
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
for (var i = 0; i < data.length; i++) {
data[i].dirty = true;
}
grid.refresh();
}
}
I have also tried:
function onError(e) {
// got any error messages
if (e.errors) {
var grid = $("#grid").data("kendoGrid");
var $gridData = grid.dataSource.data();
for (var i = 0; i < $gridData.length; i++) {
var row = grid.tbody.find("tr[data-uid='" + $gridData[i].uid + "']");
var cell = row.find("td:eq(" + $gridData[i].ColumnIndex + ")");
cell.addClass("k-dirty-cell");
$gridData[i].dirty = true;
var foo = "";
}
grid.refresh();
}
}
`
Thank you for your help.

How to trigger the change event of Kendo Jquery Spreadsheet when using custom Paste function?

I tried the below custom paste function to paste only values but it doesn't trigger the change event in order for me to sync the data to the data source.
Dojo Demo Link
...
change: onExcelChange,
paste: function(e) {
e.preventDefault()
var currentRange = e.range;
var fullData = e.clipboardContent.data;
var mergedCells = e.clipboardContent.mergedCells;
var topLeft = currentRange.topLeft();
var initialRow = topLeft.row;
var initialCol = topLeft.col;
var origRef = e.clipboardContent.origRef;
var numberOfRows = origRef.bottomRight.row - origRef.topLeft.row + 1;
var numberOfCols = origRef.bottomRight.col - origRef.topLeft.col + 1;
var spread = e.sender;
var sheet = spread.activeSheet();
var rangeToPaste = sheet.range(initialRow, initialCol, numberOfRows, numberOfCols);
sheet.batch(function() {
for(var i = 0; i < fullData.length; i += 1) {
var currentFullData = fullData[i];
for(var j = 0; j < currentFullData.length; j += 1 ) {
var range = sheet.range(initialRow + i, initialCol + j);
var value = currentFullData[j].value;
if (value !== null) {
range.input(value);
range.format(null);
}
}
}
sheet.select(rangeToPaste);
}, { layout: true, recalc: true });
} ...
I have tried to use recalc: true in sheet.batch to trigger the change to no avail. Any help would be greatly appreciated.
All Kendo widgets inherit from Observable, which has a trigger method:
var obj = new kendo.Observable();
obj.bind("myevent", function(e) {
console.log(e.data); // outputs "data"
});
obj.trigger("myevent", { data: "data" });
You need to manually trigger the Spreadheet's change event with its correct parameters.

SlickGrid filter not working

I am fairly new to SlickGrid. I am trying to make SlickGrid filter work but no luck. I am following the example (http://mleibman.github.io/SlickGrid/examples/example4-model.html).
Below is my source code.
$(document).ready(function() {
var tName;
$('#submit').click(function(e) {
tName = $('#source option:selected').text();// name1
tName = tName.trim();
$.ajax({
url : 'someUrl',
type : 'GET',
cache : false,
success : function(d) {
var grid;
var searchString = "";
var data = [];
var columns = new Array();
var cols = d[0].columns;
var pkColNames = d[0].pkColNames;
for (var j=0; j< cols.length; j++) {
var key = {id: cols[j].colName, name: cols[j].colName, field: cols[j].colName, width: 200, sortable:true, editor: Slick.Editors.LongText};
columns[j] = key;
}
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableColumnReorder:true,
multiColumnSort: false,
autoEdit: false,
autoHeight: false
};
function myFilter(item, args) {
return true;// Let us return true all time ?
}
for (var i = 0; i < d.length; i++) {
var tempData = (data[i] = {});
var title = null;
var val = null;
for (var q = 0; q < d[i].columns.length; q++) {
title = d[i].columns[q].colName;
val = d[i].columns[q].colValue;
tempData[title] = val;
}
}
var dataView = new Slick.Data.DataView({ inlineFilters: true });
grid = new Slick.Grid("#myGrid", dataView, columns, options);
dataView.setPagingOptions({
pageSize: 25
});
var pager = new Slick.Controls.Pager(dataView, grid, $("#myPager"));
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.onAddNewRow.subscribe(function(e, args) {
// Adding a new record is not yet decided.
});
grid.onCellChange.subscribe(function (e) {
var editedCellNo = arguments[1].cell;
var editedColName = grid.getColumns()[editedCellNo].field;
var newUpdatedValue= arguments[1].item[grid.getColumns()[editedCellNo].field];
var editedColType = "";
for (var cnt = 0; cnt < cols.length; cnt++) {
if (editedColName == cols[cnt].colName) {
editedColType = cols[cnt].colType;
break;
}
}
var pkKeyValue="";
for (var v=0; v <pkColNames.length;v++) {
for (var p=0; p<grid.getColumns().length; p++) {
if (pkColNames[v] == grid.getColumns()[p].field) {
var value = arguments[1].item[grid.getColumns()[p].field];
pkKeyValue += "{"+pkColNames[v] + '~' +getColDbType(grid.getColumns()[p].field) + ":"+value+"},";
break;
}
}
}
function getColDbType(colName) {
for (var c = 0; c < cols.length; c++) {
if (colName == cols[c].colName) {
return cols[c].colType;
}
}
}
pkKeyValue = pkKeyValue.substring(0, pkKeyValue.length-1);
$.ajax({
url: 'anotherUrl',
type:'GET',
dataType:'text',
success: function(f) {
bootbox.alert("Data updated successfully");
},
error: function() {
bootbox.alert("Error - updating data. Please ensure you are adding the data in right format.");
grid.invalidateAllRows();
grid.render();
}
});
});
grid.onClick.subscribe(function (e) {
//do-nothing
});
dataView.onRowsChanged.subscribe(function(e, args) {
grid.updateRowCount();
grid.invalidateRows(args.rows);
grid.render();
});
grid.onSort.subscribe(function(e, args) {
// args.multiColumnSort indicates whether or not this is a multi-column sort.
// If it is, args.sortCols will have an array of {sortCol:..., sortAsc:...} objects.
// If not, the sort column and direction will be in args.sortCol & args.sortAsc.
// We'll use a simple comparer function here.
var comparer = function(a, b) {
return a[args.sortCol.field] > b[args.sortCol.field];
}
// Delegate the sorting to DataView.
// This will fire the change events and update the grid.
dataView.sort(comparer, args.sortAsc);
});
// wire up the search textbox to apply the filter to the model
$("#txtSearch").keyup(function (e) {
console.log('Called...txtSearch');
Slick.GlobalEditorLock.cancelCurrentEdit();
// clear on Esc
if (e.which == 27) {
this.value = "";
}
searchString = this.value;
updateFilter();
});
function updateFilter() {
console.log("updateFilter");
dataView.setFilterArgs({
searchString: searchString
});
dataView.refresh();
}
dataView.beginUpdate();
dataView.setItems(data, pkColNames);
dataView.setFilterArgs({
searchString: searchString
});
dataView.setFilter(myFilter);
dataView.endUpdate();
},
error : function() {
bootbox.alert("Invalid user");
}
});
});
});
Your function myFilter() is always returning true so of course it will never work. The example that you looked at, was to filter something specific. I would recommend that you look at the following example to have a generic filter. From the example, simply type the text you are looking on a chosen column and look at the result... see example below (from SlickGrid examples).Using fixed header row for quick filters
In case you want a more in depth conditional filters ( > 10, <> 10, etc...), please take a look at my previous answer on how to make this kind of filtering possible, see my previous answer below:SlickGrid column type
Hope that helps you out

Ignore duplicate date values

I have some data that has duplicate dates in it, but the values will always be the same - how do I count occurrence only once and reflect it on a bar chart?
I'm guessing I need to setup a filter function on grouping, I'm not sure how to go about this.
The data:
var jsonStr = ([
{"date": "2011-11-14", "value": 0.1121},
{"date":"2011-11-25", "value": -0.0231},
{"date":"2011-11-25", "value": -0.0231},
{"date":"2011-11-25", "value": -0.0231}
]);
The code:
//setup dimensions
var dateDimension = ndx.dimension(function (d) {
return d.value;
});
var fluctuation = ndx.dimension(function (d) {
return Math.round(d.value *10)/10;
});
var fluctuationGroup = fluctuation.group();
fiddle: http://jsfiddle.net/wbott70/xtjJn/
This probably isn't the most efficient way to do this, but using a map is simple and short:
var uniqueValues = d3.map([])
jsonStr.forEach(function(d){ uniqueValues.set(d.date, d); });
newJsonStr = []
uniqueValues.forEach(function(d){ newJsonStr.push(uniqueValues.get(d)); });
The result:
[{"date":"2011-11-14","value":0.1121},{"date":"2011-11-25","value":-0.0231}]
The better would probably be to remove the duplicates in the data (if you never need this information), before using the Crossfilter library, using the following code, just after your definition of jsonStr:
var newJson = [];
for (var i = 0; i < jsonStr.length; i++) {
var found = false;
for (var j = 0; j < newJson.length; j++) {
if (jsonStr[i].date === newJson[j].date) {
found = true;
break;
}
}
if (!found) {
newJson.push(jsonStr[i]);
}
}
jsonStr = newJson;

How to do Client side pagination for filtered data

YAHOO.util.Event.addListener("genes", "change", function(e) {
var value = YAHOO.util.Event.getTarget(e).value;
if(YAHOO.lang.isValue(value)) {
myDataTable.getDataSource().sendRequest(null, {
success:function(request, response, payload) {
this.initializeTable();
var rs = response.results;
var filtered = [];
for(var i = 0; i < rs.length; i++) {
//alert(rs[i].gene);
if(rs[i].gene == value) {
filtered[filtered.length] = rs[i];
}
}
this.getRecordSet().setRecords(filtered, 0);
this.render();
},
scope:myDataTable,
argument:null
});
}
});
This is my code to filter the data. i am getting the data perfectly when i change the option for selection.
but the pagination is not working it is showing as '0' even the records are displayed.
can any one plz suggest me.
Thanks!!
You can try this:
dobMenuButton.subscribe("selectedMenuItemChange",function(e) {
var value =e.newValue.value;
if(YAHOO.lang.isValue(value)) {
myDataTable.getDataSource().sendRequest(null, {
success:function(request, response, payload) {
this.initializeTable();
var rs = response.results;
var filtered = [];
for(var i = 0; i < rs.length; i++) {
if(((rs[i].dateOfBirth).format("MM/dd/yyyy")) == value) {
filtered[filtered.length] = rs[i];
}
}
this.getRecordSet().reset();
MCMPagination.paginatorvar.setTotalRecords(filtered.length,true);
this.getRecordSet().setRecords(filtered, 0);
this.render();
},
scope:myDataTable,
argument:myDataTable.getState()
});
}
});

Resources