Develop Reference

How to display simple DIS PDU from JSON file in Tabulator

I have a sample DIS PDU that has been stored in a JSON file. I want to be able to read that file, and then display it using Tabulator on a web page. I am having problems with the "PDUHeader" and the "EntityID" section labels. The JSON parser in Tabulator is giving errors on these lines.
{
"PDUHeader": {
"ProtocolVersion": 1,
"ExerciseID": 123,
"PDUType": 1,
"ProtocolFamily": 1,
"Timestamp": 123,
"Length": 23,
"PDUStatus": 45
},
"EntityID": {
"SiteNumber": 6,
"ApplicationNumber": 1,
"EntityNumber": 1
}
}
Tried combining the Tabulator example where you download local JSON file, and the "Column Groups" example as listed here:
Tabulator Examples Page

How to model the rows in getData() since i have nested JSON data?

I want to display these fields :name, age, addresses_id, addresses_city, addresses_primary for each person into data studio.
My JSON data
{
"data": [
{
"name": "Lio",
"age": 30,
"addresses": [
{
"id": 7834,
"city": "ML",
"primary": 1
},
{
"id": 5034,
"city": "MM",
"primary": 1
}
]
},
{
"name": "Kali",
"age": 41,
"addresses": [
{
"id": 3334,
"city": "WK",
"primary": 1
},
{
"id": 1730,
"city": "DC",
"primary": 1
}
]
},
...
]
}
there is no problem if i don't render the addresses field
return {
schema: requestedFields.build(),
rows: rows
};
//rows:
/*
"rows": [
{
"values": ["Lio", 30]
},
{
"values": ["Kali", 41]
},
...
]
*/
The problem is
I'm not able to model the nested JSON data in Google Data Studio. I
have the problem exactly in the "addresses" field.
Could anyone tell me what format should be for the rows in this case?

