Highcharts custom event point of event is not right - highcharts

i need to add some custom contextmenu on some column charts but here i get some strange results using the highcharts extension custom-events (https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events). i have the following example: https://jsfiddle.net/4zhvdapb/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
events: {
contextmenu: function (e) {
console.log("create context menu for curent series: ")
console.log(e)
console.log(e.point.category)
$('#constext-menu-div').text(e.point.category);
$('#constext-menu-div').css({top: e.pageY, left: e.pageX});
$('#constext-menu-div').show();
}
}
}
},
series: [{
name: 'John',
data: [5.32, 3.22, 4.05, 7.15, 2.22]
}, {
name: 'Jane',
data: [2.55, 2.50, 3.53, 2.05, 1.15]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div style="border: solid 1px; background-color: lightgray; position: absolute; width: 100px; height: 200px; display: none; z-index: 9999;" id="constext-menu-div"></div>
(for some reason the in built code in stack overflow does not work - please use the jsfiddle link)
if you right click for example on the john serie on the buttom right side of the category grapes you will get the point/category of bananas instead of grapes. Same thing for apples where you get oranges.
does anyone have an idea what the problem is?
seems to be a bug: https://github.com/blacklabel/custom_events/issues/119

Related

highcharts x axis categories not updating dynamically vuejs

Below is the highchart application iam working.In mounted i will call axios post that will fetch x axis lables as array.But the x axis categories of highchart is not updating with the given array
Below is the code
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="container" style="min-width: 100%; max-width:100%; height: 600px; margin: 0 auto"></div>
</div>
</div>
</div>
</template>
<script>
var $ = require('../../node_modules/jquery/dist/jquery.js')
var Highcharts = require('highcharts')
// Load module after Highcharts is loaded
require('highcharts/modules/exporting')(Highcharts)
// Create the chart
$(function () {
Highcharts.chart('container', {
chart: {
marginTop: 120,
marginBottom: 100,
type: 'bar'
},
credits: {enabled: false},
exporting: {enabled: false},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50,
reversed: true
},
title: {text: null},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'viewers',
color: '#006666',
pointWidth: 40,
data: [8, 16]
}, {
name: 'calls',
color: '#00FF00',
pointWidth: 40,
data: [7, 14]
}, {
name: 'chats',
color: '#FF8C00',
pointWidth: 40,
data: [8, 16]
}],
xAxis: {
categories: [],
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x: 5,
style: {
fontSize: '1em',
color: '#000',
width: '500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
})
})
export default {
data () {
return {
}
},
mounted () {
//will fetch labels from db
var arr = ['computers', 'games']
this.catList = arr
}
}
</script>
<style scoped>
.container{
margin: 0 auto;
}
#container{
margin: 0 auto;
min-width: 100%;
padding: 0;
max-width:100%;
height: 400px;
margin: 0 auto;
}
</style>
Please give solution to above problem.
To make categories reactive, you should put Highchart code inside component
Note that in xAxis config, we need to put categories: this.categories
new Vue({
el: '#app',
data() {
return {
chart: null,
categories: []
}
},
mounted() {
this.drawChart()
// example after pull data
var arr = ['computers', 'games']
const vm = this;
setTimeout(function() {
vm.categories = arr
vm.drawChart()
}, 2000)
},
methods: {
drawChart() {
if (this.chart) {
this.chart.destroy();
}
this.chart = Highcharts.chart('container', {
chart: {
marginTop: 120,
marginBottom: 100,
type: 'bar'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50,
reversed: true
},
title: {
text: null
},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'viewers',
color: '#006666',
pointWidth: 40,
data: [8, 16]
}, {
name: 'calls',
color: '#00FF00',
pointWidth: 40,
data: [7, 14]
}, {
name: 'chats',
color: '#FF8C00',
pointWidth: 40,
data: [8, 16]
}],
xAxis: {
categories: this.categories,
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x: 5,
style: {
fontSize: '1em',
color: '#000',
width: '500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
})
}
}
})
Working example: https://jsfiddle.net/a9eqd8th/

Highcharts - javascript - incorrect stacked column formatting

