We Keep Coding

GEE Animation, print thumbnail black

The following code is conceived to create a thumbnail image of landsat 7 images:
// Feature Collection
var aoi = geometry
print(aoi);
Map.addLayer(aoi);
var centroid = aoi.centroid(1)
print(centroid);
var coors = centroid.coordinates().getInfo()
var x = coors[0]
var y = coors[1];
Map.setCenter(x, y, 10);
// Elaborating the dates
// Getting Temperatures for Every Month
var period = ['-01-01', '-12-01'];
var years = [['1999', '2000'],
['2000', '2001'],
['2001', '2002'],
['2002', '2003'],
['2003', '2004'],
['2004', '2005'],
['2005', '2006'],
['2006', '2007'],
['2007', '2008'],
['2008', '2009'],
['2009', '2010'],
['2010', '2011'],
['2011', '2012'],
['2012', '2013'],
['2013', '2014'],
];
var add_period = function(year){
var start_date = period[0];
var end_date = period[1];
return [year[0] + start_date, year[1] + end_date];
};
var concatenate_year_with_periods = function(years, period){
return years.map(add_period);
};
var Dates = concatenate_year_with_periods(years, period);
/**********************************************************************
Landsat 7
***********************************************************************/
var visualization = {
bands: ['B4', 'B3', 'B2'],
min: 0.0,
max: 0.3,
};
var visualization_ = {
bands: ['B4_median', 'B3_median', 'B2_median'],
min: 0.0,
max: 0.3,
gamma: [0.95, 1.1, 1]
};
// Applies scaling factors.
var cloudMaskL7 = function(image) {
var qa = image.select('BQA');
var cloud = qa.bitwiseAnd(1 << 4)
.and(qa.bitwiseAnd(1 << 6))
.or(qa.bitwiseAnd(1 << 8));
var mask2 = image.mask().reduce(ee.Reducer.min());
return image
//.select(['B3', 'B4'], ['Red', 'NIR'])
.updateMask(cloud.not()).updateMask(mask2)
.set('system:time_start', image.get('system:time_start'));
};
var dataset = ee.ImageCollection('LANDSAT/LE07/C01/T1_TOA')
.filterDate('1999-01-01', '2020-12-31')
.filterBounds(aoi)
//.map(applyScaleFactors)
.map(cloudMaskL7)
.map(function(image){return image.clip(aoi)});
// Creating composites using median pixel value
var median_yearly_landsat_7 = function(start, end){
var dataset_ = dataset.filter(ee.Filter.date(start, end));
var median_yearly = dataset_.reduce(ee.Reducer.median());
return median_yearly;
};
var composite_name_list_l7 = ee.List([]);
var apply_monthly_composite = function(date_list){
var start = date_list[0];
var end = date_list[1];
var output_name = start + "TO" + end + "_LANSAT_7";
var composite = median_yearly_landsat_7(start, end);
composite_name_list_l7 = composite_name_list_l7.add([composite, output_name]);
Map.addLayer(composite, visualization_, output_name, false);
Export.image.toDrive({
image: composite,
description: output_name,
fileFormat: 'GeoTIFF',
crs : 'EPSG:4326',
folder : 'LANDSAT_LST_LAS_LOMAS',
region: aoi
});
return 0;
};
Dates.map(apply_monthly_composite);
/******************************************************************
// Animation gif
// Create RGB visualization images for use as animation frames.
/******************************************************************/
var text = require('users/gena/packages:text');
var annotated_collection_list = ee.List([])
var annotations = [
{position: 'left', offset: '0.25%', margin: '0.25%', property: 'label', scale: 1.5} //large scale because image if of the whole world. Use smaller scale otherwise
];
var create_annotated_collection = function(image_and_id) {
var img = image_and_id[0];
var image_id = image_and_id[1];
console.log(img);
console.log(image_id);
var img_out = img.visualize(visualization_)
.clip(aoi)//.paint(municipalities, 'FF0000', 2)
.set({'label': image_id});
Map.addLayer(img_out);
var annotated = text.annotateImage(img_out, {}, Bayern, annotations);
annotated_collection.add(annotated);
return 0;
};
var municipalities_geom = geometry;
var n = composite_name_list_l7.size().getInfo();
print(n);
for (var i = 0; i < n; i++) {
var img_info = ee.List(composite_name_list_l7.get(i));
print(img_info);
var img = ee.Image(img_info.get(0));
var img_id = ee.String(img_info.get(1));
var year = ee.String(ee.List(img_id.split("-").get(0)));
var month = ee.String(ee.List(img_id.split("-").get(1)));
var img_id_ = year.getInfo() + "_" + month.getInfo();
var img_out = img.visualize(visualization_)
.set({'label': img_id_});
var annotated = text.annotateImage(img_out, {}, municipalities_geom, annotations);
Map.addLayer(annotated);
var annotated_collection_list = annotated_collection_list.add(annotated)
}
var annotated_col = ee.ImageCollection(annotated_collection_list)
// Define GIF visualization parameters.
var gifParams = {
'region': geometry,
'dimensions': 254,
'crs': 'EPSG:32632',
'framesPerSecond': 1
};
// Print the GIF URL to the console.
print(annotated_col.getVideoThumbURL(gifParams));
// Render the GIF animation in the console.
print(ui.Thumbnail(annotated_col, gifParams));
However, this thumbnail appears black, but the images I load into the map project, are in the color visualization parameters that I need.
The geometry parameter is a Polygon I drew using the drawing tool. The coordinates are below:
Coordinates: List (1 element)
0: List (5 elements)
0: [-82.35277628512759,8.432445555054713]
1: [-82.314667459444,8.432445555054713]
2: [-82.314667459444,8.460632259476993]
3: [-82.35277628512759,8.460632259476993]
4: [-82.35277628512759,8.432445555054713]
Could someone tell my why the thumbnail appears black?

