Is it possible to create annotations without knowledge of y value?
I have a chart with series and annotations which I want to show on the chart. But I only have the x value and want the annotation to have the same y value as the chart has on that x.
I tried to find the answer in the documentation, but haven't found it. I'm thinking of somehow fining the y value by knowing x, and then inserting the annotation at that point.
I created an example here
You should add this annotation dynamically inside the load callback inside which you can calculate the annotation position because this function is triggered after the chart has been initialized.
chart: {
events: {
load() {
let chart = this,
y;
chart.series[0].points.forEach((point) => {
if (point.x === 1572566400000) {
console.log(point);
y = point.y;
}
});
chart.addAnnotation({
shapeOptions: {},
shapes: [
{
src: "https://www.highcharts.com/samples/graphics/sun.png",
type: "image",
width: 30,
height: 30,
point: {
x: 1572566400000,
y: y,
xAxis: 0,
yAxis: 0
}
}
]
});
}
}
}
Demo: https://codesandbox.io/s/epic-kalam-9qzf3?file=/src/App.js
API: https://api.highcharts.com/class-reference/Highcharts.Chart#addAnnotation
API: https://api.highcharts.com/highcharts/chart.events.load
Related
I have to customize the label of a d3plus-react series, the customization will be pretty close to the original one with the label and the percentage but instead of taking the name from the id as the original does I will take it from another field of the object (name).
The object has this structure:
id: string
name: string
value: number
parent: string
and that's my Treemap config:
const methods = {
data: propsData,
groupBy: ['parent', 'id'],
size: 'value',
tooltipConfig: {
title: (d) => `${d.parent} - <span>${d.name}</span>`,
},
legend: true,
shapeConfig: {
label: (d) => {
console.log(d);
return [d.name];
},
},
};
The problem is that I don't know how to modify the label of the tile without touching the shared percentage, I've searched through the docs but I haven't found nothing relevant.
Does anyone know if there are some official methods for doing this or I'll have to do it myself?
Desired result
I've found out that you have access also to the percentage, the code will be as following
const methods = {
data: propsData,
groupBy: ['parent', 'id'],
size: 'value',
tooltipConfig: {
title: (d) => `${d.parent} - <span>${d.name}</span>`,
},
legend: true,
shapeConfig: {
label: (d) => {
return [d.customProperty, d.percentage];
},
},
}
Instead of the name I've used a custom property previously added to the data object so the series have the desired name
I am working with Chartjs2- React. When I click on a link "NursingObs" it loads a bubble chart with appropriate points.
The second time I click the same link "NursingObs" it loads only the latest data and the rest disappears.
const NursingObsComponent = ({
NursingObservations,
n = [],
i,
}) => {
const data = {
datasets:
//For loop to get all multiple- data for the chart
(function(NursingObservations) {
var out = [];
var rows = 0;
for (var i = 0; i < NursingObservations.length; i++) {
rows = rows + 100;
out.push({
label: "OxygenSaturation",
pointStyle: o2sat,
yAxisID: 'y-axis-1',
data: [{
x: rows,
y: NursingObservations[i].oxygensaturation,
r: 5
}]
});
out.push({
label: "Temperature",
pointStyle: temp,
yAxisID: 'y-axis-2',
data: [{
x: rows,
y: NursingObservations[i].temperature,
r: 5
}]
});
out.push({
label: "Pulse",
pointStyle: heart,
yAxisID: 'y-axis-1',
data: [{
x: rows,
y: NursingObservations[i].pulse,
r: 5
}]
});
}
return out;
})(NursingObservations)
};
return ( <
div >
//Bubble chart to display all the data
<
Bubble data = {
data
}
options = {
options
}
width = "1000"
height = "500" / >
<
/div>
);
};
export default NursingObsComponent;
Click on the link second or any number of times same values should be retained in the chart, it should display all the values.
Instead only the latest data is displayed on the chart rest disappears.
We have a requirement where-in we have to provide drag drop facility for markers / points. The example https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/ works perfect for 1 marker. Because it is hardcoded to geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
However, in a multi point scenario how to set the geojson for respective feature which was dragged?
Kindly let know if any further details required.
Thankx
You can achieve that by storing the current marker and applying the change on it during onMove.
I have added a property to each object to define an id:
var geojson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [0, 0]
},
properties: {
id: 1
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [0, 1]
},
properties: {
id: 2
}
}
]
};
On the onmousedown event on point layer, store the current feature id
Here features[0] is usable because the event fired on point so the first feature is ever the clicked one
map.on("mousedown", "point", function(e) {
currentFeatureId = e.features[0].properties.id;
// Prevent the default map drag behavior.
e.preventDefault();
canvas.style.cursor = "grab";
map.on("mousemove", onMove);
map.once("mouseup", onUp);
});
After that, in the onMove method you can use it to move the right feature :
function onMove(e) {
var coords = e.lngLat;
// Set a UI indicator for dragging.
canvas.style.cursor = "grabbing";
// Update the Point feature in `geojson` coordinates
// and call setData to the source layer `point` on it.
var currentMarker = geojson.features.find(obj => {
return obj.properties.id === currentFeatureId
})
currentMarker.geometry.coordinates = [coords.lng, coords.lat];
map.getSource("point").setData(geojson);
}
See working exemple here : https://codepen.io/tmacpolo/pen/moxmpZ
I'm trying to dynamically add multiple GeoJSON data to my map. as shown below. However I don't see the data getting rendered.
$http.get("/kp-data").success(function(data, status){
angular.forEach(data, function(k,v){
$scope.geojson[k.carId] = {data : k.data,
resetStyleOnMouseout: true,
style: {
fillColor: k.color,
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
}
});
In this example the geojson data USA and JPN is hardcoded. I modified the code for dynamic addition. The code works if I modified as below for a single geojson data
$http.get("/kp-data").success(function(data, status){
angular.forEach(data, function(k,v){
if(v==1){
$scope.geojson = {data : k.data,
resetStyleOnMouseout: true,
style: {
fillColor: k.color,
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
}
}
});
Do you have some error message ?
And you should declear $scope.geojson as an object before you call angular.forEach function.
like this .
After declare $scope.jeojson = [], length of this is 0, so in loop $scope.jeojson[index] is undefined (index # 0). I think you should try something as: $scope.jeojson.push(json)...
And, i recommend you to use "for" rather than "angular.forEach". Hope it good for you!
I am trying to change the points of selected object that in the exp below.
$scope.players = [{
name: 'Kobe',
points: 10,
asists: 0,
rebounds: 0
}, {
name: 'Jordan',
points: 20,
asists: 0,
rebounds: 0
}, {
name: 'Grant',
points: 30,
asists: 0,
rebounds: 0
},
];
and I assign an object selected with its name.
if($scope.playerName == $scope.players[i].name){
$scope.selectedPlayerPoints = $scope.players[i].points;
$scope.selectedPlayerAsists = $scope.players[i].asists;
$scope.selectedPlayerRebounds = $scope.players[i].rebounds;
}
but I can't update them:
$scope.selectedPlayerPoints.push(playerPoints);
To make it more clear please check: http://plnkr.co/edit/B8Nydni586Se79fDpjnq?p=preview
How it works:
1-click on a player
2-click on points = each time 2 points will be added.
3-as you add more point, it will change the object dynamically..(but that is the problem..)
Thnx in advance!
I'm not exactly sure what you want to achieve, but my guess is you have trouble with saving player points.
I've updated your plunkr. Basically instead of passing primitive values:
$scope.selectPlayer = function(name, points, asists, rebounds) { ... }
you should pass object reference:
$scope.selectPlayer = function(player) { ... }