I haven't been able to get my map to show any data; it just renders blank and in the console there's an error of "Uncaught TypeError: Cannot read property 'length' of undefined". I believe that the versions of Highstock and Highmaps that I use are compatible so I don't think that's the issue, however I could be wrong.
Click here for the fiddle
JS (geo_data is being fetched with AJAX)
$('#map').highcharts('Map', {
title: {
text: 'Installs Map'
},
colorAxis: {
min: 0
},
series: [{
data: geo_data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['hc-key', 'country_id'],
name: 'Installs',
states: {
hover: {
color: '#BADA55'
}
}
}],
credits: {
enabled: false
}
});
Use the newest highstock master branch.
<script src="http://github.highcharts.com/highstock.js"></script>
http://jsfiddle.net/4a79s3qp/2/
Related
this may seem a noob's question but when I try to use setExtremes or showResetZoom on my xAxis, I get this in the console:
Uncaught TypeError: copt.xAxis.setExtremes is not a function
However my xAxis is correctly defined and works perfectly on plenty of other functions. I've copy-pasted code from several jsfiddler examples, but no way...
Here is my code:
Abs_ChartOptions= {
chart: {
zoomType: 'xy',
resetZoomButton: {
position: {
verticalAlign: 'top',
y: -50
},
}
},
title: { text: ''},
xAxis:{
type: 'datetime',
labels: { format: '{value: %d/%m/%Y}'},
tickInterval: 24*36e5, //24h
title:{ text: 'Date'},
crosshair: true,
},
yAxis: [{
title: { text: ''},
alternateGridColor: '#FDFFD5',
crosshair: true
}],
series: []
}
And on call site, after defining the series and the xMin/xMax values(which are correctly set on their way):
copt= clone(Abs_ChartOptions);
copt.xAxis.setExtremes(xMin,xMax);
copt.showResetZoom();
I've tried using directly Abs_ChartOptions instead of a clone, same issue.
NB: Using copt.xAxis.min= xMin; copt.xAxis.max= xMax; works fine for zooming, but I don't get the "reset zoom" buttton.
What did I miss? Is there some extra module needed or whatever ?
Thx in advance
You need to call both methods on a chart instance, not on the options configuration object.
const Abs_ChartOptions = {
...
};
const chart = Highcharts.chart('container', Abs_ChartOptions);
chart.xAxis[0].setExtremes(1, 3);
chart.showResetZoom();
Live demo: http://jsfiddle.net/BlackLabel/e81nj64v/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart
I cannot seem to get the tooltip value label to change using the tooltip: { pointFormat: "custom label"} option.
I'm integrating Highcharts in the chartkick gem, and I've ensured that chartkick is indeed using the highcharts adapter. The other library options work such as xAxis and yAxis.
Here is the code in question:
column_chart #registrations.joins(:clinic).group("clinics.name").count,
title: "Registrations Per Clinic",
library: {
tooltip: {
pointFormat: "Registrations: <b>{point.y}</b>"
},
xAxis: {
title: { text: "Clinic" }
},
yAxis: {
allowDecimals: false,
title: { text: "Number of Registrations" }
}
}
No matter what the tooltip renders with the word Value
You can try tooltip.formatter : Documentation
When using Highcharts Navigator the docs mention:
Unless data is explicitly defined on navigator.series, the data is borrowed from the first series in the chart.
$(function () {
$('#container').highcharts('StockChart', {
navigator: {
series: {
lineWidth: 1
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
But as in the example of Highcharts Navigator itself here the data is not exactly the data from the first series in the chart. In this example the date is between 2007-2015 but navigator only shows 2008-2014. Is there a way to override this option? How can I change this?
I have one chart and i want to include hover on area but i found it works only on point only.
series: [{
name: 'Target',
type: 'polygon',
data: [[153, 42], [149, 46], [149, 55], [152, 60]],
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
enableMouseTracking: true
}],
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
http://jsfiddle.net/onhfLqdm/3/
As area is bounded by points so how can i hover area instead of points?
Update On hover on each polygon asker wants to show data coming from json.To do so in a div out of container please view this fiddle
In Tooltip One more option to show some info coming from json ,tooltip can be used.Put your data using some name like "someText" (as in my fiddle )and get it in formatter function of tooltip using
this.options.someText
See this fiddle for data in tooltiip
Old Answer:
plotOptions: {
series: {
events: {
mouseOver: function () {
$("#polygon").html('Moused over Event')
.css('color', 'green');
},
mouseOut: function () {
$("#polygon").html('Moused out Event')
.css('color', 'red');
}
}
}
}
Fiddle link is here
Steps to reproduce.
We have a chart that display 4 series of data, and we have the corresponding legends with each series.
THe initial chart is loaded with 1 years worth of data.
We then remove all data-series from the chart by clicking on the 4 legends
We then change the Zoom level of the chart - e.g. going from a 6 month zoom, to a 3 month zoom. (NOTE: We change Zoom with no data-series being displayed).
We then re-enable the data-series by clicking on the legends.
The chart does not redraw correctly. To get the chart to redraw we have to reload the entire page.
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 600px"> </div>
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
navigator: {
enabled: false
},
legend: {
enabled: true
},
rangeSelector: {
selected: 4
},
scrollbar: {
enabled: false
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
JsFiddle Example
It looks like a bug, so I've reported it to our devs here: https://github.com/highslide-software/highcharts.com/issues/1568
A simple workaround :
After some trial and error, I found out that if you do not disable the navigator, the above bug is not exhibited. (Navigator is enabled by default.)
Comment the line as shown below:
navigator: {
//enabled: false
}
Js Fiddle : http://jsfiddle.net/msjaiswal/FDXBu/1/
Certainly this is a bug in Highcharts but we can live with this above simple workaround.
This issue has been resolved in version 1.3.2 of HighStock.