Adding annotations to Google candlestick chart (Posted solution triggers TypeError)

I am trying to add some annotations to a Google Candlestick chart. I noticed someone had already asked this same question (Adding annotations to Google Candlestick chart). The user Aperçu replied with a detailed solution to extend the chart and add annotations since the chart doesn't have any such feature built in. However, when I try this solution I get an error "TypeError: document.querySelectorAll(...)[0] is undefined"
Here is my code:
chartPoints = [
['Budget', 0, 0, 9999, 9999, 'foo1'],
['Sales', 0, 0, 123, 123, 'foo2'],
['Backlog', 123, 123, 456, 456, 'foo3'],
['Hard Forecast', 456, 456, 789, 789, 'foo4'],
['Sales to Budget', 789, 789, 1000, 1000, 'foo5']
];
var data = google.visualization.arrayToDataTable(chartPoints, true);
data.setColumnProperty(5, 'role', 'annotation');
var options = {
legend: 'none',
bar: { groupWidth: '40%', width: '100%' },
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' },
risingColor: { strokeWidth: 0, fill: '#0f9d58' }
}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
// attempt to use Aperçu's solution
const bars = document.querySelectorAll('#chart_div svg > g:nth-child(5) > g')[0].lastChild.children // this triggers a TypeError
for (var i = 0 ; i < bars.length ; i++) {
const bar = bars[i]
const { top, left, width } = bar.getBoundingClientRect()
const hint = document.createElement('div')
hint.style.top = top + 'px'
hint.style.left = left + width + 5 + 'px'
hint.classList.add('hint')
hint.innerText = rawData.filter(t => t[1])[i][0]
document.getElementById('chart_div').append(hint)
}
I want the chart to show the last piece of data next to the bars (i.e. "foo1", "foo2", etc)

