I have a dropdown with a list of counties to select from on the map. I'm trying to figure out how I can have the county on the map highlighted when it is selected. I cannot find in the API documentation where this is done.
I tried changing the fill color of the point but when you select a new color the code to change it back to its previous color doesn't seem to want to execute.
So essentially, in my on change event code, I want to change the color the selected point by hc-key or id.
$("#county-select").change(function () {
$('.highcharts-point-select').css('fill', 'rgb(153, 145, 164)');
$('.county-checkbox').prop('checked', false);
$('.metric-td').remove();
let id = $('#county-select').val();
let fips = $(this).find(':selected').attr('data-fips');
let point = mapChart.get(fips);
});
You could use the allowPointSelect functionality to trigger selections on the map via your dropdown. Here I add the country code as the ID of the point, so that we can use chart.get to get them.
A minimal example, with two buttons to select either Norway or Sweden, exclusively (JSFiddle):
$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/world-population-density.json', function (data) {
for(var i = 0; i < data.length; i++) {
// Adding ID to data, so we can use "get" to find the points
data[i].id = data[i].code3;
}
// Initiate the chart
var chart = Highcharts.mapChart('container', {
series: [{
data: data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
allowPointSelect: true,
}]
});
$('#selectnor').click(function () {
chart.get('NOR').select();
});
$('#selectswe').click(function () {
chart.get('SWE').select();
});
});
Related
In this Highcharts column chart the user can drill down by clicking on the column.
This works fine, however all the data, including the data of the drilled column, needs to be available when the chart is firstly created.
What I need is to capture the drilldown event click and populate the chart with that information, sending the data only when the user clicked on a specific column. Is this possible?
Yes, it is possible and simple. You need to use drilldown event callback function, call API request in it and use addSeriesAsDrilldown method - as in the example below:
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
...
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function() {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e9m74kgp/
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
I want to make an API call on Click of RangeSelector Buttons in High stock. I am aware of the fact that there is a click event in RangeSelector but the problem is the event passed to that does not contain the min and max values of the graph. And I need these two values for making an API call. I am also aware that we can use afterSetExtremes here but the problem with that is it is triggered multiple times even when the button is not clicked. Below are some part of my code. Can anybody tell how can I get Xmin and Xmax in the click event?
const zoomButtons = [
{
type: 'minute',
count: 5,
text: '5min',
events:{
click: onClickOfRangeSelector
}
}]
function onClickOfRangeSelector(e) {
console.log(this);
console.log(e);// need to make an API call here
}
You can refer to a chart variable, please check the below code:
var chart = Highcharts.stockChart('container', {
...,
rangeSelector: {
buttons: [{
type: 'minute',
count: 5,
text: '5min',
events: {
click: function(a, b, c) {
var min = chart.xAxis[0].max - this._range,
max = chart.xAxis[0].max;
console.log(min, max);
}
}
}]
}
});
Live demo: http://jsfiddle.net/BlackLabel/x1gc38nd/
API Reference: https://api.highcharts.com/highstock/rangeSelector.buttons.events
I have an application where user can select a region by clicking. Then the map rewrites itself and zoomsTo() to the selected area. So far everything else works, but I haven't get any idea how to color the selected area programmatically. The area (or different statistics) may also be selected from a drop-down list, so I have to redraw the map in any case.
var mapChart=$('#mapcontainer').highcharts();
mapChart.get(jQuery( "#selected-region" ).val()).zoomTo();
mapChart.mapZoom(5);
I have tried things along the line:
mapChart.get(jQuery( "#selected-region" ).val()).color="rgb(255,0,0)";
but so far no breakthrough :/
Any ideas?
hank
Using jquery to select point is not the best solution. Highcharts provides point events like click where you have an access to clicked point instance, or you can select a point using the chart.get() method by point id.
To change the selected area color you have to define color property when a point (area) is selected:
series: [{
states: {
select: {
color: '#a4edba'
}
}
}]
Now you have to invoke select() method on the clicked or selected point, as well as you invoked zoomTo() method:
series: [{
point: {
events: {
click: function() {
var point = this;
point.zoomTo();
point.select();
}
}
},
states: {
select: {
color: '#a4edba'
}
}
}]
});
Demo:
https://jsfiddle.net/wchmiel/yzco1023/
How do I hide the bar data by clicking the bar and refresh the chart? I would like to have almost the same functionality as clicking on the legend.
Jsfiddle: https://jsfiddle.net/Nadiyaka/005z7dut/1/
For example, if I click on 'Asia' bar, I want the data to become hidden and the chart to be reloaded to see other data bigger.
So far I'm able only to hide the data, but the chart isn't refreshing:
series: [{
data: [1052, 954, 4250, 740, 38],
events: {
click: function(e) {
var chart = $("#container").highcharts();
index = event.point.x;
chart.series[0].data[index].graphic.hide();
chart.series[0].data[index].dataLabel.hide();
}
}
}]
There is no option for hiding points (except the points in pie series), but you can achieve the same effect by setting the point's value to null.
events: {
click: function(e) {
var point = e.point;
point.series.chart.pointer.reset(false); // this is needed to prevent the tooltip from moving around
point.update({
y: null,
holdY: point.y // I preserve original value needed on showing
});
}
}
For showing the columns, attach events to labels
load: function() {
var chart = this,
points = this.series[0].data;
points.forEach(function(point) {
chart.xAxis[0].ticks[point.x].label.on('click', function() {
if (point.y === null) {
point.update({
y: point.holdY
});
}
});
});
}
example: https://jsfiddle.net/005z7dut/2/
Am trying to generate a scientific bubble chart and it is suppose to be presented as a dashboard. The chart is intended to reflect bubbles and these bubbles will be changing in size and location using an ajax call.
I was able to do must of that, but am facing a performance issue. The ajax is returning an average of 80 to 150 items each presented by a Series of type bubble.
As such, am faced with two problems
1) The browser freezes at every request, I tried to make the javascript sleep between each add operation but did not solve the problem.
2) After the first ajax call, other calls will need to alter existing Series of their facts has changes. How can I retrieve an existing Series and change its values in case it needs to be altered?
$(function () {
function addPoint(chart){
$.get("{{ main_site_url }}/dashboard/likelihood/ajax/",
function(data) {
$.each(data, function(k, dic) {
var newSeries = new Highcharts.Series();
newSeries.type = 'bubble';
newSeries.id = dic.id
newSeries.data = [[dic.id, dic.views, dic.likes] ];
setTimeout(function() {
chart.addSeries(newSeries);
}, 2000);
});
}, "jsonp"
);
}
$(document).ready(function() {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var chart = this;
setInterval(function() {
addPoint(chart)
}, 3000);
}
}
},
title: {
text: 'Likelihood bubbles'
}
});
});
});