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!
Related
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
I have an object inside my function
let someStyle = {
width: 200,
backgroundColor: 'blue'
height: 40,
}
and then I am adding properties to it
someStyle.borderRadius: 15
here flow is throwing error that cannot assign 15 to someStyle.borderRadius beacuse it is missing in object literal
How can I disable flow for the someStyle object? I tried // #flow-disable just above someStyle and it didn't work
Also, if we do //#flow is it mandatory to define the type for all objects? inside my stateless function?
There's a few ways to solve this:
Option 1: If your style object always has this shape of width, height, backgroundColor, and an optional borderRadius, then you'd probably want to just define the type of the object like so:
/* #flow */
type Style = {
width: number,
height: number,
backgroundColor: string,
borderRadius?: number
}
let someStyle: Style = {
width: 200,
backgroundColor: 'blue',
height: 40,
}
someStyle.borderRadius = 15;
Option 2: If your style object does not always have this shape, but could be any generic style applied to it, then you will want something more generic.
/* #flow */
type Style = {
[string]: mixed
}
let someStyle: Style = {
width: 200,
backgroundColor: 'blue',
height: 40,
}
someStyle.borderRadius = 15;
Option 3: If you just want to suppress the error, you can do so like this typically:
/* #flow */
let someStyle = {
width: 200,
backgroundColor: 'blue',
height: 40,
}
// $FlowFixMe
someStyle.borderRadius = 15;
I am using an array in state like this -
this.state = {
shapes : []
}
and shapes array contains data in lists like this-
[
{x: 0, y: 0, height: 10, width: 10},
{x: 10, y: 10, height: 11, width: 11},
...and many more
]
I have taken the x and y coordinates and changed their values.
For ex - for item 1 new values =>
x = 15 and y = 15
How can I update these values in the state?
Sorry about my improper question. I can't think of another way of asking this question.
You have to give while array value as new in set state
this.setState((state) => ({...state, shapes:[{x:15:y:15}, ...state.shapes.slice(1)]}))
I think this is what you're looking for.
this.setState((prevState) => {
const newItems = [...prevState.shapes];
newItems[1].x = 15;
newItems[1].y = 15;
return {shapes: newItems};
});
I am working on a save feature using angularjs, web api and entity frame work. When the user clicks add new button I initialize some fields to default values. I have an itemDetail object and an itemPrice object. Both have an itemNo field. On the form itemDetail is updated by the ng-model. How can I also get that value in the newItemPrice()?
HTML:
<input type="text" name="itemNo" class="form-control" id="itemNumber" ng-model="vm.item.itemDetail.itemNo" />
Controller
function newItemDetail() {
return {
id: 0,
itemId: 0,
itemNo:'',
onHandQty: 0,
storeListPrice: 5000.00,
inventoried: false,
}
}
function newItemPrice() {
return {
id: 0,
itemId: 0,
itemNo: '',
country: 'USA',
region: 1,
discountPercent: 10,
erpDeleted: false,
deleteRemote: false,
}
}
You can use the ng-change directive:
ng-change="vm.item.itemPrice.itemNo = vm.item.itemDetail.itemNo"
Look here:
How to bind 2 models to one input field in Angular?
Else i would recommend you to change the data structure from 2 objects with IDs into 1 object with 2 propertys.
function Item() {
return {
id: 0,
itemId: 0,
itemNo: '',
price: {
onHandQty: 0,
storeListPrice: 5000.00,
inventoried: false
},
detail:{
country: 'USA',
region: 1,
discountPercent: 10,
erpDeleted: false,
deleteRemote: false}
}
}
it seems that you add a comma at the last key/value pairs in your objects I would recommend to remove them i had some wild bughunting them sometimes
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) { ... }