I have a heatmap where the X and Y axis are populated dynamically. I have used the following code to render a circle at the intersection of X and Y. This is based off a fiddle where it was done for a scatter plot and worked in pre-5 highcharts. Now it doesn't work. Any help would be greatly appreciated.
This is the portion of the code that is added to the sales heatmap:
var circleX = 'Lukas';
var circleY = 'Wednesday';
var circleR = 1.0;
function addCircle(chart){
if (this.circle){
$(this.circle.element).remove();
}
var pixelX = chart.xAxis[0].toPixels(chart.xAxis[0].categories.indexOf(circleX));
var pixelY = chart.yAxis[0].toPixels(chart.yAxis[0].categories.indexOf(circleY));
var pixelR = chart.xAxis[0].toPixles(circleR) - chart.xAxis[0].toPixels(0);
Here is a fiddle: Fiddle
Related
Please, how do get positive values of NDVI for my study area?
Please see my Javascript code below. Unfortunately, after running the code, the NDVI chart generated are mostly negative. (See image attached). How do I correct this please?
Image of generated NDVI chart
See my Javascript code:
var startDate = '2001-01-01'
var endDate = '2020-12-31'
var images = landsat7.filter(ee.Filter.date(startDate, endDate));
print(images);
var ndvi = function(image){
var ndv = image.normalizedDifference(['B4', 'B3']);
// for Sentinel, use var scaled = image.normalizedDifference(['SR_B4', 'SR_B3']);
return ndv.copyProperties(image, ['system:index', 'system:time_start'])
}
var ndvi = images.map(ndvi)
print(ndvi);
var nd = ndvi.max().clip(finni);
Map.addLayer(nd, {min:0,max:1,palette:['white', 'Green']}, 'NDVI');
var chart = ui.Chart.image.seriesByRegion({
imageCollection:ndvi,
regions:finni,
reducer: ee.Reducer.mean(),
scale:30,
});
print(chart);
I'm trying to write a code which let my users define some points on the map and once they created a point, the program should draw a circle with defined diameter(in kilometers or ... ) around the point.
I can draw a point but I don't know how I could handle what I said.
Here is an example about what I want:
Use the following function to create circular points around a point.
//pass the
//#pointX,
//#pointY,
//#radius of circle (in your case diameter/2)
//#pointsToFind this is how detail you want the circle to be (360 if you want one point for each rad)
function createCirclePointCoords(circleCenterX,circleCenterY,circleRadius,pointsToFind){
var angleToAdd = 360/pointsToFind;
var coords = [];
var angle = 0;
for (var i=0;i<pointsToFind;i++){
angle = angle+angleToAdd;
console.log(angle);
var coordX = circleCenterX + circleRadius * Math.cos(angle*Math.PI/180);
var coordY = circleCenterY + circleRadius * Math.sin(angle*Math.PI/180);
coords.push([coordX,coordY]);
}
return coords;
}
And then create a polygon out of the coordinates returned from the function
var circleCoords = createCirclePointCoords(0,0,1000,360);
var geom = new ol.geom.Polygon([
circleCoords
])
Hi i need a graph as attached for ios. I am using ios-Chart library(swift alternative of MPAndroidChart) for swift .
I have managed to get these points on the graph using the scatter graph. But i couldn't figure out how will i connect the two vertical points. Any help or early response will be appreciate able.
my current code is :
func drawChart(dataPoints:[String] , value1 :[Double] , value2:[Double])
{
var dataEntries1:[ChartDataEntry] = []
for i in 0..<dataPoints.count {
let dataEntry = ChartDataEntry(value:value1[i] , xIndex : i)
dataEntries1.append(dataEntry)
}
var dataEntries2:[ChartDataEntry] = []
for i in 0..<dataPoints.count {
let dataEntry = ChartDataEntry(value:value2[i] , xIndex : i)
dataEntries2.append(dataEntry)
}
let dataSet1 = ScatterChartDataSet(yVals: dataEntries1, label: "Value1" )
dataSet1 .setColor(UIColor.blueColor())
let dataSet2 = ScatterChartDataSet(yVals: dataEntries2 ,label: "Value2")
dataSet2.setColor(UIColor.greenColor())
var bloodPressureDataSets = [ScatterChartDataSet]()
bloodPressureDataSets.append(dataSet1)
bloodPressureDataSets.append(dataSet2)
let barChartData = ScatterChartData(xVals: dataPoints, dataSets: bloodPressureDataSets)
bpChart.xAxis.labelPosition = .Bottom
bpChart.rightAxis.enabled=false
//barChart.legend.enabled=false
bpChart.descriptionText=""
bpChart.data = barChartData
}
Currently i can see this type of graph using the above code.
I want to join these two vertical points like the graph below,
take a look at scatter chart renderer, drawDataSet func. You can connect the dots there
UPDATE towards your comments:
first, go to ScatterChartRenderer and locate to
internal func drawDataSet(context context: CGContext, dataSet: ScatterChartDataSet)
This is where we calculate the position and draw the shape here
There is a main loop:
for (var j = 0, count = Int(min(ceil(CGFloat(entries.count) * _animator.phaseX), CGFloat(entries.count))); j < count; j++)
{
let e = entries[j]
point.x = CGFloat(e.xIndex)
point.y = CGFloat(e.value) * phaseY
point = CGPointApplyAffineTransform(point, valueToPixelMatrix);
...
}
Here's the iteration of the data entries your provide in the dataSet, we just get the xIndex and y value here and convert it to the coordinate on the screen.
So what you can do is to sub class this renderer, override this function to get what you want.
e.g. You want to connect the data entries(the dot) for the same xIndex, you should first iterate each data set to collect all the entries on same xIndex, use CGPointApplyAffineTransform(point, valueToPixelMatrix) to convert and use CoreGraphics APIs to draw the line. You don't need to worry about the math, the library already gives you the API to convert between data value and the screen coordinate value. You just focus on how to draw the chart.
the method getRadius() of class ol.geom.Circle returns the radius of a circle ;
how can I convert this value into meters ?
I draw a circle on a map using a particular projection (e.g Spherical Mercator, LambertIIe, etc.)
then I convert this geometry into degree to process further treatments such as testing if a point (in degrees) is inside this circle
so getting the radius always in the same unit (meter) from a geometry in degree would be useful
thanks in advance
Jean-Marie
You can use the ol.proj.METERS_PER_UNIT table to get the radius in meters:
var units = map.getView().getProjection().getUnits();
var radiusM = circle.getRadius() * ol.proj.METERS_PER_UNIT[units];
I use the following method to get the radius (getFirstCoordinate referring to the center and getLastCoordinate referring to a point on the perimeter) :
var wgs84Sphere = new ol.Sphere(6378137);
var center=circle.getFirstCoordinate();
var ray=getDistance(center[0],center[1],circle.getLastCoordinate()[0],circle.getLastCoordinate()[1]);
// getDistance returns the distance between 2 points (source : http://openlayers.org/en/v3.7.0/examples/measure.html)
function getDistance(long1,lat1,long2,lat2) {
var c1 = [long1,lat1];
var c2 = [long2,lat2];
return wgs84Sphere.haversineDistance(c1,c2);
}
I'm trying to make a simple app doing something similar to the Layer Spy Example, but instead of a circle flowing the mouse pointer, I would like to do the clipping based on a rectangle which is always centered in the map.
(preferably with "fixed" size" i.e. changes "extent" when zooming)
Any help appreciated
Thanks
Frode
You can do it like in the example that you are referring to. But instead of context.arc() use context.rect() with a fixed position to clip the layer. Something like:
imagery.on('precompose', function(event) {
var ctx = event.context;
var pixelRatio = event.frameState.pixelRatio;
ctx.save();
ctx.beginPath();
var x = ctx.canvas.width / 2 - 100;
var y = ctx.canvas.height / 2 - 100;
ctx.rect(x, y, 100, 100);
ctx.clip();
});
http://jsfiddle.net/eo1c1x78/