I Have a JSON Data which I fetched from the database using Mysql.
The JSON is given Below :
[
{
"Country":"Australia",
"persons":"5"
},
{
"Country":"Spain",
"persons":"2"
},
{
"Country":"India",
"persons":"8"
},
{
"Country":"Mexico",
"persons":"4"
},
{
"Country":"United States",
"persons":"4"
}
]
What I Want is that, How Can I Color the Specific region in the Jvector Map also showing the no. of Counts that I am having.
Related
I am new to KTDatatable in Metronic.
I am trying to use server side pagination in Metronic dashboard, and I am parsing the data in a KTDatatable, but I can't find a way to parse the returned data from the API and to view number of pages and each page URL.
The code that I was able to write so far is:
data: {
type: 'remote',
source: {
read: {
url: dataURL,
method: 'GET',
contentType: 'application/json',
map: function(data) {
var cards = data.cards.data;
var currentPage = data.cards.current_page;
var lastPage = data.cards.last_page;
return cards;
}
},
},
pageSize: 10,
serverPaging: true,
},
In this code I was able to get the first ten records but:
1- I wasn't able to parse them the way I want in the table.
2- I wasn't able to show the pages number nor calling the API for the second page or the (x) page I want.
These are the things I want to do.
Thanks in advance.
You can go back to the end of the KT-Datatable documentation to find most of answers you want KT-Datable documentation, but I am gonna explain more hoping it will be more clear.
So the returned value from the API (Json) should look have two main objects meta and data, and it looks something like this:
{
"meta": {
"sort": "desc",
"field": "IssueName",
"page": 1,
"pages": 2,
"perpage": "10",
"total": 11
},
"data": [
{
"IssueName": "******",
"CardNumber": "******"
},
{
"IssueName": "******",
"CardNumber": "******"
}
]
}
And after getting the values of the response from the API you should only return the data object to be parsed by the datatable so the map function should look something like this:
map: function(data) {
return data.data;
}
and it will process the meta data itself.
To parse the data into the columns you should use the same key name of the data in column definition array, so in my example I used it like this:
columns: [
{
field: 'IssueName',
title: columnsTitles.issue,
type: 'string',
},
{
field: 'CardNumber',
title: columnsTitles.card_number,
type: 'string',
},
]
And every time the datatable calls the API it will send more data that will help you give the right response, the data will be on a shape of an array (The field name should be the same as the key):
[
"pagination" => array:4 [
"page" => "1"
"pages" => "2"
"perpage" => "10"
"total" => "11"
],
"sort" => array:2 [
"field" => "IssueName"
"sort" => "desc"
],
]
The sent data is related with the pagination and sorting type you have to get from the API, and you can also add filters and they will be stored in the array in the "query" field, and you can handle them in the backend.
I need to store the data in Redis in the following structure.
{
"userId":1,
"latitude":44.24,
"longitude":-100.24,
"items": [
{
"name":"Rollerball Pen",
"attributes":[
{"Weight":"10 grams"},
{"Manufacturer":"Luxor"}
]
},
{
"name":"Measuring Tape"
}
]
},
{
"userId":2,
"items": [
{
"name":"Laptop",
"attributes":[
{"Brand":"DELL"}
]
},
{
"name":"Scissor"
}
]
},
{
"userId":3,
"latitude":47.24,
"longitude":-102.37
},
{
"userId":4
}
The key is the user id, probably like this:
"user:" + userId.toString()
Note that following are optional:
a. Latitude and Longitude
b. array of items
c. array of attributes (in items)
I have tried to sum up every possible use case using the 4 different user ids.
How can I store and access this kind of data in Redis, kindly help me out. The language that I am using is JavaScript.
So I am using pg-promise to insert multiple geojson MultiPolygons into a postgis database. The insertion into the database work fine, but for some of the row in the database I get a strange behaviour, that is the cell is filled with two lines. The first line some load message and the second line is the actual geom object which more strangely is converted right from geojson to postgis geom.
function createBorder(pathToJSON, table) {
fs.readFile(pathToJSON,
{encoding: 'UTF-8'},
(err, data) => {
let geoJSON = JSON.parse(data);
geoJSON.features.forEach(f => {
f.geometry.crs = {
type: 'name',
properties: {
name: 'EPSG:4326'
}
}
db.none('INSERT INTO nyc_borders(geom)\
VALUES (ST_GeomFromGeoJSON(${geoJSON}))', {
geoJSON: f.geometry
})
.then((d) => {
console.log(f.geometry);
})
.catch(error => {
console.log("ERROR: ", error);
})
});
});
}
createBorder('./data/community_districts.geojson');
I shortend the geoJSON output, it is basically the community district borders from nyc downloaded from the opendata portal
Geojson:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"shape_leng": "51549.5578986",
"boro_cd": "311",
"shape_area": "103177785.347"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-73.97348373564797,
40.61137106069874
],
[
-73.97303089190211,
40.6090051063008
],
[
-73.97299433938896,
40.60881414180224
]
]
]
]
}
},
{
"type": "Feature",
"properties": {
"shape_leng": "65821.875617",
"boro_cd": "313",
"shape_area": "88195686.2688"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-73.96720294103956,
40.573326317397424
],
[
-73.96738975478877,
40.573258999904446
],
[
-73.9674356779313,
40.57320896967127
],
[
-73.96736390080571,
40.57304456895217
],
[
-73.98372152615246,
40.59582107821707
]
]
]
]
}
}
]
}
Some pictures from my database:
database table with rows that have two lines inside one cell
one cell expanded to see the actual tow lines better
So I am really stuck because I do not have an idea how to start debuging, singe the insertion does work some how and also the conversion of the geojson object looks fine. I actually can not figure out who is causing this wrong behaviour.
You can have full control over how pg-promise formats data, by using Custom Type Formatting.
For example, if you have an array[][2] (points as shown), you can convert them like this:
const toGeometry = g => ({ /* g = array[][2] (points) */
rawType: true,
toPostgres: a => {
const points = a.map(p => pgp.as.format('$1 $2', p));
return 'ST_GeomFromText(\'LINESTRING(' + points.join() + ')\')';
}
});
And then you can pass in toGeometry(f.geometry) to apply your custom formatting.
See also: ST_GeomFromText.
I found the solution for my problem the two lines displayed in the pictures that confused me where only information added by datagrip to tell me that the huge polygons where not loaded fully.
I had a look into the same rows with psql:
SELECT ST_ASGEOJSON(geom) FROM <tablename> WHERE id=<myid>
and there the second line would not show up.
Then I realised it is just additional information.
I'm attempting to create a stacked bar chart with Dimple.JS and D3. However, the JSON file I wish to use with this particular visualization involves nested JSON objects (below). The stacked bar chart I wish to create has the channel category as its x-axis, with the y axis to be the aggregate count of the different locations (with each location as a 'stack'). Here is the original data:
[{
"channel": "politics",
"locations":
[{
"name":"usa",
"count" : 1454
},
{
"name":"mexico",
"count":3543
},
{
"name":"antarctica",
"count":4352
}]
},
{
"channel": "economics",
"locations":
[{
"name":"usa",
"count" : 12431
},
{
"name":"mexico",
"count":314
},
{
"name":"china",
"count":2321
}]
}]
I've flattened the above into the JSON below, but I am having trouble using Dimple's .addSeries() method to create the stack.
[
{
"channel": "politics",
"locations[0].name": "usa",
"locations[0].count": 1454,
"locations[1].name": "mexico",
"locations[1].count": 3543,
"locations[2].name": "antarctica",
"locations[2].count": 4352
},
{
"channel": "economics",
"locations[0].name": "usa",
"locations[0].count": 12431,
"locations[1].name": "mexico",
"locations[1].count": 314,
"locations[2].name": "china",
"locations[2].count": 2321
}
]
My question is this: how can Dimple support either this data encoded in this particular JSON file? Most samples use CSV and TSV files, but I unfortunately have the limit of using only JSON files.
Dimple can't use nested data. You'll have to flatten it on the client side so there's a single JSON object for each intersection of channel/location. Here's an example of how to do that with Underscore.js :
var chartData = _.chain(data)
.map(function(row, index){
// for each original row, return a new row for each location
return _.map(row.locations, function(location){
return {
'channel' : row.channel,
'name' : location.name,
'count' : location.count
};
});
})
.flatten()
.value();
(For every row in the original data set, it will return three rows, one for each location. This will return an array of nested arrays, so it calls flatten to make the whole array 1 level deep.)
Here's a jsBin showing that in action : http://jsbin.com/nuvihu/edit?html,js,output
(output):
If this helps, here is what the data ended up looking like :
[{"channel":"politics","name":"usa","count":1454},{"channel":"politics","name":"mexico","count":3543},{"channel":"politics","name":"antarctica","count":4352},{"channel":"economics","name":"usa","count":12431},{"channel":"economics","name":"mexico","count":314},{"channel":"economics","name":"china","count":2321}]
I'm having a radial graph showing two levels of nodes. On clicking a node it is possible to add a sub graph with calling the sum() function. Everything works fine except setting individual color for the newly added edges.
Does anybody have ever tried to load sub graphs with individual edge colors or have a hint what I'm doing wrong?
Here I'm getting and adding the sub graph:
subtree = getSubtree(node.id);
//perform animation.
subtree.success(function(data){
rg.op.sum(data, {
type: 'fade:seq',
fps: 40,
duration: 1000,
hideLabels: false,
});
});
I've checked also the loaded data but for me it seems to be totally equal. I've also loaded the same data into the initial graph instead of the sub graph and then it was colored correct. Nevertheless here is some test data which is the result of the function getSubtree (the id "placeholder" matches the id of the existing where the sub graph should be added):
{
"id": "placeholder1",
"name": "country",
"children": [{
"id": "2_3mSV~_scat_1",
"name": "hyponym",
"children": [{
"children": [],
"adjacencies": {
"nodeTo": "2_3mSV~_scat_1",
"data": {
"$color": "#29A22D"
}
},
"data": {
"$color": "#29A22D"
},
"id": "3_58z3q_sc_174_6",
"name": "location"
}],
"data": {
"$type": "star",
"$color": "#666666"
},
"adjacencies": [{
"nodeTo": "3_58z3q_sc_174_6",
"data": {
"$color": "#29A22D"
}
}]
}]
}
I finally found the problem in the framework itself...
When calling the construct function inside the call of sum() which is actually adding the subtree then the data object containing information about the adjacence's individual visualization is not used for adding the new adjacence. Therefore I changed the code manually (this for loop is the new version of the existing for loop inside the construct() function):
for(var i=0, ch = json.children; i<ch.length; i++) {
//CUSTOM CODE: GET DATA OF THIS ADJACENCE
data = null;
if(ch[i].adjacencies[0]==undefined){
data = ch[i].adjacencies.data;
}
else{
data = ch[i].adjacencies.data;
}
ans.addAdjacence(json, ch[i], data);
arguments.callee(ans, ch[i]);
//CUSTOM CODE END
}