I have a polygon GeoJSON layer in my deck.gl map. To avoid having to reload many polygons in many user interactions, I would like to pre-load all polygons and then change their visibility. I tried to achieve this by setting the fill color (and also line color and line width, but there it's hidden in the functions) to null depending on the polygon properties.
new deck.GeoJsonLayer({
id: 'polygon-layer',
data: family,
pickable: true,
getPosition: d => d.geometry.coordinates,
filled: true,
getFillColor: d => show(d) ? hexToIntColor(d.properties.color) : null,
lineWidthUnits: "pixels",
getLineWidth: highlighted,
getLineColor: highlighedColor,
lineWidthMinPixels: 1,
visible: true,
onClick: displayProperties,
updateTriggers: {
getLineWidth: [highlightedMap, highlightedCode],
getLineColor: [highlightedMap, highlightedCode],
getFillColor: [highlightedMap, highlightedCode]
}
})
The result is very much not what I expected
How do I set individual polgons to not be displayed? (And where do these strange black gradients come from which I see instead of just seeing the pink and coastline from the background map?)
Try using DataFilterExtension, setting filterRange to [1, 1] means that only entities that meet the condition (1) will be rendered, and not (0):
new deck.GeoJsonLayer({
...
getFilterValue: (d) => Number(show(d)),
filterRange: [1, 1],
extensions: [new DataFilterExtension({ filterSize: 1 })],
updateTriggers: {
getFilterValue: [yourTrigger]
}
});
Related
I have a sparkline chart of temperature sensor data,
Its a year of data sampled at every 1 min
I first load a blank chart, then I do a server call, bring the results back and display it by calling
getchart.addSeries({
name: thisGroup,
id: probeItem[0],
data: probeDataArray,
keys: ['x', 'y', 'specialId'],
there could be upto 20 series, and they all load on the screen one by one
This renders quite quickly, however I now need to add a label annotation where the temperature goes over a certain Value (i.e. in add a warning symbol when its alarm state)
Currently I'm looping through each point and seeing if its over a certain value:
currentSeries.points.forEach(function (point) {
However this is very slow.
I have an array of the alarms, and can reference them as
['x', 'y', 'specialId']
However I cannot see how I can add an annotation label by x,y or specialId.
I can only seem to add the label if i loop through all the points already rendered
Is there a way to add a label by using my Id's?
I also need to resize the graph and the labels to remain in the same place
Alternatively if this is not possible, is there anyway to add the labels as i'm adding the series?:
getchart.addSeries({
name: thisGroup,
id: CurrentGroupID,
dashStyle: 'ShortDot',
data: groupLogArray,
keys: ['x', 'y', 'specialId'],
showInNavigator: true, //this shows the series data in the small bottom navigator
point: {
events: {
click: function () {
//alert("test click");
}
}
}
});
You can add an annotation by x and y axis values:
chart.addAnnotation({
labels: [{
text: 'Alarm',
point: {
x: 2,
y: 3,
xAxis: 0,
yAxis: 0
}
}]
});
Live demo: http://jsfiddle.net/BlackLabel/k6trha3e/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#addAnnotation
As an alternative, you can also use data labels: http://jsfiddle.net/BlackLabel/n4586xzq/
I have a line chart that plots multiple datasets where each dataset has two lines associated with it: a reference line and a measured line.
To plot all of these lines, I added individual series for each subset of data, giving the reference line a dashed appearance and the measured line a solid appearance.
The tooltip formatter displays a popover of detail data for a specific point based on the cursor position. It only displays data for one series.
How might I group the series together in such a way that I can display a tooltip for multiple series, but not necessarily all of the series?
Highcharts seems to have an option for shared that displays a tooltip for all of the series that correspond to the cursor's X coordinate, but is there a way to do some sort of grouping? Is there something I can do to the series configuration so that each series renders two lines on the chart but with different appearances?
Not sure if what I'm trying to do is possible with Highcharts. Might need to be a custom chart.
There is no such default functionality in Highcharts, but for now I see two possible workarounds:
slight change in x value:
series: [{
data: [1, 1, 1]
}, {
data: [[0.0001, 2], [1.0002, 2], [2.0002, 2]]
}, {
data: [3, 3, 3]
}, {
data: [[0.0001, 4], [1.0002, 4], [2.0002, 4]]
}]
Live demo: http://jsfiddle.net/BlackLabel/v1uxp3jh/
wrap of the refresh method to exclude some of the unwanted points:
(function(H) {
H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
points.forEach(function(p, i) {
if (p.series.name === "Series 2") {
points.splice(i, 1);
}
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/qd4mnx8e/
Docs: https://www.highcharts.com/docs/extending-highcharts
I am working on a columnrange graph in Highcharts where I plot different measurements and confidence intervals in the same plot:
The first few columns inside a group (e.g. Januar) represent measurements for different cities, while the last column represent confidence intervals. I would like to add horizontal lines to the confidence intervals representing the data means. That is, each orange column would get its own line at a specific heigh going from the left to the right side of the orange rectangle. How do I plot such lines?
I know how to add lines as a separate series of type line. However, doing so, I'm not sure how to guess the exact location of orange column and also I do not know how to handle cases when some columns are hidden through the legend.
This question is related to this question though I am not able to get any of that solutions to work in my case.
Here is the fiddle: https://jsfiddle.net/nikicc/rqxqm4hm/
You can use renderer.path to draw proper lines.
function drawDataMeans() {
const intervalSeries = this.get('conf-interval'),
series = this.series.filter(series => intervalSeries !== series)
let lines = this.dataMeansLines
if (!lines) {
lines = this.dataMeansLines = series[0].data.map(series => this.renderer.path().attr({
'stroke-width': 2,
stroke: 'black'
}).add(intervalSeries.group))
}
const visibleSeries = series.filter(series => series.visible)
if (intervalSeries.visible && visibleSeries.length) {
intervalSeries.data.forEach((point, i) => {
const mean = visibleSeries.reduce((sum, series) => sum + series.data[i].high, 0) / visibleSeries.length
const {x, width} = point.shapeArgs
const y = this.yAxis[0].toPixels(mean, true)
lines[i].attr({
d: `M ${x} ${y} L ${x + width} ${y}`,
visibility: 'visible'
})
})
} else {
lines.forEach(line => line.attr({visibility: 'hidden'}))
}
}
Hook on load/redraw events
chart: {
type: 'columnrange',
inverted: false,
events: {
load: drawDataMeans,
redraw: drawDataMeans
}
},
example: https://jsfiddle.net/dq48sq3w/
Trying to plot like [{x:0,y:0},{x:1,y:1},{x:null, y:null}, {x:3,y:1},{x:null, y:null}, {x:5,y:2}]
jsfiddle link: [http://jsfiddle.net/rayholland/HSvBj/4/][1]
and I want to make data point invisible on line segments but visible on isolated data point.
In another word, I want to draw the following graph but with exactly one series Link to image
You have two options:
use two series, but link them (linkedTo option) to get just one legend item: http://jsfiddle.net/HSvBj/30/
use null points, but set x value, when x=null then where should be that point inserted? I don't know, so for a library it's even harder ;) See: http://jsfiddle.net/HSvBj/31/
You can't have a null x value - the chart can't possibly know what x = null means, or what to do with it.
1) For the points that you want to have null values, you need to provide the appropriate x value
2) For the points that you want to have a marker, you need to signify that in your data array
So, in your plotOptions, disable markers, and in your data array, turn them on point by point:
plotOptions : {
series : {
marker: {
enabled : false
}
}
}
And then:
series: [{
data: [
[0,0],
[1,1],
[2,null],
{x:3,y:1, marker: {enabled: true}},
[4,null],
{x:5,y:2, marker: {enabled: true}}
]
}]
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/65/
What is the best way to achieve a chart with multiple types when it should include a type that has the following kind of visual presentation.
| yellow |blue| gray | yellow | gray |
i.e. a type which is one dimensional (but visually has height), and the color indicates 'y' (which here consists of categories: yellow, blue, gray)
You should also be able to stack those:
| radical | senseless | high tension |
| yellow |blue| gray | yellow | gray |
I can achieve this with having a chart typed column with a series for each category:
http://jsfiddle.net/RCnYV/
But how can I also add another chart type above that, like:
yAxis (only for the line)
^ ___
|------- ___________________________ ____/
| \__________/ \/
| radical | senseless | high tension |
| yellow |blue| gray | yellow | gray |
-----------------------------------------------------------> xAxis (shared)
So the line series should be above (not hovering over) the others. Note that the xAxis is shared between all of the series, i.e. all of the series have exactly as many data points. It is just that some of the series are presented as type 'line', and others with the new type (that I don't know good name for, ribbon?).
Also what other ways are there to create a similar chart? One problem with the above is that I need to create one series for each catalog, that is 2 * series in total, and not just two as would be the case with basic chart.
Are you looking for something like this # http://jsfiddle.net/jugal/cABfL/ ?
You can stack the charts by specifying heights for your yAxis, and manipulating its top so that they stack one over the other
yAxis: [{
top: 300,
lineWidth: 2,
offset: 0,
height: 200,
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ": " + $wnd.Highcharts.numberFormat(this.y, 2);
}
}
},
{
height: 200,
lineWidth: 2,
offset: 0,
tooltip: {
enabled: true,
formatter: function() {
return this.value + 50;
}
}
}],
Similar stacking example is available # http://www.highcharts.com/stock/demo/candlestick-and-volume
EDIT
To answer to the second part of the question (Also what other ways are there to create a similar chart?). There isn't anything out of the box that highchart seems to bring to the table for such a visualization, so you would need to work yourself around the existing lines and columns to get this visualization.
This is how I went about it.
I tried using the stacked bar chart for each ribbon, hence would need 2 series, 1 for the line and 1 each for both the ribbons. But after giving it a try, turned out the bar chart is nothing but a rotated column chart (at least a sort of), it seems to have the vertical axis as the X and horizontal one as Y, hence it messes up any other chart, i.e. the line chart gets messed up as it wants the horizontal to be the X.
Basically using a bar chart didn't take me much far. I went ahead using the line chart (With a very thick line lineWidth:50) and drew a horizontal (Constant Y for each point) line chart with one series for each section of the ribbon, hence being able to give each section different color. Each ribbon would need a separate Y-axis, with different offset as mentioned above. Also removed all the tooltip, Y-axis labels and grid lines, to make it look as different from a line chart and more like the ribbon. Tooltip may be needed, but line charts give tooltip for points, in our case we want tooltip on section between two points, hence wrote a mouseOver event handler and calculated the length of the section in there. The only part that was hurting now was creating a series for each section of the ribbon, so went ahead and wrote the following utility function that accepted a list of values, basically the x intercepts for each section (you can improvise it to take section length instead) and returned an array of series.
// usage: createSeries([0, 3, 4, 6], 1)
// Creates 4 series and assigns them all to yAxis 1
// you can extend this to take colors etc too, as per requirement
function createSeries(data, yAxisIndex) {
var i;
var series = [];
for (i = 0; i < data.length - 1; i++) { // Node lenghth-1
var start = data[i];
var end = data[i + 1];
series.push({
yAxis: yAxisIndex,
animation: false,
stack: 0,
data: [[start, 0], [end, 0]],
lineWidth: 50,
marker: {
enabled: false
},
tooltip: {
pointFormat: function() {
return "";
}
},
events: {
mouseOver: function() {
alert(this.data[1].x - this.data[0].x);
}
},
showInLegend: false
});
}
return series;
}
All that was needed was to push these series into the existing series and then feed it to the highchart constructor.
Final jsFiddle: http://jsfiddle.net/jugal/cABfL/