We Keep Coding

Highcarts, removes html on categories

So I have this issue where i pass in categories with html, but if I send in
foo
the only thing that comes out is
<a>foo</a>
Does anyone know why this happens? Here is the code for the highchart. This has worked before and I haven't changed anything that I can remember. These are all the details I have to post. How many more details do you need?
var test1 = Highcharts.chart('zoneChart', {
chart: {
type: 'bar',
height: 600
},
title: {
text: ''
},
xAxis: {
categories: categories,
labels: {
useHTML: true,
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: null
}
},
tooltip: {
valueSuffix: '%',
formatter:function(){
var deviation = this.point.series.options.avvik;
var app = this.x;
var name = this.point.series.name;
var value = this.point.y
var html = this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.y,0,',','.') + '%</b><br/>';
$.each(deviation, function(i, item) {
/*<![CDATA[*/
if(item.key == app && item.avvik > 0) {
/*]]>*/
html = name + ': <b>' + Highcharts.numberFormat(value,0,',','.') + '%</b><br/><br />Har '+item.avvik+' avvik!';
}
})
return html;
}
},
credits: {
enabled: true,
},
legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
overflow: 'none',
crop: false,
useHtml: true
}
},
series: {
stacking: 'normal',
dataLabels: {
useHTML:true,
enabled: true,
color: '#FFFFFF',
align: 'right',
enabled: true,
overflow: 'none',
crop: false,
y: -10,
formatter: function(){
var app = this.x;
var html = '';
$.each(this.series.options.avvik, function(i, item) {
/*<![CDATA[*/
if(item.key == app && item.avvik > 0) {
/*]]>*/
html = '<img style="padding: 5px;" src="/css/icons/32/error.png" />';
}
})
return html;
}
}
}
},
credits: {
enabled: false
},
series: [seriesObject]
});

That behaviour was introduced in Highcharts 9 and it is intended. You can separate the click handlers from the config.
Highcharts.addEvent(Highcharts.Chart, 'load', e => {
[...e.target.renderTo.querySelectorAll('a.alerter')].forEach(
a => a.onclick = function () { alert(a.innerHTML); }
);
});
Live demo: https://codepen.io/TorsteinHonsi/pen/RwoWPqd
Please check this github issue: https://github.com/highcharts/highcharts/issues/15031 for more information.

highmap does not display

$(document).ready(function () {
Highcharts.mapChart('container1', {
chart: {
map: 'map',
spacingBottom: 20
},
title: {
text: 'areas'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: false,
joinBy: ['area', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
// Only show dataLabels for areas with high label rank
format: null,
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['area'];
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.area}: <b>{series.area}</b>'
}
}
},
series: [{
name: 'Area1',
data: ['1','2'].map(function (code) {
return { code: code };
})
}, {
name: 'Area2',
data: ['3','4'].map(function (code) {
return { code: code };
})
}, {
name: 'nodata',
data: [{
code: 'RU'
}]
}]
});
});
i have to display highmap on my web page . i have followed this example
https://www.highcharts.com/maps/demo/category-map
i am not getting any error but my map is not loading or displaying. actually shapefile is not displaying . above is is my code

You should use jQuery to load your data after DOM is loaded:
$(document).ready(function () { ... });
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<!-- Import the world -->
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
Highcharts.mapChart('container1', {
chart: {
map: 'custom/world', //add the world as a map
spacingBottom: 20
},
title: {
text: 'areas'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: false,
joinBy: ['iso-a2', 'code'], //join by iso-a2
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
// Only show dataLabels for areas with high label rank
format: null,
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['iso-a2']; //join by iso-a2
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series: [{
name: 'Area1',
// use country code as CODE
data: ['FR','BE'].map(function (code) {
return { code: code };
})
}, {
name: 'Area2',
data: ['ES','PT'].map(function (code) {
return { code: code };
})
}, {
name: 'nodata',
data: [{
code: 'RU'
}]
}]
});
});
</script>
<div id="container1" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
EDIT : Here is a working fiddle, because the one in SO seems to have some bugs: https://jsfiddle.net/zxmfvp0u/10/

Drawing a dynamic Mixed Bar and Line chart with HIghchart.js with socket.io for live data