each candle or bar will be represented by a <rect> element
we can use the rise and fall colors to separate the bars from other <rect> elements in the chart
there will be the same number of bars as rows in the data table
once we find the first bar, we can use rowIndex of zero to pull values from the data
we need to find the value of the rise / fall, to know where to place the annotation
then use chart methods to find the location for the annotation
getChartLayoutInterface() - Returns an object containing information about the onscreen placement of the chart and its elements.
getYLocation(position, optional_axis_index) - Returns the screen y-coordinate of position relative to the chart's container.
see following working snippet
two annotations are added
one for the difference in rise and fall
and the other for the value in the column with annotation role
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var chartPoints = [
['Budget', 0, 0, 9999, 9999, 'foo1'],
['Sales', 0, 0, 123, 123, 'foo2'],
['Backlog', 123, 123, 456, 456, 'foo3'],
['Hard Forecast', 456, 456, 789, 789, 'foo4'],
['Sales to Budget', 789, 789, 1000, 1000, 'foo5']
];
var data = google.visualization.arrayToDataTable(chartPoints, true);
data.setColumnProperty(5, 'role', 'annotation');
var options = {
legend: 'none',
bar: { groupWidth: '40%', width: '100%' },
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' },
risingColor: { strokeWidth: 0, fill: '#0f9d58' }
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.CandlestickChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var annotation;
var bars;
var chartLayout;
var formatNumber;
var positionY;
var positionX;
var rowBalance;
var rowBottom;
var rowIndex;
var rowTop;
var rowValue;
var rowWidth;
chartLayout = chart.getChartLayoutInterface();
rowIndex = 0;
formatNumber = new google.visualization.NumberFormat({
pattern: '#,##0'
});
bars = container.getElementsByTagName('rect');
for (var i = 0; i < bars.length; i++) {
switch (bars[i].getAttribute('fill')) {
case '#a52714':
case '#0f9d58':
rowWidth = parseFloat(bars[i].getAttribute('width'));
if (rowWidth > 2) {
rowBottom = data.getValue(rowIndex, 1);
rowTop = data.getValue(rowIndex, 3);
rowValue = rowTop - rowBottom;
rowBalance = Math.max(rowBottom, rowTop);
positionY = chartLayout.getYLocation(rowBalance) - 6;
positionX = parseFloat(bars[i].getAttribute('x'));
// row value
annotation = container.getElementsByTagName('svg')[0].appendChild(container.getElementsByTagName('text')[0].cloneNode(true));
annotation.textContent = formatNumber.formatValue(rowValue);
annotation.setAttribute('x', (positionX + (rowWidth / 2)));
annotation.setAttribute('y', positionY);
annotation.setAttribute('font-weight', 'bold');
// annotation column
annotation = container.getElementsByTagName('svg')[0].appendChild(container.getElementsByTagName('text')[0].cloneNode(true));
annotation.textContent = data.getValue(rowIndex, 5);
annotation.setAttribute('x', (positionX + (rowWidth / 2)));
annotation.setAttribute('y', positionY - 18);
annotation.setAttribute('font-weight', 'bold');
rowIndex++;
}
break;
}
}
});
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts Get maximum scale

