I'm trying to change individual weight weights of mapbox heatmap dynamically. Initially, I'm using the paint-property at 'heatmap-weight' to set weights (between 0-1) while adding the heatmap layer to the map. The weights are located in a geojson of all points.
With a time-slider, I would like to change the individual heatmap weight based on points. I'm trying to update the paint-property, but it only works with one value for all points. It does not work with an array or a reference to the existing geojson properties.
Initial:
map.addLayer({
'id': 'points-heatmap',
'type': 'heatmap',
'source': 'data',
...
'paint': {
'heatmap-weight': {
'property': 'weight',
'type': 'exponentials',
'stops': [
[0, 0],
[1, 100]
]
},
During change event, it only works with:
map.setPaintProperty('points-heatmap', 'heatmap-weight', 30)
but don't works with:
map.setPaintProperty('points-heatmap', 'heatmap-weight', weight2)
Related
How to draw something like the below screenshot in Echarts?
With ECharts, I can easily draw scatter and axes, include zooming and panning features. However, when I need to draw a new layer on top of scatter, things getting messy. I tried using custom series of e-chart, however, its api and documentation is hard to understand, Besides, its zooming function works weird on multiple series.
You can create the circle by adding a customized data item to your scatter series.
Here's a sample option:
option = {
xAxis: {
max: 12
},
yAxis: {
max: 12
},
series: {
type: 'scatter',
symbolSize: 20,
data: [
[6.0, 8.04],
[8.0, 6.95],
[3.5, 8.81],
[5.0, 8.33],
[6.0, 7.24],
[4.0, 4.26],
[8.0, 7.84],
[7.0, 4.82],
[5.0, 5.68],
{
value: [6, 6],
symbolSize: 400,
itemStyle: {
color: 'rgba(1,1,1,0)',
borderColor: '#00f',
borderWidth: 4
}
}
]
}
};
...which should produce this output:
echarts scatter series with enclosing circle
See https://echarts.apache.org/en/option.html#series-scatter.data and scroll down a bit for more information on customized data items.
Here is a chart rendered using one of the Google Charts demos. My actual use case is very similar to this, a vertical axis with integer labels and a horizontal axis with string labels.
Fiddle: https://jsfiddle.net/1f0dvehq/
The X-axis has the labels starting at what seems to be an arbitrary distance from 0,0. I need those red and blue lines to start at X=0, and have the first X-axis label shift so that it sits below 0,0, as in the following screenshot:
I have tried passing minValue options to the horizontal axis via hAxis but this doesn't seem to work with strings like it does with integers.
The following options are being passed to the fiddle chart (again, from the demo code):
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
How can I align the X axis labels so they take up 100% of the chart width, with the first label falling underneath the Y axis itself? I would like to accomplish this from within the chart configuration itself if possible, rather than CSS or extraneous JS.
If anyone could also explain the logic of this setting it would be much appreciated. It strikes me as odd that it's the default setting, and from my experience with google frameworks they usually choose default values that adhere to a convention, but this seems nonsensical. I would expect the "2004" label to be left justified on the X-axis, and the intervals between the X labels to be evenly spaced with "2007" flush against the right edge of the chart.
can't explain why, but this is default behavior for a discrete axis.
if you would like to display strings on the x-axis,
but still have the behavior of a continuous axis,
you can use the ticks option to format the axis labels.
using object notation, you can provide the value (v:) of each tick,
as well as the formatted value (f:)...
{v: 0, f: '2004'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
[0, 1000, 400],
[1, 1170, 460],
[2, 660, 1120],
[3, 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: {position: 'bottom'},
hAxis: {
ticks: [
{v: 0, f: '2004'},
{v: 1, f: '2005'},
{v: 2, f: '2006'},
{v: 3, f: '2007'}
]
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
I'd like to style points on my map as follows:
'circle-radius': {
property: 'pixelRadius',
stops: [
[0, 0],
[20, 'pixelRadius'],
],
base: 2,
}
The use case is similar to Drawing a circle with the radius in miles/meters with Mapbox GL JS
Except that in my properties map I have computed the pixel radius so that each point in the FeatureCollection has its own radius.
Can this be done? All of the examples Ive seen with stops have a hard coded value for the 2nd array element.
Try this:
'circle-radius': [
"interpolate",
["exponential", 2],
["zoom"],
0, 0,
20, ['get', 'pixelRadius']
],
So here it is using expression (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-get) instead of function.
I have some info which is in this format (speed, frequency, date). What happens is that I need to plot this chart with speed x frequency, but I want to allow the users to use the navigation filtering by the date, which is not appearing on the chart.
Also, I have some info which is not built dynamically, which is the limits of speed x frequency. This info will be fixed as reference points on the plot. So, when I filter the plot info (not the limits), it must always display these limit plots.
You can have an idea by this chart, the area plots show the limits for the points (speed, frequency). Then, I would add points of speed x frequency (x date), and filter then by date.
Can you guys give me some advice on this?
here is a JSFIDDLE
JSFIDDLE
data: [
[0, 20, here is a date], [10, 20,here is a date],
[50, 39.9994, here is a date], [100,49.7494, here is a date]
],
Guys, notice that every element of the array in the series has 3 elements [a, b, c], suppose the third one (c) is a DATE and not a random number as it is right now. I want to be able to use the commented the navigator code to filter this series by this C element, which doesn't in fact appear on the chart you see, it is a hidden element, just to filter the data.
There will be a little tricky, if you want to have a navigator in the same chart. Navigator works only with datetime data and it must be connected with the axis from the main chart.
So, you have data in that format:
var points = [
[5, 9, Date.UTC(2016, 1, 0)],
[65, 6, Date.UTC(2016, 1, 1)],
...
You need two x axes - one which represents the data and the other which is connected to the navigator. The second axis must be visible to work with the navigator and must be connected with the datetime data.
So now, except two x axes, you need two series - one with the actual data, and the other consists of [date, y] values from the first series. The additional data will be visible in the navigator - note, that in the navigator you cannot use scatter series - so it will be converted to line series - to happen it without errors, your data should be sorted by date.
series: [{
id: 'main-series',
data: points.map(function(point) {
return [point[0], point[1], point[2], point[1]]
}),
showInNavigator: false,
xAxis: 1,
keys: ['x', 'y', 'date', 'holdY'] //holdY is for easier hiding points
}, {
xAxis: 0,
data: points.map(function(point) {
return [point[2], point[1]];
}),
showInNavigator: true,
enableMouseTracking: false,
color: 'transparent',
showInLegend: false
}],
xAxis: [{
minRange: 1000 * 3600 * 24,
type: 'datetime',
tickLength: 0,
tickLength: 0,
labels: {
enabled: false
},
}, {
type: 'linear'
}],
The last thing you need a callback which will hide/show points after the extremes in the navigator are set. Hiding/showing depends on the third point's property which is date. There is no directly API to hide/show specific points (except pie), but it can be achieved by setting point's value to null (that is why I preserved the real y in holdY).
events: {
afterSetExtremes: function(e) {
var points = this.chart.get('main-series').points;
points.forEach(function(point) {
point.update({
y: e.min <= point.date && point.date <= e.max ? point.holdY : null
}, false, false);
});
this.chart.redraw();
}
}
example: https://jsfiddle.net/3wuwdonn/1/
I would consider using a navigator as a separate chart, then you wouldn't need the second x axis and series in the main chart and you wouldn't need to make them look invisible.
example with a navigator only chart here: http://jsfiddle.net/f7Y9p/
I'm trying to find a way to change the position of the labels on my vertical axis. By default, a line chart renders the labels to the left of the chart, I'd like them to display on the right instead. It seems as if this isn't possible but I'm not too aware of ways to extend the line graph implementation to make it behave like I want it to.
you can use the series configuration option to change the targetAxisIndex
the documentation says...
targetAxisIndex: Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default value is 0; set to 1 to define a chart where different series are rendered against different axes. At least one series much be allocated to the default axis. You can define a different scale for different axes.
but seems to work without assigning anything to the default axis...
see following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Amount');
data.addRows([
['Label 1', 10],
['Label 2', 20],
['Label 3', 30],
['Label 4', 40]
]);
new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, {
series: {
0: {
targetAxisIndex: 1
}
}
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>