With highcharts, I am seeing an overlapping strange behaviour with stacked columns and "percent". You can see it here http://jsfiddle.net/nqjpkc05/, the code is below.
How could I fix it without changing the data structure?
the html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
And the js
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'category',
},
yAxis: {
// min: 0,
//minRange:1,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
grouping: true,
stacking: 'percent',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [{info:'P1',name:0,x:0,y:27},{info:'P2',name:0,x:0,y:8},{info:'P3',name:0,x:0,y:3}]
}, {
name: 'Jane',
data: [{info:'P1',name:1,x:1,y:35},{info:'P2',name:1,x:1,y:6},{info:'P3',name:1,x:1,y:0}]
}, {
name: 'Joe',
data: [{info:'P1',name:2,x:2,y:12},{info:'P2',name:2,x:2,y:5},{info:'P3',name:2,x:2,y:18}]
}]
});
You can move the stack labels on top of the column on load/redraw event - the position can be obtain from point.shapeArgs property.
function positionStackLabels() {
const stacks = this.yAxis[0].stacks.column;
Object.keys(stacks).forEach(s => {
const series = this.series[s];
const topPoint = series.data[0];
stacks[s].label.attr({
y: topPoint.shapeArgs.y - 5
});
});
}
Set events:
chart: {
type: 'column',
events: {
load: positionStackLabels,
redraw: positionStackLabels
}
},
Live example and output
http://jsfiddle.net/mkfn5w15/

How to generate two heatmap on same scale?

Following code generate the heatmaps side by side.
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container1',
type: 'heatmap',
zoomType:'x',
plotWidth:400,
plotHeight:400
},
title: {
text: 'HeatMap1'
},
xAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235']
},
yAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
plotOptions:{
series:{
turboThreshold: 0
}
},
series: [{}]
};
$.getJSON('sample1.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container2',
type: 'heatmap',
zoomType:'x',
plotWidth:400,
plotHeight:400
},
title: {
text: 'HeatMap2'
},
xAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235']
},
yAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
plotOptions:{
series:{
turboThreshold: 0
}
},
series: [{}]
};
$.getJSON('sample2.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<table>
<tr>
<td><div id="container1" style="width: 300px; height: 300px; margin: 0 auto"></div></td>
<td><div id="container2" style="width: 300px; height: 300px; margin: 0 auto"></div></td>
</tr>
</table>
</body>
</html>
But how can i merge two heat map into one plot sharing same x-axis.
Try doing multiple y axis in same pane like this
yAxis: [
{
opposite : false,
title: {
text: 'HeatMap1'
},
top: 0
},{
opposite : false,
title: {
text: 'HeatMap2'
},
top: 30
}]

How to do realtime highcharts in Ruby on Rails?

I want to build realtime highcharts, and i have user table added sidekiq worker which fetches user_table every 5 minutes and i want it show my users data in real time in my rails application?
Below i have static data, how to retrieve data dynamically from database?
In View:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'User balance',
x: -20 //center
},
xAxis: {
categories: ['Users']
},
yAxis: {
title: {
text: 'Balance'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '$'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: User'',
data: [<%= #user.sum('equivalent_sum')%>]
}]
});
});
In Controller:
#user = User.where('balance > ?', 0)

High chart problwm with multiple axes with dynamic data

I am trying to generate multi axes graph uding highchart as below.
But its not working, array generation and all are quite fine.
If i hardcode totalNoOfLabels and totalLabelsSize then its working. Please suggest:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
$(function () {
var result=[{"date":"2013-05-01","propertiesList": {"labelsCount":"14","totalSize":"62.62"}},{"date":"2013-05-04","propertiesList":{"labelsCount":"4","totalSize":"22.43"}},{"date":"2013-05-03","propertiesList":{"labelsCount":"7","totalSize":"34.09"}},{"date":"2013-05-02","propertiesList":{"labelsCount":"13","totalSize":"67.51"}},{"date":"2013-05-05","propertiesList":{"labelsCount":"3","totalSize":"11.65"}}];
var totalNoOfLabels=[];
var totalLabelsSize=[];
var dates=[];
dailyStatList = JSON.stringify(result);
var statsObj = $.parseJSON(dailyStatList);
$.each(statsObj, function() {
dates.push(this.date);
totalNoOfLabels.push(this.propertiesList.labelsCount);
totalLabelsSize.push(this.propertiesList.totalSize);
});
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Info'
},
xAxis: [{
categories: dates
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'No of labels',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Size ',
style: {
color: '#4572A7'
}
},
labels: {
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Labels',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: totalNoOfLabels
}, {
name: 'Size',
color: '#89A54E',
type: 'spline',
data: totalLabelsSize
}]
});
});
labelsCount and totalSize should be numbers, not strings. Parse that values, or put in JSON as numbers and will work properly.

Resources