I'm trying to make an all positive bubble chart have quadrants by drawing the quadrants using the baseline property like so:
var dataT = google.visualization.arrayToDataTable(.....);
var options = {
hAxis: {title: 'h axis',baseline:100},
vAxis: {title: 'v axis',baseline:20},
...}
var chart = new google.visualization.BubbleChart(...);
chart.draw(dataT,options);
Except the graph will keep changing depending on the query so the baselines will not be the same for all the graphs. I would like to be able to get the max axis value and divide it by 2 to set the baselines right in the middle of each axis.
Example:
var options = {
hAxis: {title: 'h axis',baseline:max_h_axis/2},
vAxis: {title: 'v axis',baseline:max_v_axis/2},
...
Is there any way of knowing the max axis values of the graph before drawing the graph?

the getColumnRange method works for this...
Returns the minimal and maximal values of values in a specified column. The returned object has properties min and max. If the range has no values, min and max will contain null.
you can also use this information to produce your own axis tick marks.
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[8, 120],
[4, 155],
[11, 140],
[4, 205],
[3, 35],
[6, 78]
]);
var ticksX = [];
var ticksY = [];
var numberOfTicks = 10;
var rangeX = data.getColumnRange(0);
var rangeY = data.getColumnRange(1);
var stepX = Math.ceil((rangeX.max - rangeX.min) / numberOfTicks);
for (var i = rangeX.min - stepX; i <= rangeX.max + stepX; i = i + stepX) {
ticksX.push(i);
}
var stepY = Math.ceil((rangeY.max - rangeY.min) / numberOfTicks);
for (var i = rangeY.min - stepY; i <= rangeY.max + stepY; i = i + stepY) {
ticksY.push(i);
}
var baseX = Math.ceil((rangeX.max - rangeX.min) / 2) + rangeX.min;
var baseY = Math.ceil((rangeY.max - rangeY.min) / 2) + rangeY.min;
var options = {
hAxis: {
title: 'h axis',
baseline: baseX,
ticks: ticksX
},
vAxis: {
title: 'v axis',
baseline: baseY,
ticks: ticksY
},
legend: 'none',
height: 600,
width: 600
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Javsascript HTML Google Chart

I have a json with the name of each server and 3 values: memory, load and cpu.
[
{
"server": "Server1",
"Load": "0.04",
"Mem": "64.46",
"Idle": "97.00"
},
{
"server": "Server2",
"Load": "0.01",
"Mem": "64.79",
"Idle": "97.49"
}
]
I'm having some issues trying to create Google Chart dynamically. Looks like Javascript can't create variables using the loop variable 'i'. See my code below:
var obj = JSON.parse(jsonData);
for (i in obj)
{
var data_table[i] = new google.visualization.DataTable();
data_table[i].addColumn('string', 'Label');
data_table[i].addColumn('number', 'Value');
var server = obj[i].server;
var Load = parseFloat(obj[i].Load);
var Mem = parseFloat(obj[i].Mem);
var Idle = parseFloat(obj[i].Idle);
data_table[i].addRow([server, Load]);
data_table[i].addRow([server, Mem]);
data_table[i].addRow([server, Idle]);
var options = {width: 1500, height: 1000, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5};
var chart[i] = new google.visualization.Gauge(document.getElementById('chart_div'+ i +));
chart[i].draw(data_table+i+, options); ' );
$('body').append('<div id="div'+ i +'" />')
}
I want to create the Chart dynamically to control these chart's later in the javascript/html and also and most important because my json is a little big so I want to avoid to have to create each chart one by one, or have to separate the json for each server.
Any help will be really appreciated. ;-)

Try it like this...
// load json
var obj = JSON.parse(jsonData);
// define arrays to store data and charts
var data_tables = [];
var google_charts = [];
// this is the div that will store all of the charts
var chart_area;
chart_area = document.getElementById('chart_div');
// set the chart options
var chart_options;
chart_options = {
width: 1500,
height: 1000,
redFrom: 90,
redTo: 100,
yellowFrom: 75,
yellowTo: 90,
minorTicks: 5
};
// process json array -- fyi: use 'in' keyword for object keys
for (var i = 0; i < obj.length; i++) {
var chart_container; // chart container for this json instance
var data_table; // data table for this json instance
var google_chart; // google chart for this json instance
// load data table
data_table = new google.visualization.DataTable();
data_table.addColumn('string', 'Label');
data_table.addColumn('number', 'Value');
data_table.addRow([obj[i].server, parseFloat(obj[i].Load)]);
data_table.addRow([obj[i].server, parseFloat(obj[i].Mem)]);
data_table.addRow([obj[i].server, parseFloat(obj[i].Idle)]);
// save it to the array
data_tables.push(data_table);
// create the container for this chart
chart_container = document.createElement('DIV');
chart_area.appendChild(chart_container);
// create -- save -- draw the chart
google_chart = new google.visualization.Gauge(chart_container);
google_charts.push(google_chart);
google_chart.draw(data_table, chart_options);
}
// access the charts / data later using arrays --> data_tables and google_charts

