I'm trying to find the X values of the first and second elements in a node array, such as this one:
nodes = [{
x: xvalue,
y: getY(xvalue)
}, {
x: xvalue2,
y: getY(xvalue2)
}];
I thought it would be something like:
nodes[0].x;
or:
d3.select(".nodes").something
but I'm not really sure and I can't find anything about it online.
Related
I created a SVG file which consists of 35 different paths (train tracks).
Now I want to split the paths/tracks into 16 segments so another SVG path (train) can move along it.
The goal in the end is that the user can determine which paths should be actived, i.e. the segments later on should be clickable by the user in sequence.
To test if it's working the train should randomly move along the tracks.
Currently I tried to assign the paths into segments like this:
const segments = {
1: { x: document.getElementById("track1"), y: document.getElementById("track2")},
2: { x: document.getElementById("track3"), y: document.getElementById("track4")},
3: { x: ocument.getElementById("track5"), y: document.getElementById("track6")},
...
};
This unfortunately is not working. I don't know why since I thought I could just assign the paths into the corresponding segments. Before the SVG file was a normally drawn PNG file in which the segments were manually assigned through their coordinates like this and it worked:
const segments = {
1: { x: 1534, y: 534 },
2: { x: 2278, y: 630 },
3: { x: 2488, y: 1179 },
...
};
I'm new to coding in general, so I unfortunately don't know what to look for. The solutions I found were not exactly suited for my problem.
Thank you in advance for helping me.
document.getElementById("track1") will just return a path element. If you need the coordinates of the start of the path, you would need to do something like:
1: { x: document.getElementById("track1").getPointAtLength(0).x,
y: document.getElementById("track1").getPointAtLength(0).y }
I am trying to display my data on a bar chart using highcharts. It works fine with unique names but when I tried to show different data with same names then it was displaying data on one bar but I want to display it on separate bars. So how can I display data with same names on different bars.
Here is link of my jsfiddle
{
name: '10100',
y: 8451720
}, {
name: '10100',
y: 1456480
}, {
name: '13050',
y: 187940
}, {
name: '13050',
y: 6991100
}, {
name: '13050',
y: 7167320 }]
Thanks
From docs:
uniqueNames: Boolean
When uniqueNames is true, points are placed on the X axis according to their names. If the same point name is repeated in the same or another series, the point is placed on the same X position as other points of the same name. When uniqueNames is false, the points are laid out in increasing X positions regardless of their names, and the X axis category will take the name of the last point in each position.
So you need to add attribute uniqueNames: false to xAxis
Hi I know not many people know heatmap.js but im not even sure if its an issue with that or just my code. I have the following code to create my data points:
pointsArray = []
for (i = 0; i < numberValuesInArray; i++) {
points = {x: xAxis[i], y: yAxis[i], value: (count[i] / average * 100)};
pointsArray.push(points);
}
This part is working fine, it is in the correct format. The following code doesnt work:
var dataPoints = {
min: -50,
max: 150,
data: [pointsArray]
};
Inside the data part it doesnt accept the entire array which is what i need it to do to display all the data points. If I put:
var dataPoints = {
min: -50,
max: 150,
data: [pointsArray[1]]
};
This code works when I just call a specific index inside of the array but i need to be able to call the entire array. Thank you for your help in advanced :)
I want to load the markers that I have on my html code from a json file, and load the other json file with custom markers. This file have custom coordinates that needs to be specified as lat and lng.
The X coordinates should be lng, and the Y coordinates should be lat. Also, its possible to style each group with individual icons?? I have difficulties working with json files, don't know much about it.
Example code:
{
"Resources": [
{
"Name": "AITokarServer",
"coords": [
{
"x": -1210.0,
"y": -1770.0
},
{
"x": -1230.0,
"y": -1810.0
},
Full code here: http://plnkr.co/edit/q0Jyi528X22KnXcRg2Fs?p=preview
Here's a—hopefully well commented—example of how you could go about iterating over the json objects and creating markers using the data.
// Pretend this is the response from reading a file
var geoJson = {
resources: [{
x: 4288,
y: -4288,
}, {
x: -2320,
y: -4000,
}, {
x: -2320,
y: -4080,
}, {
x: -2400,
y: -804,
}, {
x: -2370,
y: -1092,
},
{
x: -2470,
y: -1192,
},
{
x: -2320,
y: -1122,
},
{
x: -2570,
y: -1125,
},
{
x: -1350,
y: -1252,
},
{
x: -1355,
y: -2125,
}]
};
// Iterate over the resources array of the geoJson object
// Nested properties of object literals (JSON) can be accessed using dot notation or array syntax
// eg: dot notation: geoJson.resources
// eg: array syntax: geoJson["resources"]
for (var i = 0; i < geoJson.resources.length; i++) {
// Create a local variable pointing to the
// coordinate pair object at index i in the resources array of objects
var currentCoordPair = geoJson.resources[i];
// Construct a 2 item array containing the x and y values of the current object
var xyArray = [currentCoordPair.x, currentCoordPair.y];
// Create a new marker object just like you did before
var marker = L.marker(xyArray, {icon: icon01});
// Add the marker to the map
var addedMarker = marker.addTo(map);
// Bind your popup
addedMarker.bindPopup("Base");
}
And a link to the plunker which is just a fork of your code.
http://plnkr.co/edit/O8xqcQlWJM3JiztQXePP
I noticed that you were handling LatLng values in other areas of the Plunker you provided. Supposing you have an object like the following:
{lat: 152.25151, long: 125.51251} // Just example values
In this case you'd be able to access and apply the values to markers in the same way that I showed above. The difference being you would access currentCoordPair.lat rather than currentCoordPair.x
Hope that helps
I want to add a series to a highchart scatterplot where I am naming each point in the series. I create a chart in the following way:
var chart; // globally available
makeCharts = function(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'scatter'
},
series: [{
name: 'a',
data: [{
'id': 'point1',
'x': 1,
'y': 2
}, {
'id': 'point2',
'x': 2,
'y': 5
}]
}]
});
}
I would like to be able to update the points on the chart using something like:
chart.series[0].setData([{id:['point3', 'point4', 'point5'], y:[0,1,2], x:[1,2,3]}])
but this is not correct. Is it possible to update a chart using this approach where each point has an ID?
EDIT:
Just to clarify, I would like to be able to pass the arrays directly, rather than adding the data point by point using addPoint(). I could loop through an array and use addPoint() doing something like this:
id:['point3', 'point4', 'point5'];
y:[0,1,2];
x:[1,2,3];
for (i=0; i<x.length; i++)
{
chart.series[0].addPoint({
x: x[[i],
y: y[i],
id: id[i]
});
}
However, this is very slow. It's much quicker to add data using the following approach:
chart.series[0].setData([[1,0],[2,1],[3,2]]);
I have found that I can add data like this:
chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);
but then the only way that I can access the id when the point is selected, is through this.point.config[2]. With the following approach I am unable to use chart.get('pointID') to identify a point as I did not set the ID. I want to be able to identify the point using just the ID.
Well broadly speaking there are two ways in which you can modify the chart data dynamically
Series.setData() Use this approach when you want to completely replace the existing data with some new data
Series.addPoint() Use this approach when you want to add a subset of the points dynamically. This method is not just for adding one point at a time, if you read the documentation carefully again you will find that this method takes a boolean redraw argument, and the argument detail is as following
redraw: Boolean
Defaults to true. Whether to redraw the chart after
the point is added. When adding more than one point, it is highly
recommended that the redraw option beset to false, and instead
chart.redraw() is explicitly called after the adding of points is
finished.
In your case, since you want to add a few points dynamically, but retaining the existing points, you should go with approach 2. But you need to use it inside a loop, with the redraw being set to false (hence solving the problem of being slow) and then after the loop, call the redraw method explicitly
Code
var id = ['point3', 'point4', 'point5'],
y = [0, 1, 2],
x = [1, 2, 3];
for (var i = 0; i < x.length; i++) {
chart.series[0].addPoint({
x: x[i],
y: y[i],
id: id[i]
},false);
}
chart.redraw();
Adding multiple points dynamically | Highcharts and Highstock # jsFiddle
Try using series.addPoint.
chart.series[0].addPoint({
x: 0,
y: 0,
id: 'anything'
});
But if you need to set data for series, use
chart.series[0].setData([{
x: 0,
y: 0,
id: 'anything'
},{
x: 2,
y: 2,
id: 'another'
}]);
As soon as you can pass your data like this:
chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);
(as you stated in question), I can suggest you to use a little hack.
We'll need to add another statement to method applyOptions of Highcharts.Point prototype.
if (typeof options[0] === 'number' && options[2] && typeof options[2] === 'string') this.id = options[2];
Here you can see it in action.