I built a map bubble with Highmaps that works fine as long as it gets the data from this js file:
<script src="https://medien.lb.madsack.de/rnd/jchrist/coronaweltkarte.js"></script>
see the fiddle
In the next step I want to import data from this google spreadsheet:
https://docs.google.com/spreadsheets/d/1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g/edit#gid=480378207
For that I added this code:
data: {
googleSpreadsheetKey: '1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g'
},
see fiddle
Unfortunately it does not work. What else do I have to do?
You need to use seriesMapping property to correctly create bubble series from your data. Also, add the map series, for example in complete callback function.
data: {
googleSpreadsheetKey: '1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g',
seriesMapping: [{
z: 0,
land: 4,
lat: 5,
lon: 6,
infder: 3,
totins: 1,
genins: 2
}],
complete: function(options) {
options.series[0].name = 'Infizierte';
options.series.push({ // Add map series
name: 'Länder'
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/v3m59kyw/1/
API Reference: https://api.highcharts.com/highmaps/data.seriesMapping
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 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 am trying to create a chart somehow similar to expertoptions' by using Highcharts, however I can't find solution to adding a custom marker to the line, I have tried doing something like:
var myCircle = myChart.renderer.circle(x,y,20).attr({
fill: '#d3d7de'
}).add(circlePointGroup);
var circlePointGroup = myChart.xAxis[0].renderer.g().attr({
translateX: 2000,
translateY: 2000
}).add();
but ended up being a floating static shape, I have here the fiddle, Any help would be appreciated. I have hard time reading their documentation :/
I think that a better approach might be adding this point as a scatter series - that keeps the point in the move while adding new points to the main series. Using renderer.circle renders circle in a static position.
Demo: https://jsfiddle.net/BlackLabel/Lpfj4stx/
var betWindowInterval = setInterval(function() {
myChart.xAxis[0].removePlotLine('markerLineX');
myChart.yAxis[0].removePlotLine('markerLineY');
myChart.series.forEach(s => {
if (s.options.id === 'customPoint') {
s.remove();
}
})
clearInterval(betWindowInterval)
}, 2000);
myChart.addSeries({
type: 'scatter',
data: [{x: lastPointY.x, y: lastPointY.y}],
id: 'customPoint',
marker: {
fillColor: 'red',
radius: 5,
symbol: 'circle'
}
})
API: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
Im trying to add the drilldown option to my piechart but the drilldown does not trigger.
HEre is my codesandbox.io
https://codesandbox.io/s/highcharts-react-demo-43bgg
You need to import the drilldown module and add the drilldown data also for each entity.
Please check updated code sandbox:
https://codesandbox.io/s/highcharts-react-demo-tq52i
To import the drilldown module:
import drilldow from "highcharts/modules/drilldown";
drilldow(Highcharts);
To add the drilldown data:
drilldown: {
series: [
{
id: "DataA",
data: [["v65.0", 0.1], ["v64.0", 1.3]]
},
{
id: "DataB",
data: [["v11.0", 6.2], ["v10.0", 0.29]]
}
]
For each series, data add the drilldown id also.
API Reference: https://api.highcharts.com/highcharts/drilldown
You need to import and initialize the drilldown module:
import drilldown from "highcharts/modules/drilldown";
// init the module
drilldown(Highcharts);
Docs: https://github.com/highcharts/highcharts-react#how-to-add-a-module
I am trying to import a custom map and use the bubble map type in highcharts; however, I am running into the issue where I was not able to see thee bubbles showing up on the map.
The following are the steps that I took to transform the map to the correct format to use for HighMaps:
1. Import the GeoJSON(Map of Denver) to QGIS
2. Selected EPSG:26754 - NAD27 / Colorado Central for CRS
3. Export it as GeoJSON
4. import the GeoJSON to my app
I am suspecting that the crs value is not correct, but I am not sure if I am going in the right direction.
Currently, I am working with this GeoJSON below:
https://jsfiddle.net/amilford/5oxnavm1/1/
Our end goal is to be able to plot couple bubbles on the map based on their lon, lat and z value.
[{name: "A", lat: 39.8207, lon: -104.7691, z: 100},{name: "B", lat: 39.7998, lon: -104.8687, z: 150},{name: "C", lat: 39.7981, lon: -104.4884, z: 200}]
on the Denver map.
Whenever I try to plot more points, everything is stacking on each other, at the end I am only able to see two stack of dots on the screen with no map on the background.
The map seems to work if I don't try and plot points on it and the points seem to work on other non-custom maps (such as a world map or a US map).
I found the solution here: https://www.highcharts.com/forum/viewtopic.php?t=35170
turns out setting the 'hc-transform' on the map to:
{
"default": {
"crs": "WGS84"
}
}
worked for me too!
Another solution which I can suggest is to use x and y coordinates to render wanted bubbles.
Highcharts.getJSON('https://api.myjson.com/bins/1gwnh0', function(geojson) {
console.log(geojson)
// Initiate the chart
Highcharts.mapChart('container', {
chart: {
map: geojson
},
xAxis: {
visible: true
},
yAxis: {
visible: true
},
series: [{
data: [],
}, {
type: 'mapbubble',
data: [{
name: 'point1',
x: -105,
y: -39.75,
z: 80
}]
}]
});
});
See demo: https://jsfiddle.net/BlackLabel/q1v6u4xp/1/