I am trying to keep current Echarts position after updating data (like stock chart have new price but we are in past time).
I am using setOption with opts: { lazyUpdate: true, replaceMerge: ['xAxis', 'yAxis', 'series'] } but nothing works.
https://echarts.apache.org/en/api.html#echartsInstance.setOption
Related
I want to be able to hide and show/layers in Mapbox like this example provided by Mapbox.... https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/
I have some vector data saved as a tile set in Mapbox, but I don't know where to find the URL is shown in the example below as 'mapbox://mapbox.2opop9hr'. Can anyone tell me how to find it for my own data?
// Wait until the map has finished loading.
map.on('load', () => {
// Add a custom vector tileset source. This tileset contains
// point features representing museums. Each feature contains
// three properties. For example:
// {
// alt_name: "Museo Arqueologico",
// name: "Museo Inka",
// tourism: "museum"
// }
map.addSource('museums', {
type: 'vector',
url: 'mapbox://mapbox.2opop9hr'
});
mapbox://mapbox.2opop9hr is a reference to a mapbox custom vector tileset. You can make one of your own by uploading data in Mapbox Studio: https://docs.mapbox.com/studio-manual/reference/tilesets/. Mapbox will then serve this tileset for your map to consume.
However, this isn't necessary to toggle map layers using the technique shown in the example. map.setLayoutProperty() can be used to show or hide any layer, including layers that came with the base style, or layers added after the fact using vector tiles or geojson sources.
If you are working with small/simple data, you may want to just add a geojson source and layer, and then use setLayoutProperty() to show and hide it as in the example.
I have a application that shows a highlighted list of countries on a map and their names in a side panel
I would like to make the following happen: When you click on the name of a country in the side panel. you zoom to the country on the map.
I am not sure how to make this happen and would appreciate it if someone point me to an example or suggest the best way to make this happen
Really depends upon your set-up and I'am assuming you are using geoJSON. In a project I worked on, I created a function that is ran once you click from a list that zooms to the corresponding geoJSON ... or you could attach the leaflet ID for each geoJSON layer to the corresponding elements of the list if the list populated from the geoJSON.
markers - collected geoJSON
layer.feature.properties.pin - the corresponding key that matches the listed record with the geoJSON (this needs to match your data)
pin - the corresponding element from the list (this needs to match your data)
The 1st setStyle - highlights the geoJSON
map.fitbounds - zooms to highlighted info
The 2nd setStyle - changes all of the other geoJSON layers back to the original style.
function selectedparcel(pin){
markers.eachLayer(function (layer){
if (layer.feature.properties.pin === pin){
layer.setStyle({
fillColor: '#2262CC',
fillOpacity: 1,
weight: 3
});
//this is where the zoom happens
map.fitBounds(layer.getBounds());
} else {
layer.setStyle({
color: '#ff7800',
weight: 1,
opacity: 1,
fillOpacity: 0
});
}
});
I hope this is what you were looking for. If you want to use the leaflet id method Bryan McBride has an example within his js code here:
https://github.com/bmcbride/building-damage-reporter
I'm new to FusionCharts.
I have generated a pie chart with slice, my question is:
When I click on the slice in the pie chart, I need the label name of the slice.
How can I write the on click event and get the name of label?
I don't much about charts and such, I'm fine using Word for this. But in 2D Graphics I've learned you can use
...contains(shape)
...intersects(shape)
To see if shapes are inside eachother (to contain) or if they overlap eachother (to intersect).
When adding a mouseListener, you can use
e.getX() and e.getY()
to get the current X and Y position of mouse on screen.
So something like
for (pieChartPieces p: piece)
{
if (pieChartShape.contains(e.getX, e.getY))
{
//* Some kind of notifier for user pops up here.
}
}
Check out this fiddle here
It uses "dataplotClick" event to retrieve the label of the pie slice.
You have to use link attribute, as seen here.
"link": "JavaScript:populate('411');",
See the jsFiddle.
Don't forget to implement the populate() with the whatever you need to do.
Link to a similar question (with answer).
We are using Highcharts and have some complex charts with roughly 75 series within on chart.
The series are not used through the whole chart but only for range of three month. So we have about 15 series per year and the overall chart covers five years (makes roughly 15*5 = 75 series). However Highcharts displays all 75 charts within its legend. The goal is to minimize the legend to the visible series only. We are able to determine the related series in JS code and we tried to toggle the 'showInLegend' flags of the related series e.g.
chart.series[24].options.showInLegend = false
but without effect. We tried to redraw the chart using
chart.redraw()
but that has no effect...the legend remains unchanged.
So the questions are:
is it possible to redraw the legend based on the updated showInLegend options?
is there mechanism in Highcharts to dynamically updated the legend based on the visible series?
Well just setting the showInLegend doesn't do the trick, there are some more hooks that need to be taken care of
Refer Halvor Strand's answer for a more recent way
Old trick but still works
To Add
item.options.showInLegend = true;
chart.legend.renderItem(item);
chart.legend.render();
To Remove
item.options.showInLegend = false;
item.legendItem = null;
chart.legend.destroyItem(item);
chart.legend.render();
where, item can be a point or series
var item = chart.series[1];
Add Remove Legend Dynamically | Highchart & Highstock # jsFiddle
You can set showInLegend as false when you create the chart.
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
showInLegend: false
}
demo1
If you want to update it dynamically you can do the following.
options.series[1].showInLegend = false;
chart = new Highcharts.Chart(options);
You forgot to force chart to redraw.
demo
Or chart.legend.allItems[1].destroy(); to remove the first one.
This can now be solved without any hacks through the Series.update method (API). For example:
chart.series[0].update({ showInLegend: false });
See this JSFiddle demonstration. The method signature is:
update(Object options, [Boolean redraw])
Where options are options for any regular Series object. You can optionally halt redrawing to change multiple options before redrawing.
I have some data similar to the following chart:
http://developer.yahoo.com/yui/examples/charts/charts-seriescustomization_clean.html
Only difference is that for each of the fields - I have some other extra data - say For utlilities - I have a cash reserve for utility - as another field. I would prefer this data point to come above the utilities bar.
I have been trying from morning to get this chart working, but I am unable to do so. Could you please let me know if it is possible - someway?
Thank you very much in advance.
Regards
K
All data that is positive will appear above the origin so any positive data will be above the utilities bar. If you are trying to get your field to appear directly above the utilities bar, you cannot accomplish his with a column chart. You can do this with the stacked column chart. When using the stacked column chart, all items will be stacked. You can convert the above link to a stacked column by changing your chart constructor from ColumnChart to StackedColumnChart:
var mychart = new YAHOO.widget.StackedColumnChart
and by setting stackingEnabled to true on your vertical axis.
currencyAxis.stackingEnabled = true;
Tripp