As you already know, for each name of your dataset, you clearly have more than one row (one person has multiple addresses). Data Studio only accepts a single data for each field, since arrays are not supported at all. So you need to work on this.
There are some ways to solve this, but always keep in mind that:
getSchema() should return all available fields for your connector (the order doesn't really matter, since Data Studio always sort alphabetically the available fields)
getData() should return a list of values. But here the order is relevant: it should be the same as the parameter passed to getData() (which means the results should be dynamic, sometimes you'll return all values, sometimes not, and the order may change).
Solution 1: Return multiple rows per record
Since you can produce multiple rows for each name, just do it.
To achieve this, your field definition (=getSchema()) should include fields address_id, address_city and address_primary (you can also add address_order if you need to know the position of the address in the list).
Supposing getData() is called with all fields in the same order they were discribed, rows array should look like this:
"rows": [
{
"values": ["Lio", 30, "7834", "ML", 1]
},
{
"values": ["Lio", 30, "5034", "MM", 1]
},
{
"values": ["Kali", 41, "3334", "WK", 1]
},
{
"values": ["Kali", 41, "1730", "DC", 1]
},
...
]
IMO, this is the best solution for your data.
Solution 2: Return one address only, ignoring others
If you prefer one row per person, you can get one of the addresses and display only it (usually the main/primary address, or the first one).
To achieve this, your field definition (=getSchema()) should include fields address_id, address_city and address_primary.
Supposing getData() is called with all fields in the same order they were discribed, rows array should look like this:
"rows": [
{
"values": ["Lio", 30, "7834", "ML", 1]
},
{
"values": ["Kali", 41, "3334", "WK", 1]
},
...
]
Solution 3: Return all addresses, serialized in a field
This is helpful if you really need all information but do not want a complex scheme.
Just create a field called addresses in your field definition (=getSchema()) and write the JSON there as a string (or any other format you want).
Supposing getData() is called with all fields in the same order they were discribed, rows array should look like this:
"rows": [
{
"values": ["Lio", 30, "[{\"id\": 7834, \"city\": "ML", \"primary\": 1}, {\"id\": 5034, \"city\": \"MM\", \"primary\": 1}]"]
},
{
"values": ["Kali", 41, "[{\"id\": 3334, \"city\": \"WK\", \"primary\": 1}, {\"id\": 1730, \"city\": \"DC\", \"primary\": 1}]"]
},
...
]
This solution may appear senseless, but it is possible to interact with this data later in DataStudio using REGEX if really needed.
Solution 4: Create a different field for each address
If you're sure all records has a maximum number of addresses (in you example, both names have 2 addresses, for example), you can create multiple fields.
Your field definition (=getSchema()) should include fields address_id1, address_city1, address_primary1, address_id2, ... address_primaryN.
I wouldn't explain how rows should look like in this situation, but it is not hard to guess with the other examples.

Plotly.js multiple subplots not working as expected

Edit to add: Looking for the "plotly.js" way to do this. This "small multiple" visualization should have some "plotly.js" solution out there but haven't found it yet.
I am using an array (example element below) to populate traces for plotly.js multiple subplots per their multiple-subplots example
[{
"key": "Ontario|Toronto",
"values": [{
"key": "2020-01-25",
"value": 1
}, {
"key": "2020-01-27",
"value": 1
}, {
"key": "2020-05-12",
"value": 218
}, {
"key": "2020-05-13",
"value": 169
}]
}, {
etc
}]
The array has 94 elements which contain info needed to create each trace. This would result in 94 subplots, one per trace. This plotly.js visualization could also be called "small multiples".
I am creating the traces dynamically and populating subplot definitions in a loop using code below:
// create chart data
var traces = [];
var rowCount = (caseRegionByDate.length / 2).toFixed()
for (var i=0; i<caseRegionByDate.length; i++) {
//console.log(caseRegionByDate[i]['key']);
var trace = {};
var x = [];
var y = [];
for (var j=0; j<caseRegionByDate[i]['values'].length; j++) {
//console.log(caseRegionByDate[i]['values'][j]['key']);
x.push(caseRegionByDate[i]['values'][j]['key']);
y.push(caseRegionByDate[i]['values'][j]['value']);
}
// create trace i
trace = {
"x":x,
"y":y,
"xaxis":"x"+i,
"yaxis":"y"+i,
"type":"scatter"
}
// push trace to traces
traces.push(trace);
}
console.log(JSON.stringify(traces));
var layout = {
grid: {rows: rowCount, columns: 2, pattern: 'independent'},
};
Plotly.newPlot('multiple_charts', traces, layout);
This creates the traces variable populated by each trace that looks like example below. It looks correct:
[{
"x": ["2020-03-16", "2020-03-23", "2020-03-24", "2020-03-25", "2020-03-31", "2020-04-01", "2020-04-02", "2020-04-03", "2020-04-06", "2020-04-07", "2020-04-08", "2020-04-09", "2020-04-10", "2020-04-11", "2020-04-13", "2020-04-14", "2020-04-15", "2020-04-16", "2020-04-17", "2020-04-18", "2020-04-21", "2020-04-22", "2020-04-23", "2020-04-24", "2020-04-25", "2020-04-26", "2020-04-27", "2020-04-28", "2020-04-29", "2020-04-30", "2020-05-01", "2020-05-02", "2020-05-03", "2020-05-04", "2020-05-05", "2020-05-06", "2020-05-07", "2020-05-08", "2020-05-09", "2020-05-10", "2020-05-11", "2020-05-12", "2020-05-13"],
"y": [1, 1, 1, 1, 9, 35, 3, 16, 33, 13, 9, 5, 5, 1, 22, 3, 4, 7, 19, 4, 7, 2, 18, 11, 9, 9, 9, 13, 1, 3, 7, 18, 5, 4, 4, 5, 3, 1, 2, 2, 3, 1, 2],
"xaxis": "x0",
"yaxis": "y0",
"type": "scatter"
}, {
"x": ["2020-03-14", "2020-03-26", "2020-03-27", "2020-04-02", "2020-04-06", "2020-04-09", "2020-04-14", "2020-04-17", "2020-04-18", "2020-04-20", "2020-04-22"],
"y": [1, 1, 1, 2, 2, 3, 1, 1, 1, 2, 1],
"xaxis": "x1",
"yaxis": "y1",
"type": "scatter"
},
etc
]
However, the result appears to be one row with two columns that have all of the traces (there are 94 traces) squashed into them. Here is screenshot.
Any ideas what is happening? I expect to have 48 rows with 2 columns, one subplot per trace.
The only difference from the multiple subplots example is that my xaxis have date strings instead of numbers. Everything else is same.

The subplots are actually being created in 3 x rowCount grid. However they are all squashed vertically as in screenshot.
It appears that a chart's default height and width dimensions, where they are not explicitly defined using layout.height, are what is shown in my screenshot eg too small for 94 subplots.
The quick fix is to simply increase the chart's layout.height size. Then all subplots are visible. Dynamically calculating layout.height, in spirit of Juan's suggestion, relative to number of rows works well.
Apparently it is also possible to set each subplot's x and y domain attributes to resize subplots which will also give desired results.

HighCharts - getJson to HighCharts dual axes

I would like to display a HighCharts dual axes chart by making a call to a local webService, which returns Json (example given below).
The HighChart should plot the following data points:
y-axis left: plots the 'Movement'
y-axis right: plots the 'EndValue'
x-axis: plots the 'DateLabel'
My Json webservice call: http://localhost/api/getData?format=jsonp
This returns the following Json:
{
"LastUpdated": "/Date(-62135596800000-0000)/",
"TotalTime": "0s584ms",
"MonthlyData": {
"GroupId": 9,
"CurrencyId": 3,
"Returns": [
{
"Movement": -0.008536959525287496,
"MovementLabel": "-0.85 %",
"DateLabel": "Jan-10",
"Date": "/Date(1264892400000-0000)/",
"EndValue": 16012000.007666545
},
{
"Movement": -0.04846365302964577,
"MovementLabel": "-4.85 %",
"DateLabel": "Feb-10",
"Date": "/Date(1267311600000-0000)/",
"EndValue": 15235999.994984308
},
{
"Value": -0.0034129684178402725,
"ValueLabel": "-0.34 %",
"DateLabel": "Mar-10",
"Date": "/Date(1269986400000-0000)/",
"StartValue": 15235999.994984308,
"EndValue": 15184000.008187212,
"CashFlows": 0
}
]
}
}
What is the jquery code needed to
- make the call to the webService (I would like to use getJson)
- transform the JSON output to the required HighCharts data, such that a dual axes chart can be shown

To get JSON you can use jQuery.ajax() function. As for the splitting data into two series linked to different yAxis, you need to parse your data. Take a look at the example below.
API Reference:
http://api.jquery.com/jquery.ajax/
http://api.highcharts.com/highcharts/xAxis.categories
http://api.highcharts.com/highcharts/yAxis.opposite
Example:
http://jsfiddle.net/dna9wqsg/

Directed edges in sigma.js - a minimal example

Question
What is necessary to produce directed edges in sigma.js? I'm looking for a minimal example that is preferably based off of the minimal example currently on their home page.
Attempts
I tried adapting the minimal graph example from the sigma.js homepage in the following way
sigma.parsers.json('data.json', {
container: 'container',
settings: {
defaultNodeColor: '#ec5148',
+ defaultEdgeArrow: 'source' // adding this line should add arrows?
}
});
Sadly this did not produce different results.
I also tried modifying the edges in the graph itself
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1",
+ "arrow": "source"
},
...,
]
But again this had no effect.
More complex examples
Edge arrow rendering was added in this pull request. This links to a couple of examples here and here

I've been struggling with this issue myself. It looks like sigma.js underwent a major redesign in the last few months and the code from the examples is from an older version of sigma.js.
They do have the ability to render arrows, but the settings to generate these have changed and some of the options were lost (no longer can you specify target, source, or both; you only can use target):
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1",
+ "type": "arrow",
},
...,
]
"curvedArrow" is also a valid option for type.
See this issue transcript: https://github.com/jacomyal/sigma.js/pull/219 for more information.

I was struggling with it for a few hours. I was able to find a working example at https://www.bsimard.com/2018/04/25/graph-viz-with-sigmajs.html .
The things you need:
- add 'type: "arrow"' to the node properties
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1",
+ "type": "arrow",
},
...,
]
and in the Sigma constructor set minArrowSize, also for me it is only working with canvas.
s = new sigma({
graph: data,
renderer: {
container: document.getElementById('graph-container'),
type: 'canvas'
},
settings: {
minArrowSize: 10
}
});