score:1
Accepted answer
Using Series.setData , I am updating the series data.
Fiddle demo
JS
var dateObjects = [
{
lat: 3.583333,
lon: 36.116667,
z: 1,
myplace: 1,
},
{
lat: -3.2249088,
lon: 35.1895657,
z: 1,
myplace: 2,
},
{
lat: 45.4693488,
lon: 10.2636496,
z: 1,
myplace: 3,
},
];
var mapChart=new Highcharts.mapChart('container', {
chart: {
borderWidth: 1,
map: 'custom/world'
},
title: {
text: 'World population 2013 by country'
},
subtitle: {
text: 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [
{
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
},
{
type: 'mapbubble',
color: '#ff0000',
minSize: 4,
maxSize: '1.5%',
data: dateObjects,
},
]
});
$('button').click(function () {
var places=$(this).attr('mplace')
var result = dateObjects.filter(function( obj ) {
return obj.myplace == places;
});
mapChart.series[1].setData(result);
});
Html
<button id="button1" class="autocompare" mplace="1">My Place
1</button>
<button id="button2" class="autocompare" mplace="2">My Place 2</button>
<button id="button3" class="autocompare" mplace="3">My Place 3</button>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
Source: stackoverflow.com
Related Query
- sort of highchart's map by parameters
- want to sort highcharts tooltip results
- Sort the series data for every X-Axis in Highcharts
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Highcharts - Global configuration with common code and unique data & Headings
- Highcharts tree map showing wrong min value
- HighCharts query parameters issue with Flask webservice
- highcharts on top of google map
- Highcharts sort stacked bar
- How to draw a bubble map with longitude and latitude using Highcharts in react
- HighCharts Stock Chart error code 18
- How do I pass in parameters to the Highcharts pointFormatter callback function
- highcharts change rendered image source on click
- Highcharts map example not working
- How do i add mouse wheel code in Angular2 highcharts in typescript
- how to display 2 same highcharts without duplicate the code
- Use of DotNet HighCharts dll to make charts in code behind
- Highcharts map doesn't change color on hover
- How to edit tooltip in Highcharts C# code
- what means ${demo.css} in example files of highcharts ? That piece of code seems to be literal
- Remove the second tooltip in Tree map using Highcharts
- highcharts datatable - function parameters
- passing json values to highcharts from .net code behind
- how to use highcharts tooltip formatter in python code
- HighCharts and Map Bubble are not compatible
- passing formatting JavaScript code to HighCharts with JSON
- JSON Data Map Issue with HighCharts + Ajax
- Data map to suitable Highcharts series
- Highcharts fill map based on data values with React TypeScript
- Highcharts Map with React TypeScript
More Query from same tag
- highcharts spline with multiple series update every few seconds
- Highcharts: Is there a way to highlight a series' corresponding y-axis onPointHover?
- Highcharts: completely custom label positions on x-axis
- How to set the static series name to the element result based on the categories in the HighChart
- Highcharts I've lost my drilldown scrollbar
- Line chart connectnulls but not all nulls
- Can't display x-axis value in Highcharts title
- Install highcharts extenion in yii2 manualy [without composer]
- How to implement a gauge solid chart in JSF
- How to color series legend in highcharts when colorbypoint is set to true
- Highchart Marker image hides if large dataset is produced
- Group specific points to categories in Highchart
- Highcharts adding array of variable to series
- Highcharts tooltip custom CSS turning the caret/arrow white
- Build highcharts from oracle with html, java, json
- How to overcome missing values in Highstock-Stockchart?
- Highcharts label format with tickPositioner in a datetime x Axis
- What is the difference between angular-highcharts and highcharts-angular?
- Show days in future without series
- Highcharts - On and Off over Time
- Is it possible to use boost-canvas without enable WebGL in highcharts (current version 9.0.1)?
- highcharts get all of the minimum points of the chart
- How to add highchart in my view.py?
- GeoJSON Not Working with Highmaps
- In Highchart legend, the label color is the same with the color of shape
- Highcharts reversed line chart is partially hidden at min value
- how to give different names on tooltip for one series in highcharts R
- Interactive row filtering in highcharts/highcharter stacked barchart
- data from AJAX json request not loading in HighChart
- How to format my json data for stack column chart in HighCharts