We Keep Coding

HighCharts error #18: Requested Axis Does not exist

I am new to HighCharts and I am trying to display 2 graphs on the same x-axis) axis like shown here: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-multi-axes/.
However, I get an error message: This error happens when you set a series' xAxis or yAxis property to point to an axis that does not exist.
The error occurs in "chart1"
The html and JAVASCRIPT code is as follows:
$(function updat() {
var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var humid = [],
date = [],
high=[],
day=[],
chanceOfRain=[],
humid_final = [],
day_final=[],
high_final=[],
chanceOfRain_final=[]
$.getJSON(url, function (json) {
$(json['Items']).each(function(i, data) {
//Store indicator name
// fill the date array
humid.push(data.humidity);
// fill the string data array
date.push(data.Date);
high.push(data.high);
day.push(data.Day);
chanceOfRain.push(data.chanceOfRain);
});
console.log(date);
// query send string that we need to convert into numbers
for (var i = 0; i < humid.length; i++) {
if (humid[i] != null) {
humid_final.push(parseFloat(humid[i]));
high_final.push(parseFloat(high[i]));
day_final.push(parseFloat(day[i]));
chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
} else {
humid_final.push(null)
};
}
console.log("day_final", day_final);
var chart = new Highcharts.chart({
chart: {
type: 'spline',
renderTo: 'light',
marginBottom: 200
},
title: {
text: 'indicatorName'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: 'Ambient Light Level'
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'light level',
data: high_final //
}]
});
var chart1= Highcharts.chart('temp&humid',{
chart: {
zoomType:'xy'
},
title:{
text:'Humidity and temperature'
},
xAxis:{
categories: [1,2,3],
crosshair: true
},
yAxis: [{
labels:{
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title:{
text: 'Temperature',
style:{
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
},
{ //secondary Y AXIS
gridLineWidth: 0,
title:{
text: 'Humidity',
style:{
color: Highcharts.getOptions().colors[0]
}
},
labels:{
format: '{value}%',
style:{
color:Highcharts.getOptions().colors[0]
}
}
}]
,
tooltip:{shared:true},
legend:{
layout: 'vertical',
align:'left',
x:80,
verticalAlign: 'top',
y: 55,
floating:true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series:[{
name:'Humidity',
type: 'column',
yAxis:1,
data:[12,3],
tooltip:{valueSuffix: ' %'}
},
{
name:'Temperature',
type:'spline',
yAxis:2,
data: [1,2,3],
tooltip:{valueSuffix: ' °C'}
}]
});
}); //getJSON method
setTimeout(updat, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 400px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 400px; left:10px"></div>

You are doing the following:
series:[{
yAxis:1,
},
{
yAxis:2,
}]
You need to do:
series:[{
yAxis:0,
},
{
yAxis:1,
}]
The problem is that axes start indexing at 0. So your index where you set temperature to axis 2 does not work because there is no axis 2. In the demo there are 3 axes, which is why it works with these definitions.

How to add a label to axis

My graph is very similar to this example: http://jsfiddle.net/MrFox1/n6vwqafg/
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div id="container" style="height: 500px; min-width: 410px; max-width: 600px; margin: 0
auto">
</div>
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
// Instanciate the map
Highcharts.mapChart('container', {
chart: {
borderWidth: 1
},
title: {
text: 'US population density (/km²)'
},
legend: {
layout: 'vertical',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'middle',
align: 'right',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series: [{
animation: {
duration: 1000
},
data: data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
});
});
});
I need to add a label to the axis showing the average of all the data shown.
Ideally with a marker to the position in the legend. The same marker that is shown on the axis when you hover over the map, that shows how the color you're pointing to relates to the legend.
The average over all the numbers has already been calculated, it's just about how to show this visually.

You can set tick positions in the color axis via colorAxis.tickPositions (array) or colorAxis.tickPositioner (callback). It will creates a tick for the specified value. If you use a logarithmic axis then those values need to be scaled properly.
colorAxis: {
tickPositions: [Math.log10(1), Math.log10(10), Math.log10(calculatedAverage), Math.log10(100), Math.log10(1000)],
Then use colorAxis.labels.formatter to define text for a specific tick.
labels: {
formatter: function () {
return this.value == calculatedAverage
? 'avg (' + this.value + ')'
: this.value;
}
}
example: http://jsfiddle.net/n6vwqafg/9/

Markers/Circles in Spline chart in highcharts

I have a scenario where in i have to create markers/Circles in Spline chart.
I created spline chart using highcharts, the code is below for the chart.
and my output should be like below. and i have marked the expected circles the image:
$(function () {
var image;
var line,
label,
image,
clickX,
clickY;
var start = function (e) {
$(document).bind({
'mousemove.line': step,
'mouseup.line': stop
});
clickX = e.pageX - line.translateX;
//clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
}
var step = function (e) {
line.translate(e.pageX - clickX, e.pageY - clickY)
if (image) {
image.translate(e.pageX - clickX, e.pageY - clickY)
}
if (label) {
label.translate(e.pageX - clickX, e.pageY - clickY)
}
}
var stop = function () {
$(document).unbind('.line');
}
$('#ao-salesoptimization-graph').highcharts({
chart: {
type: 'spline',
spacingBottom:40,
spacingTop: 5,
spacingLeft: 0,
spacingRight: 10,
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false,
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
gridLineColor: '#eeeeee',
gridLineWidth: 1,
type: 'datetime',
min: Date.UTC(2010, 0, 1),
max: Date.UTC(2020, 0, 1),
labels: {
enabled :false
},
plotLines: [{
color: '#004a80',
dashStyle: 'Dot',
value: Date.UTC(2014, 7, 10), // Value of where the line will appear
width: 5,// Width of the line
zIndex: "10",
label: {
text: '<span class="drag"></span>',
}
}],
tickWidth: 0
},
plotOptions: {
series: {
lineWidth: 4,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: "#4b0081",
states: {
hover: {
enabled: true,
fillColor: "#0047ab",
lineColor: "#fff",
lineWidth: 3,
}
},
}
}
},
yAxis: {
min: 10000,
max: 100000,
gridLineColor: '#eeeeee',
gridLineWidth: 1,
title: {
text: 'Sales',
style: {
fontWeight: "bold",
fontSize: "14"
}
},
label: {
formatter: function () {
return (this.y / 1000) + "k"
}
},
tickWidth: 0,
},
series: salesoptimizationgraphhData()
}, function (chart) {
label = chart.xAxis[0].plotLinesAndBands[0].label;
image = chart.xAxis[0].plotLinesAndBands[0].image;
line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
stroke: '#004a80'
})
.css({
'cursor': 'pointer'
})
.translate(0, 0)
.on('mousedown', start);
image = chart.renderer.image('../../../Content/Img/ao-chart-scroller.png', 285, 300, 64, 24).attr({
zIndex: 100
}).translate(0, 0).addClass('image').on('mousedown', start).add();
});
});
How can i achieve this?

You could use spline and scatter series with Draggable Points plugin.
Example: http://jsfiddle.net/0moy3q71/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
plotOptions: {
series: {
stickyTracking: false
},
scatter: {
cursor: 'move'
}
},
series: [{
data: [[3,200],[5,123]],
draggableY: true,
draggableX: true,
dragMinY: 0,
type: 'scatter'
}, {
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0],
type: 'spline'
}]
});