Google pie chart attempts to draw before API finish loading

I am having some problem with Google chart. Here is the codes for my pie chart:
EDITED PORTION
function displayExistHospital(){
queryTask = new esri.tasks.QueryTask(overlayURLs["moh_hospital_WSA2"] + "/10");
query = new esri.tasks.Query();
query.returnGeometry = false;
query.where = "1=1";
query.outFields = ["*"];
queryTask.execute(query, getExistHospitalData);
document.getElementById("tabsLabel").style.display = "block";
document.getElementById("tabsLabel3").innerHTML = "Age > 60";
document.getElementById("tabsLabel2").innerHTML = "SCPR";
document.getElementById("tabsLabel1").innerHTML = "Total Pop";
}
google.load("visualization", "1", {packages:["corechart"], callback: displayExistHospital});
var arrList = [];
function getExistHospitalData(results){
arrList = [];
var features = results.features;
dojo.forEach(features, function(feature){
var tempArr = [];
var total_SCPR = feature.attributes.SUM_SUM_TOTAL_SCPR;
var total_NR = feature.attributes.SUM_SUM_TOTAL_NR;
var time = feature.attributes.FIRST_E_BREAK;
tempArr.push(time,total_SCPR,total_NR);
arrList.push(tempArr);
});
displayExistHospitalGraph(arrList);
}
function displayExistHospitalGraph(arrListData){
var total_ten = parseInt(arrListData[0][1]) + parseInt(arrListData[0][2]);
var total_tentoFifteen = arrListData[1][1] + arrListData[1][2];
var total_fifteenTwenty = arrListData[2][1] + arrListData[2][2];
var total_greaterTwenty = arrListData[3][1] + arrListData[3][2];
var ppl_num = total_ten + total_tentoFifteen;
var total_pop = total_ten + total_tentoFifteen + total_fifteenTwenty + total_greaterTwenty;
var dataOne = google.visualization.arrayToDataTable([
['Population', 'Percentage'],
['<10 mins' +getPercentageInString(total_ten,total_pop) , total_ten],
['10 - 15 mins' +getPercentageInString(total_tentoFifteen,total_pop), total_tentoFifteen],
['15 - 20 mins' +getPercentageInString(total_fifteenTwenty,total_pop), total_fifteenTwenty],
['>20 mins' +getPercentageInString(total_greaterTwenty,total_pop) , total_greaterTwenty],
]);
var percentage = (((total_ten / total_pop) + (total_tentoFifteen / total_pop)) * 100).toFixed(1);
var title = "Total Population ("+total_pop.toLocaleString()+") Catchment By Drive-Time(Existing)";
var optionsOne = {
chartArea: {
width: 350,
height: 200,
top: 20,
left: 10
},
fontName: 'Arial',
fontSize: getFontSize(),
isStacked:false,
title: title,
width: 400,
height: 200,
sliceVisibilityThreshold: 0,
colors:['#004CA8','#437DC4','#96B8E0','#FFFFFF']
};
document.getElementById('hospitalBoxContent').innerHTML= "</br><p ><span style='font-size:2em; color:#00297A; font-family:ArialVerdana; font-weight:bold;'>"+percentage+"% ("+ppl_num.toLocaleString()+")</span > of residents stay within <span style='font-size:2em; color:#00297A; font-family:ArialVerdana; font-weight:bold;'>15-min</span> drive-time to a public hospital </p><br/>";
var chart = new google.visualization.PieChart(document.getElementById('displayHospitalGraph'));
chart.draw(dataOne, optionsOne);
}
The chart works but somehow the percentage on the pie chart was cut off as the picture shown below:
I wonder is there any way to adjust the percentage for example, shift it nearer to the centre so that it won't cut off? I know the reason is because the chart was trying to draw before the API finish loading because this will only occur for the first load. After switching a few charts, the percentage label will be placed nicely inside the chart.
Credits to #asgallant and #Yoann as they helped me to spot the error but after added the codes, it still does not solve.
Thanks in advance.

