I'm working on a project to brush up on my JS, and I'm finding Highcharts rather challenging. What I've done is set up project that pulls in current JSON data from an API, and displays results on a map. When you click on a state, you can view the historical data for that state. if you shift click, you can view more than one state.
My x-axis is formatted with dates from each state, as not each state began tracking data at the same time. When multiple states are selected, the information is incorrect because even though they all have the same date for the most recent data point (today), the first data point in the date array varies. For instance, if you click New York, their first data point starts on 3/04, but if you click Connecticut, the first data point starts on 3/07.
Is there a way I can reconcile this? Can I have my categories start from the most recent data point and work backwards, so the data points for today are concurrent?
Here's my pen: https://codepen.io/maxpalmer/pen/rNVRzVX?editors=0010
Stackoverflow is requiring I post some code, so here is the function I wrote that reassembles the api data into an array for each state for the area chart:
for (i = 0; i < stateAbbrevs.length; i++){
var values = new Array(), categories = new Array();
// var categories = new Array();
var state = stateAbbrevs[i];
var stateObj = jsonData.filter(obj => obj.state == state);
for (x = 0; x < stateObj.length; x++) {
var value = stateObj[x].positive;
var date = formatDate(stateObj[x].date);
var name = stateNames[i];
values.push(value);
categories.push(date);
}
values.reverse();
categories.reverse();
historicData[state] = {
name: name,
data: values,
categories: categories
};
}
}```
Ah, found it in the myriad Highcharts documentation. Comes down to reversing my data array, and then reversing it in the highcharts x-axis options.
https://api.highcharts.com/highcharts/xAxis.reversed
Related
May I know If I could parse differently, so that performance and load time can be improved. I deal with file size that is in MBs.
My file with multiple objects is parsed as below:
I display multiple graphs in a single page.
'chart1' to 'chart5' arrays are used for each graph's Y-axis.
'xAxisTime' array is used for x-axis (common x-axis for all graphs).
eg: I get 50000 values in each array (chart1, chart2...xAxisTime).
data = fileWithMultipleObjects;
objects= data.split('\n');
for (var i= 0; i < objects.length - 2; i++) {
var obj = JSON.parse(objects[i])
if (obj.type=== "A") {
chart1.push(obj.c1)
chart2.push(obj.c2)
}
else {
chart1.push(null)
chart2.push(null)
}
if (obj.type=== "B") {
chart3.push(obj.c3)
chart4.push(obj.c4)
chart5.push(obj.c5)
}
else {
chart3.push(null)
chart4.push(null)
chart5.push(null)
}
//common for all charts - xAxis data
if (obj.date === undefined) {
obj.date = null
}
if (obj.date!== null) {
var date= obj.date
xAxisTime.push(date)
}
}
Reason for pushing null values when no data:
I need to show all 5 graphs in line with the time the job was run.
Also, this helps me use "this.point.y" (var index = this.point.y), which helps me display tooltips on plotline. Fiddle showing tooltip(when clicked on green line) with "this.point.y" :https://jsfiddle.net/xqb0cn5r/4/
This is how my graphs look. Fiddle: https://jsfiddle.net/xgpL1w3t/. Only charts that meets if condition are rendered. chart1 and chart5 are rendered in this case. Thank you.
Edited:
Below is the data structure of my file:
{"C1":55.77,"C2":11367.25,"type":"A","date":"10/24/2022 12:05:37.236"}
{"C3":55.77,"C4":11367.25,"type":"B","date":"10/24/2022 12:05:37.236","C5":445.21}
{"C1":55.77,"C2":11367.25,"type":"A","date":"10/24/2022 12:05:37.236"}
{"C1":55.77,"C2":11367.25,"type":"A","date":"10/24/2022 12:05:37.240"}
{"C3":55.77,"C4":11367.25,"type":"B","date":"10/24/2022 12:05:37.250","C5:445.25}
{"C3":55.77,"C4":11367.25,"type":"B","date":"10/24/2022 12:05:37.275","C5":445.26}
I display like 8 to 10 charts in real scenario with around 50000 points each. Common x-axis for all. Out of 50000, only 2000 to 4000 are real data, remaining are all null values. I push null, so that I can keep graphs in line with the whole time(x-axis) the job was run.
Right now, it takes time to load charts. As so much data to parse and load. I believe performance can be be improved if my data is parsed differently for the same scenario. I would appreciate any suggestions.
Performing single json parse as below:
var convertStringToJsonFormat= "[" + data.split('\n').join(", ")
JsonFormat = convertStringToJsonFormat.slice(0, -2);
JsonFormat = JsonFormat + "]"
data = JSON.parse(JsonFormat)
I am using NEX-GDDP for obtaining daily climatology (Precipitation, Temp min and Temp max) data of the 21 GCM models in the period 2018-01-01 to 2099-12-31, for certain points. I made this script, for one model in one scenario
//Dataset
var dataset = ee.ImageCollection('NASA/NEX-GDDP')
.filter(ee.Filter.date('2018-01-01', '2099-12-31'))
.filterMetadata('scenario','equals','rcp45')
.filterMetadata('model','equals','MPI-ESM-LR')
//Points of interest
var Acomayo = ee.Geometry.Point([-71.689166667, -13.921388889]),
var Machupicchu = ee.Geometry.Point([-72.545555556, -13.166666667]),
var Urubamba = ee.Geometry.Point([-72.129116546, -13.323123791]),
var Pisac = ee.Geometry.Point([-71.849444444, -13.415833333]),
var Ccatcca = ee.Geometry.Point([-71.56, -13.609722222]),
var GranjaKcayra = ee.Geometry.Point([-71.875, -13.556666667]),
var Pomacanchi = ee.Geometry.Point([-71.5357971, -14.027777778]),
var Sicuani = ee.Geometry.Point([-71.236944444, -14.253333333]);
var pts = ee.FeatureCollection(ee.List([ee.Feature(Acomayo),ee.Feature(Machupicchu),ee.Feature(Urubamba),ee.Feature(Pisac)
,ee.Feature(Ccatcca),ee.Feature(GranjaKcayra),ee.Feature(Pomacanchi),ee.Feature(Sicuani)]));
//Export to table .CSV
// Empty Collection to fill
var ft = ee.FeatureCollection(ee.List([]));
//Without removal of null values ----------------------------------
//Function to extract values from image collection based on point file and export as a table
var fill = function(img, ini) {
// type cast
var inift = ee.FeatureCollection(ini);
// gets the values for the points in the current img
var ft2 = img.reduceRegions(pts, ee.Reducer.first(),30);
// gets the date of the img
var date = img.date().format("yyyy/MM/dd");
var scenario = img.get("scenario");
var model = img.get("model");
// writes the date in each feature
var ft3 = ft2.map(function(f){return f.set("date", date, "scenario", scenario, "model", model)});
// merges the FeatureCollections
return inift.merge(ft3);
};
// Iterates over the ImageCollection
var newft = ee.FeatureCollection(dataset.iterate(fill, ft));
//print(newft);
// Export
Export.table.toDrive({
collection: newft,
description: 'GCM_diario',
folder: 'Downscalling_Diario',
fileFormat: 'csv'
});
The scripts work fine for two days and two points, but for the current points and period of time I need, it still working after 5 hrs. To reduce the amount of data I think these ideas:
Average the daily data of the 21 GCMs models in the product, and make it one ImgaeCollection, so
there is only a need to separate by scenario.
Export the ImageCollection of every variable (Pp, Tmin, Tmax) to a NetCDF only the area that contains points (don't know if it is
possible).
geometry = ee.Geometry.Polygon(
[[[-72.77555636882136, -12.867571480133547],
[-72.77555636882136, -14.670820732958893],
[-70.69914035319636, -14.670820732958893],
[-70.69914035319636, -12.867571480133547]]], null, false);
If there is another way to download this data I open to do it.
Using .iterate() can be very memory intensive and is prone to memory errors. A more straight forward approach to this would be to select a specific point you want to focus on, loop over all of the days of interest, and use .reduceRegion() to get the information desired. You can then export the time series as a CSV and convert it to whichever format you want.
Here is an example that gets all variables for all models and scenarios:
// specify start and end date
// Change as needed
var startDate = ee.Date('2018-01-01');
var endDate = ee.Date('2019-01-01');
// get the dataset between date range and extract band on interest
var dataset = ee.ImageCollection('NASA/NEX-GDDP')
.filter(ee.Filter.date(startDate,endDate));
// get projection and band information
var firstImage = dataset.first();
var bandNames = firstImage.bandNames();
var proj = firstImage.projection();
var point = ee.Geometry.Point([-71.689166667, -13.921388889])
// calculate number of days to map and extract data for
var n = endDate.difference(startDate,'day').subtract(1);
// map over each date and extract all climate model values
var timeseries = ee.FeatureCollection(
ee.List.sequence(0,n).map(function(i){
var t1 = startDate.advance(i,'day');
var t2 = t1.advance(1,'day');
var dailyColl = dataset.filterDate(t1, t2);
var dailyImg = dailyColl.toBands();
// rename bands to handle different names by date
var bands = dailyImg.bandNames();
var renamed = bands.map(function(b){
var split = ee.String(b).split('_');
return split.slice(0,2).cat(split.slice(-1)).join('_');
});
// extract the data for the day and add time information
var dict = dailyImg.rename(renamed).reduceRegion({
reducer: ee.Reducer.mean(),
geometry: point,
scale: proj.nominalScale()
}).combine(
ee.Dictionary({'system:time_start':t1.millis(),'isodate':t1.format('YYYY-MM-dd')})
);
return ee.Feature(point,dict);
})
);
print(timeseries);
// get properties to chart (all climate models)
var props = timeseries.first().propertyNames().removeAll(['system:time_start','system:index','isodate']);
// Make a chart of the results.
var chart = ui.Chart.feature.byFeature(timeseries, 'system:time_start', props.getInfo());
print(chart);
Map.addLayer(point);
Map.centerObject(point,6);
// export feature collection to CSV
Export.table.toDrive({
collection: timeseries,
description: 'NEX-GDDP-timeseries',
fileFormat: 'CSV',
});
You may run into memory errors in the code editor when working with long date ranges (2018-2099) but the export should work. Also, keep in mind that the Earth Engine exports are a little simplistic so exporting point by point would be the best approach, 1) to avoid memory errors and 2) keep the resulting CSV to one point. You can merge all the points together and export the time series per point in one file but that may be difficult to work with once exported...
Here is a working link: https://code.earthengine.google.com/139432f76ae3f6a81b1459762325ef7f
I am trying to create a bubble chart using the JS HighChart in Angular2+. Whenever there are more than 50 data points (bubbles), the graph breaks. There are the correct number of bubbles in the correct positions (x,y plots) with all different colors but the sizes are all the same even though the z-values are all different. (I am outputing the z-values in a tooltip and the z-values are accurate)
This function is how I am passing in data to the high-chart configuration.
setSeries() {
this.objData = []
this.Data.forEach(element => {
var x= element['xVal'];
var y = element['yVal'];
var z = element['zVal'].toFixed(0);
var name = element['seriesName'].trim();
var newData =[{
x:x,
y:y,
z:+z,
}]
// SetSeriesData is how i am creating the obj to pass into series=[] in highchart configuration
if(i<50) //If I comment this condition, the graph breaks. Right now, the graph is working properly
this.setSeriesData(sumData, name, this.objData)
i++
})
this.options.series = this.objData;
this.generateChart();
}
This is my setSeriesData function.
setSeriesData(graphData: any, dataName: any, objData: any){
var obj = {};
obj['name'] = dataName;
obj['data'] = graphData;
obj['events'] = {click: function(e) {
//takes me to another link
}};
objData.push(obj)
}
In the above function, I configured the chart so that when you click the bubble, it takes you to another page. When the data points >50, this click functionality is not working either. In addition, the fillOpacity is not correct.
Just a few things to point out
1. I am using Angular 2+
2. The discovered issues are, fillOpacity, click, and size based on z-value.
3. It works perfectly when the data points are less than 50
How can I fix this?
I am trying to use my own data in a nvD3 stacked area chart. The sample data format from the Angular nvD3 site has a format like this:
[{
"key":"Series 1",
"values":[[1025409600000,0],[1028088000000,-6.3382185140371]]
},
{
"key":"Series 2",
"values":[[1025409600000,0],[1028088000000,0]]
}]
I have data coming from my database in this format:
[{
"Loc_Cnt":6,"Num_Cars":552,"Num_Employees":34,"active_month":"2017-10-01T00:00:00"
},
{
"Loc_Cnt":4,"Num_Cars":252,"Num_Employees":14,"active_month":"2017-11-01T00:00:00"
}]
I am trying to graph from my data, three series (Series 1: Flt_Cnt, Series 2: Num_Cars, Series 3: Num_Employees). For each series, the X axis value being the active_month date, and the Y axis value being the series value.
How can I either A) convert my data to look like the sample data easily, or B) use my data as is in the AngularJs nvd3 chart? I feel a .forEach on the array would not be efficient for larger data sets, and not as easy to read. I tried to use d3.nest in some way, but haven't been able to get a correct format. Thanks for your help!
It's not elegant, but I brute forced a way to my solution. If there are any better solutions, please do let me know.
var Loc_Cnt = [];
var Num_Cars = [];
var Num_Employees = [];
var obj = {};
//arr is the array of values in my format
arr.forEach(function (element) {
//need the date in milisecond format
var date = new Date(element.active_month);
var time = date.getTime();
//load corresponding arrays
Loc_Cnt.push([time, element.Loc_Cnt]);
Num_Cars.push([time, element.Num_Cars]);
Num_Employees.push([time, element.Num_Employees]);
});
//load each key/values pair into new object
obj["Loc_Cnt"] = Loc_Cnt;
obj["Num_Cars"] = Num_Cars;
obj["Num_Employees"] = Num_Employees;
//d3.entries creates an object of key/VALUEs
arrRollup = d3.entries(obj);
//change the key word values to value
var i;
for (i = 0; i < arrRollup.length; i++) {
arrRollup[i].values = arrRollup[i]['value'];
delete arrRollup[i].value;
}
The data:
A 'premiums.tsv' file, with two columns, 'BiddingDate' and 'CategoryA'
What I'm trying to do:
Using d3, display in a table or divs just the latest BiddingDate and the CategoryA value that corresponds to that latest BiddingDate.
I've got a chart on the page, that works fine. I can also get a table of all the values. That works fine too. But I just can't figure out how to isolate the data corresponding to the latest date value and then display it. Would really appreciate any help. Thanks!
I solved it by using data.map to map the data into a new array, then simply calling the last item in the array.
I only ever have 241 data points, but for datasets of variable size, you can just use .length to figure out the latest data point.
var allDates = [];
allDates = data.map(function(d) {return d.BiddingMonth;});
var latestDate = allDates[240];
var allCatA = [];
allCatA = data.map(function(d) {return d.CategoryAPremium;});
var latestCatA = allCatA[240];
Then all I had to do was to print latestDate and latestCatA wherever I wanted.
d3.select("#lateDate").text("$ " + latestDate);
d3.select("#lateA").text("$ " + latestCatA);