Hopefully I understand your question correctly. I have created a spline chart. Focus on the August data where I explicitly define a standalone marker. Check this out .
Edited: I don't think it's achievable to move a pointer to a random place as each pointer must have values to both x and y axis. Don't think we can plot something that is floating around in Highcharts context. Not encouraging other HTML/javascript hacking around.
The best I can come out is this. Two series are created. Some points are hidden in the first series and only one big pointer available in second series.

Show datalabels for spiderweb only when hovered over the line or the legend?

I am creating a spiderweb chart following the Highcharts guide. Currently data label are enabled. I want to hide the data on load and only show the data when the user hovers over the line or hovers overs the legend. How can I accomplish this?
Here is a link to my JSFiddle: http://jsfiddle.net/mmaharjan/fqrvq3m8/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Hello World',
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 5,
labels: {
enabled: false,
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [1, 2, 1, 3, 4],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [3, 4, 5, 3, 2],
pointPlacement: 'on'
}]
});
});
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

My suggestion is to use the events mouseOver and mouseOut of the series. These will hide and show the data labels. Then using the callback method when constructing the chart you can hide all the data labels by default and add additional events for hovering the legend items, utilizing the functionality of your mouseOver and mouseOut.
To illustrate, in your chart options you would have:
plotOptions: {
series: {
dataLabels: {
enabled: true
},
events: {
mouseOver: function(event) {
// Show all data labels for the current series
$.each(this.data, function(i, point){
point.dataLabel.show();
});
},
mouseOut: function(event) {
// Hide all data labels for the current series
$.each(this.data, function(i, point){
point.dataLabel.hide();
});
}
}
}
}
And your callback function would be:
$('#container').highcharts({
// Options...
}, function(chart) {
// Hide data labels by default
$.each(chart.series, function(i, series) {
$.each(series.data, function(i, point){
point.dataLabel.hide();
});
});
// Add events for hovering legend items
$('.highcharts-legend-item').hover(function(e) {
chart.series[$(this).index()].onMouseOver();
},function() {
chart.series[$(this).index()].onMouseOut();
});
});
See this JSFiddle for a complete example.

adding new points in a scatter plot

I would like to add new points to the scatter plot in a async manner. For that, there is an api in scatter plot "addpoint" that adds newly sent data to the chart without refreshing the scatter plot. The code used in this is
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(document).ready(function(){
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
]
}]
});
function requestData() {
var chart = $('#container').highcharts();
var points = [
{
x: Math.random() * 100,
y:Math.random() * 80
}
]
var series = chart.series[0];
var data;
chart.series[1].addPoint([Math.random() * 100,Math.random() * 80]);
// call it again after one second
setTimeout(requestData, 1000);
}
requestData();
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
The fiddle is here : http://jsfiddle.net/anirbankundu/T8GT3/1/
Can anyone let me know if there is any possible way to add an array of points instead of adding each point step by step. I will be fetching around 1000 points for each call and the total number of points can go above 100K
Thanks,
Anirban

Use chart.series[1].data to get the current serie data and then use chart.series[1].setData to update it's data.
function requestData() {
var chart = $('#container').highcharts(),
serie = chart.series[1];
// get serie data
var data = serie.data;
// append points to data
for (var i = 0; i < 1000; i++) {
data.push([
Math.random() * 100,
Math.random() * 80
]);
}
// update serie data
serie.setData(data);
}
You can see it working here.
Update - Append points to the current data
function requestData() {
var chart = $('#container').highcharts();
// append points to data
for (var i = 0; i < 1000; i++) {
chart.series[1].addPoint([
Math.random() * 100,
Math.random() * 80
], false);
}
chart.redraw();
}
Demo