Please change the last color #FFFFFF to any other color #FFFFFF this color is same as background

Some elements are cut off in you screenshot.
for the title, you need to increase top in optionsOne.chartArea (and height)
for the legend, increase width or reduce left in optionsOne.chartArea
the last pie item is set up on white colors:['#004CA8','#437DC4','#96B8E0','#FFFFFF'], change the font-colour or the last colour to avoid white on white
EDIT :
I created a http://jsfiddle.net/X24Sy/3/ with your code, I cannot reproduce your issue. Do you have any CSS for your container?
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart(){
var total_ten=15,total_tentoFifteen=35,total_fifteenTwenty=50,total_greaterTwenty=10;
var ppl_num = total_ten + total_tentoFifteen;
var total_pop = total_ten + total_tentoFifteen + total_fifteenTwenty + total_greaterTwenty;
var dataOne = google.visualization.arrayToDataTable([
['Population', 'Percentage'],
['<10 mins' +getPercentageInString(total_ten,total_pop) , total_ten],
['10 - 15 mins' +getPercentageInString(total_tentoFifteen,total_pop), total_tentoFifteen],
['15 - 20 mins' +getPercentageInString(total_fifteenTwenty,total_pop), total_fifteenTwenty],
['>20 mins' +getPercentageInString(total_greaterTwenty,total_pop) , total_greaterTwenty],
]);
var percentage = (((total_ten / total_pop) + (total_tentoFifteen / total_pop)) * 100).toFixed(1);
var title = "Total Population ("+total_pop.toLocaleString()+") Catchment By Drive-Time(Existing)";
var optionsOne = {
chartArea: {
width: 350,
height: 200,
top: 20,
left: 10
},
fontName: 'Arial',
fontSize: 12,
legend: { alignment: 'center', textStyle: { fontSize: 12} },
// pieSliceText: 'none', //label - > show the name on the pie
tooltip: {
trigger: 'focus'// focus -> tooltip will be displayed when the user hovers over an element.
// none -> tooltip is not displayed
},
isStacked:false,
title: title,
width: 350,
height: 200,
sliceVisibilityThreshold: 0,
colors:['#004CA8','#437DC4','#96B8E0','#FFFFFF']
};
var chart = new google.visualization.PieChart($('#displayHospitalGraph')[0]);
chart.draw(dataOne, optionsOne);
}

The problem is in this:
function getExistHospitalData(results){
arrList = [];
var features = results.features;
dojo.forEach(features, function(feature){
var tempArr = [];
var total_SCPR = feature.attributes.SUM_SUM_TOTAL_SCPR;
var total_NR = feature.attributes.SUM_SUM_TOTAL_NR;
var time = feature.attributes.FIRST_E_BREAK;
tempArr.push(time,total_SCPR,total_NR);
arrList.push(tempArr);
});
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(displayExistHospitalGraph(arrList));
}
First, you want to call google.load outside of any other functions. Second, this line:
google.setOnLoadCallback(displayExistHospitalGraph(arrList));
calls your displayExistHospitalGraph function with arrList as an argument, and passes it's return value (null) to google.setOnLoadCallback. This means that your drawing function is being executed immediately, not in the callback. Try this approach instead:
function getExistHospitalData(results){
arrList = [];
var features = results.features;
dojo.forEach(features, function(feature){
var tempArr = [];
var total_SCPR = feature.attributes.SUM_SUM_TOTAL_SCPR;
var total_NR = feature.attributes.SUM_SUM_TOTAL_NR;
var time = feature.attributes.FIRST_E_BREAK;
tempArr.push(time,total_SCPR,total_NR);
arrList.push(tempArr);
});
displayExistHospitalGraph(arrList);
}
function init () {
// get "results" and feed them to getExistHospitalData
getExistHospitalData(results);
}
google.load("visualization", "1", {packages:["corechart"], callback: init});