I'm trying to convert netCDF data to json for use in leaflet-velocity, which used the same format as the output of grib2json used by cambecc in earth. Here's another example of sample json data given by danwild in wind-global.json
Using netCDF4 I've managed to extract arrays of lat/ lot wind data from my netCDF.
I was wondering how the "data" part of the json file (example below) is structured? It seems to be a long array of values (e.g. for 'eastward wind' in the example), but I don't understand how they get mapped to lat/ lon coords later on?
Is there something in the json header which tells Leaflet how to structure the output, or must there be another function in leaflet-velocity.js doing the work?
This question had some clues, but I've been at a loss for some time now trying to adapt it for my own netCDF file.
[
{
"header": {
"parameterUnit": "m.s-1",
"parameterNumber": 2,
"dx": 1.0,
"dy": 1.0,
"parameterNumberName": "eastward_wind",
"la1": -7.5,
"la2": -28.5,
"parameterCategory": 2,
"lo2": 156.0,
"nx": 14,
"ny": 22,
"refTime": "2017-02-01 23:00:00",
"lo1": 143.0
},
"data":[
-2.12,
-2.27,
-2.41,
...
]
}
]
This may help. NCO-JSON produces a different JSON dialect than grib2json, yet works directly and completely for all netCDF files, and, by default, includes brackets indicating array dimensional boundaries. You might find it easier for your purposes...
zender#aerosol:~$ ncks -C -v three_dmn_rec_var --jsn ~/nco/data/in.nc
{
"dimensions": {
"lat": 2,
"lon": 4,
"time": 10
},
"variables": {
"three_dmn_rec_var": {
"shape": ["time", "lat", "lon"],
"type": "float",
"attributes": {
"long_name": "three dimensional record variable",
"units": "watt meter-2",
"_FillValue": -99.0
},
"data": [[[1.0, 2.0, 3.0, 4.0], [5.0, 6.0, 7.0, 8.0]], [[9.0, 10.0, 11.0, 12.0], [13.0, 14.0, 15.0, 16.0]], [[17.0, 18.0, 19.0, 20.0], [21.0, 22.0, 23.0, 24.0]], [[25.0, 26.0, 27.0, 28.0], [29.0, 30.0, 31.0, 32.0]], [[33.0, 34.0, 35.0, 36.0], [37.0, 38.0, 39.0, 40.0]], [[41.0, 42.0, 43.0, 44.0], [45.0, 46.0, 47.0, 48.0]], [[49.0, 50.0, 51.0, 52.0], [53.0, 54.0, 55.0, 56.0]], [[57.0, 58.0, 59.0, 60.0], [61.0, 62.0, 63.0, 64.0]], [[65.0, 66.0, 67.0, 68.0], [69.0, 70.0, 71.0, 72.0]], [[73.0, 74.0, 75.0, 76.0], [77.0, 78.0, 79.0, 80.0]]]
}
}
}
Related
I'm working with plotly in JS, trying to draw a sunburst chart. Everything works, but i would like to make it so that the child sections on the chart each have a different color. I cant seem to figure it out, any help is extremely appreciated.
Here is how my sunburst looks:
Notice that "Enos" and "Noam" have the same color, I would like them to have either different colors, or at least different opacities.
Like so:
Here is my code:
var data = [{
"type": "sunburst",
"labels": ["Eve", "Awan", "Seth", "Enos", "Noam", "Enoch"],
"parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
"values": [100, 20, 80, 60, 20, 20]
}];
var layout = {
sunburstcolorway: ["#636efa", "#ef553b"]
};
Plotly.newPlot('myChart', data, layout)
If you want to have custom colors for your traces, then you need to set the colors array of the marker object. There you can set the color for every single part of the sunburst diagram:
var data = [{
"type": "sunburst",
"labels": ["Eve", "Awan", "Seth", "Enos", "Noam","Enoch"],
"parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
"values": [100, 20, 80, 60, 20, 20],
"opacity" : 1,
"marker": {
colors: ["#ffffff","#fc6e08","#3e81ed","#3293e3","#c429ad","#d99543"]
}
}];
var layout = {
// sunburstcolorway: ["#636efa", "#ef553b"]
};
Plotly.newPlot('myChart', data, layout)
So the first value ("Eve") has the first color of the array, the second value ("Awan")the second color, and so on. In the example, I set the opacity to 1 to get the real colors from the colors array.
This question already has answers here:
How to get a subset of a javascript object's properties
(36 answers)
Closed 3 years ago.
I'm trying to filter the json file so that it only contains certain key-value pairs. I have been looking around stack overflow but none of the solutions meet my needs.
I made the json file into a var and tried using this piece of code but it fails for some reason, saying that [object array] is not a function.
var newArr = data.map(data, function(object) {
return data.pick(object, ['time', 'practical_salinity']);});
[
{
"practical_salinity": 33.435064643342436,
"seawater_pressure": 101.78123944323164,
"corrected_dissolved_oxygen": 164.09190464800648,
"density_qc_executed": 29,
"driver_timestamp": 3765193211.34625,
"conductivity": 1493552,
"seawater_pressure_qc_results": 29,
"practical_salinity_qc_results": 29,
"temperature": 411414,
"density": 1026.3321779687496,
"corrected_dissolved_oxygen_qc_executed": 29,
"corrected_dissolved_oxygen_qc_results": 29,
"seawater_temperature_qc_results": 29,
"pressure_temp": 14964,
"internal_timestamp": 0.0,
"seawater_conductivity_qc_results": 13,
"pk": {
"node": "SF01A",
"stream": "ctdpf_sbe43_sample",
"subsite": "RS01SBPS",
"deployment": 6,
"time": 3765193211.283541,
"sensor": "2A-CTDPFA102",
"method": "streamed"
},
"ext_volt0": 22775,
"seawater_temperature": 9.178755142917169,
"ingestion_timestamp": 3765193215.771,
"port_timestamp": 3765193211.283541,
"seawater_pressure_qc_executed": 29,
"pressure": 629441,
"preferred_timestamp": "port_timestamp",
"seawater_conductivity": 3.5856973775744,
"practical_salinity_qc_executed": 29,
"seawater_temperature_qc_executed": 29,
"density_qc_results": 29,
"time": 3765193211.283541,
"seawater_conductivity_qc_executed": 29
}]
From this json file, I would like the output to be,
[{"practical_salinity": 33.435064643342436,
"pressure": 629441}]
Like smashed-potatoes mentioned, this is mostly of duplicate of How to get a subset of a javascript object's properties. You just need to wrap it correctly in the Array.map function.
map takes the iteratee as the first argument. I don't know what object.pick is supposed to be.
const data = [
{
"practical_salinity": 33.435064643342436,
"seawater_pressure": 101.78123944323164,
"corrected_dissolved_oxygen": 164.09190464800648,
"density_qc_executed": 29,
"driver_timestamp": 3765193211.34625,
"conductivity": 1493552,
"seawater_pressure_qc_results": 29,
"practical_salinity_qc_results": 29,
"temperature": 411414,
"density": 1026.3321779687496,
"corrected_dissolved_oxygen_qc_executed": 29,
"corrected_dissolved_oxygen_qc_results": 29,
"seawater_temperature_qc_results": 29,
"pressure_temp": 14964,
"internal_timestamp": 0.0,
"seawater_conductivity_qc_results": 13,
"pk": {
"node": "SF01A",
"stream": "ctdpf_sbe43_sample",
"subsite": "RS01SBPS",
"deployment": 6,
"time": 3765193211.283541,
"sensor": "2A-CTDPFA102",
"method": "streamed"
},
"ext_volt0": 22775,
"seawater_temperature": 9.178755142917169,
"ingestion_timestamp": 3765193215.771,
"port_timestamp": 3765193211.283541,
"seawater_pressure_qc_executed": 29,
"pressure": 629441,
"preferred_timestamp": "port_timestamp",
"seawater_conductivity": 3.5856973775744,
"practical_salinity_qc_executed": 29,
"seawater_temperature_qc_executed": 29,
"density_qc_results": 29,
"time": 3765193211.283541,
"seawater_conductivity_qc_executed": 29
}];
console.log(data.map(({ time, practical_salinity }) => ({
time, practical_salinity
}))
);
The JSON.parse reviver parameter can be used to exclude key-value pairs from JSON string :
var keys = ['pressure', 'practical_salinity'], json = '[{"practical_salinity":33.435064643342436,"seawater_pressure":101.78123944323164,"corrected_dissolved_oxygen":164.09190464800648,"density_qc_executed":29,"driver_timestamp":3765193211.34625,"conductivity":1493552,"seawater_pressure_qc_results":29,"practical_salinity_qc_results":29,"temperature":411414,"density":1026.3321779687496,"corrected_dissolved_oxygen_qc_executed":29,"corrected_dissolved_oxygen_qc_results":29,"seawater_temperature_qc_results":29,"pressure_temp":14964,"internal_timestamp":0,"seawater_conductivity_qc_results":13,"pk":{"node":"SF01A","stream":"ctdpf_sbe43_sample","subsite":"RS01SBPS","deployment":6,"time":3765193211.283541,"sensor":"2A-CTDPFA102","method":"streamed"},"ext_volt0":22775,"seawater_temperature":9.178755142917169,"ingestion_timestamp":3765193215.771,"port_timestamp":3765193211.283541,"seawater_pressure_qc_executed":29,"pressure":629441,"preferred_timestamp":"port_timestamp","seawater_conductivity":3.5856973775744,"practical_salinity_qc_executed":29,"seawater_temperature_qc_executed":29,"density_qc_results":29,"time":3765193211.283541,"seawater_conductivity_qc_executed":29}]';
var result = JSON.parse(json, (k, v) => keys.includes(k) || !isNaN(k) ? v : void 0);
console.log( result );
All:
We are using NEwtonsoft JSON.NET to serialize some C# POCOs, and we get the following:
{
"RouteID": "123321213312",
"DriverName": "JohnDoe",
"Shift": "Night",
"ItineraryCoordinates": [
[ 9393, 4443 ],
[ 8832, 3322 ],
[ 223, 3432 ],
[ 223, 3432 ]
]
}
In an AJAX jQuery function, I have the following:
alert($.parseJSON(data.d).ItineraryCoordinates);
Sadly, the result in the popup alert box is:
9393, 4443 , 8832, 3322, 223, 3432, 223, 3432
Could someone please tell me how I can implement the code in such a way that the square brackets are kept in place?
You can use JSON.stringify to achieve what you require:
var data = $.parseJSON(data.d);
alert(JSON.stringify(data.ItineraryCoordinates));
Working example
use JSON.stringify(dataArray) it is used keep the brackets
I have a bitcoin miner which can output data in JSON fromat as follows:
{
"Data1": {
"timestamp_raw": 1442856476,
"timestamp": {
"Year": 2015,
"Month": 9,
"Day": 21,
"Hour": 20,
"Minutes": 27,
"Seconds": 56
},
"CG_Uptime": 15572,
"MHS_Avg": 2695618.06,
"DegC_In": "29",
"DegC_TopOut": "54",
"DegC_BotOut": "59",
"Unit_Uptime": 118393,
"FreeMem": "440",
"PSUVolt_Top": "217",
"PSUVolt_Bot": "217",
"FAN": "40",
"Total_Watts": 1264,
"Total_KWh": 0
},
"Data2": {
"timestamp_raw": 1442856495,
"timestamp": {
"Year": 2015,
"Month": 9,
"Day": 21,
"Hour": 20,
"Minutes": 28,
"Seconds": 15
},
"CG_Uptime": 15592,
"MHS_Avg": 2695948.02,
"DegC_In": "29",
"DegC_TopOut": "54",
"DegC_BotOut": "59",
"Unit_Uptime": 118412,
"FreeMem": "440",
"PSUVolt_Top": "217",
"PSUVolt_Bot": "217",
"FAN": "40",
"Total_Watts": 1248,
"Total_KWh": 30.006586944
},
"Data3": {
"timestamp_raw": 1442856535,
"timestamp": {
"Year": 2015,
"Month": 9,
"Day": 21,
"Hour": 20,
"Minutes": 28,
"Seconds": 55
},
"CG_Uptime": 15631,
"MHS_Avg": 2698686.25,
"DegC_In": "29",
"DegC_TopOut": "54",
"DegC_BotOut": "59",
"Unit_Uptime": 118451,
"FreeMem": "440",
"PSUVolt_Top": "217",
"PSUVolt_Bot": "217",
"FAN": "40",
"Total_Watts": 1232,
"Total_KWh": 0.013688752
}, ......
What I want to do is to make a webpage in php which will read this json file and display the values on charts, x-axis would be time (from timestamp section in json) and y-axis would be a value for each chart.
I've seen something similar here
http://powerprice.info/SPT/graphic.php
which uses highcharts.
How can I accomplish this?
I think you are looking just for a general advice.
Live data:
Here is mine: If server, which provides you data for bitcoins supports history data, like specific requests with data range (from-to etc.) then, simply use AJAX call in the HTML file to your server. Then call some GET/POST to the providers server in PHP to get requested data. Then in AJAX response provide data to the chart. Just make sure you have proper format, required by Highcharts.
You will not find many examples on the Highcharts site, because it really doesn't matter for Highcharts what you have in the backend. However, this tutorial explains a little bit. In step #1: Set up the server instead of randomized data, get proper data from your data provider.
Preprocessing data:
Additional advice, according to your question update: I can't tell you how you need to store data for last week, but I guess simple database would be enough. As you said, use some cron task, to get data from the service, then store it in your database.
The question is which property of your JSON is value to be displayed on the chart. In example below, I assume that MHS_Avg is used as y-values. I don't see anything to be x-value (like date or timestamp), though.
Let's say you have /var/www/json.php do load data for the chart:
$(function () {
$.getJSON("/var/www/json.php", function (data) {
var value,
series = [{
name: "MHS_Avg",
data: []
}]; // create series array with all series
// now parse data:
$.each(data, function (i, obj) {
value = parseFloat(obj["MHS_Avg"]);
if (!isNaN(value)) {
series[0].data.push([i, value]);
// or:
// series[0].data.push(value);
// or:
// series[0].data.push({ x: i, y: value });
};
});
// create chart
$('#temps_hist').highcharts({
series: series
});
});
});
After reading many Stackoverflow questions, blogs, and documentation I still cannot figure out why this particular iteration over any array is not working.
I am using jQuery and javascript(obviously) to pull a GeoJSON file and then going over the properties of the resulting object to pull desired key/value pairs. As I find those pairs I want to insert then into another array object. The object is created as I expected however when I attempt to go over the newly created object nothing happens and if I try to find its length it returns a length of 0.
This is where I pull the records:
_recordsFromGeoJSON: function(inputText) {
var retRecords = {},
$.getJSON(this.GeoJSONUrl, function(data) {
var geoJSONdata = data;
$.each(geoJSONdata.features, function(fkey, fvalue) {
$.each(fvalue.properties, function(pkey, pvalue) {
var re = new RegExp(inputText, "i");
var retest = re.test(pvalue);
if (retest) {
retRecords[pvalue] = fvalue.geometry.coordinates;
return;
}
});
});
});
return retRecords;
},
This is the code for the interation over the new object:
for(var key in this._retRecords) {
//this function will never run
var always = foo(bar);
}
Some sample GeoJSON:
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "id": 0, "properties": { "NAME": "14 PARK PLACE PH 4", "AREAID": 3.0, "STR12M": 0.0, "CLS12M": 6.0, "STR4M": 0.0, "CLS4M": 0.0, "TOTAL": 164.0, "OCC": 112.0, "NFU": 0.0, "UNC": 3.0, "DVL": 49.0, "UDVL": 0.0 }, "geometry": { "type": "Point", "coordinates": [ -93.27512816536759, 37.044305883435001 ] } }
,
{ "type": "Feature", "id": 1, "properties": { "NAME": "ALPHA MEADOWS NORTH", "AREAID": 8.0, "STR12M": 0.0, "CLS12M": 0.0, "STR4M": 0.0, "CLS4M": 0.0, "TOTAL": 12.0, "OCC": 0.0, "NFU": 0.0, "UNC": 0.0, "DVL": 0.0, "UDVL": 0.0 }, "geometry": { "type": "Point", "coordinates": [ -92.839131163095786, 37.119205483765143 ] } }
]
}
When I console.log(this._retRecords); Chrome reports shows the object with all the properties I expected from the dataset:
Object
14 PARK PLACE PH 4: Array[2]
0: -93.27512816536759
1: 37.044305883435
length: 2
__proto__: Array[0]
ALPHA MEADOWS NORTH: Array[2]
0: -92.839131163095786
1: 37.119205483765143
length: 2
__proto__: Array[0]
Using both methods given on this question report 0 length.
I am quite certain I am missing something fundamental but I cannot find what it is. Any help, criticism, alternative methods would be great!
It appears that you don't understand that your getJSON() function starts immediately (e.g. sends the request) and then returns immediately long before the getJSON function has completed it's work. It's work will be done sometime later when the completion function is called. Thus retRecords is not yet populated when the _recordsFromGeoJSON() function returns.
This is asynchronous programming. The completion function for getJSON will be called sometime LATER, long after _recordsFromGeoJSON() returns. Thus, you cannot treat it like synchronous, serial programming.
Instead, retRecords is only known in the completion function or in any function you pass the data to and call from that completion function. This is how asynchronous programming works in javascript. You must initiate all further processing of the getJSON() result from the completion function. And, you can't return the result from _recordsFromGeoJSON() because the result is not yet known when that function returns. This is a different way of coding and it a bit of a pain, but it is how you have to deal with asynchronous operations in javascript.