I am trying to draw a dynamic, mixed bar and line graph using Highchart.js. I am getting live data to my webpage using socket.io (I'm using Flask as my webserver so using Flask-socketIO).
I am able to print the data coming to my webpage using console.log, but I am missing something for which it is not rendered in the chart.
I am trying to add xAxis as well as both the Series value.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link href="../static/css/authz.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var myChart = Highcharts.chart('containerX', {
chart: {
zoomType: 'xy',
events: {
load: function () {
// set up the updating of the chart on each sample
var categories = this.xAxis[0].categories;
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
var series1 = this.series[0]
var series2 = this.series[1]
socket.on('my_response_data', function (sample) {
//add chart data to series
var x = sample.logTime
var y = sample.logDuration
var z = sample.totalSession
console.log( x + " " + y + " " + z) //Printing properly to console e.g 2018-01-25T03:58:35.781 3 211
categories.push(sample.logTime)
series1.addPoint(y, false, true);
series2.addPoint(z, false, true);
myChart.redraw();
});
}
},
},
title: {
text: 'Sacred Tests'
},
subtitle: {
text: 'Source: My Secret Source'
},
xAxis: [{
categories: [],
crosshair: true
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Sessions',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Duration',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Sessions',
type: 'column',
yAxis: 1,
data: [],
tooltip: {
valueSuffix: ''
}
}, {
name: 'Duration',
type: 'spline',
data: [],
tooltip: {
valueSuffix: 'ms'
}
}]
});
});
</script>
</head>
<body>
<div id="containerX" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>

It's a problem with displaying only one point at a time with addPoint(point, redraw, shift, animation) and setting shift=true. That will remove previous point and chart will look empty.
Simple solution is to use:
series1.addPoint(y, false, false, false);
series2.addPoint(z, false, false, false);
myChart.redraw();

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.

Auto-refresh Json data in Highcharts

I've been working this for past 4 days but still can figure out how to solve this issue:
The data in the database changes every 5 minutes.
I want to display the data in a new chart without refreshing the whole page.
CODE:
$(function () {
$(document).ready(function() {
$.getJSON("test2.php", function(json) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
renderTo: 'container',
defaultSeriesType: 'spline',
chart: {
type: 'area',
},
title: {
text: 'Transaction Count'
},
subtitle: {
text: '5 Minutes Count'
},
exporting: {
enabled: false
},
xAxis: {
categories:json,
title:{
text: 'Time Of The Day',
style: {
color: '#666666',
fontSize: '12px',
fontWeight: 'normal'
}
},
tickInterval: 4,
type: 'datetime',
labels: {
style: {
fontFamily: 'Tahoma'
},
}
},
yAxis: {
title: {
text: 'Number Of Transaction'
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y:,.0f}</b>'
},
plotOptions: {
column: {colorByPoint: true},
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 5,
states: {
hover: {
enabled: true
}
}
}
}
},
colors: [
'green', //Buy
'#4572A7' //Paid
],
series: json
});
});
});
});

You can change the dataset, like this :
$('#container').highcharts().series[0].setData([129.2,144.0,...], false);
You can redraw, like this :
$('#container').highcharts().redraw();
So, what you need to do, is create a function that (1) first gets the data from the server, (2) then updates the data and (3) then redraws, like this :
var updateChart = function() {
$.getJSON('test2.json', function(data) {
var chart = $('#container').highcharts();
$.each(data, function(pos, serie) {
chart.series[pos].setData(serie, false);
});
chart.redraw();
});
}
To repeat this every 5 minutes, you can use setInterval, like this :
setInterval(function() {
$.getJSON('test2.json', function(data) {
var chart = $('#container').highcharts();
$.each(data, function(pos, serie) {
chart.series[pos].setData(serie, false);
});
chart.redraw();
});
}, 300000);

Instead of putting your Highchart script in the document.ready function, you can create a funcion getHighchart and put the code about into it. and depend on how many seconds you want the code to readload as below, but you have to be referencing the jquery js.
$(function () {
setInterval(getHighChart, 30000); //30 seconds onload="getHighChart()"
});
function getHighChart() {
//to containe you script for loading the chart
}