High chart problwm with multiple axes with dynamic data - highcharts

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.

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/

Format y-axis values using numeral JSHighCharts

I want to format my values on the y-axis using HighCharts. Suppose I pass 14000, it should print "14K" on the y-axis. How can I do that? I've benn trying using numeral.js, but to no avail.
<!DOCTYPE html>
<html>
<head>
<title>Charts demo </title>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script >
$(function () {
$('#container').highcharts({
colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart: {
type: 'column',
marginBottom : 50,
marginTop : 150,
height : 700
},
title: {
text: ''
},
xAxis: {
categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
width: 700,
tickmarkPlacement: 'on',
labels: {
y : 40,
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.6'
},
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
tickInterval: 20,
title: {
text: ''
},
labels: {
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.5'
},
formatter: function() {
return "$"+ this.value ;
}
},
stackLabels: {
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular'
},
enabled: true,
formatter: function() {
return "$"+ this.total ;
}
}
},
legend:{
enabled:false,
width: 600,
floating: false,
x:50,
align: 'left',
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular',
opacity : '.8'
},
borderWidth: 0
},
tooltip: {
enabled: false
},
credits : {
enabled : false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'FTE-OpEx ',
data: [5000, 30000, 40000, 700000],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [20000, 20000, 30000, 20000],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [30000, 40000, 4000, 2000],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}, {
name: 'HW/SW',
data: [3000, 4000, 4000, 20000],
pointWidth: 30
}, {
name: 'Other',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}]
});
});
</script>
</head>
<body id="body">
<div id="container" style="height: 100%; width: 100%; position: center; margin-left: 5%; "></div>
</body>
</html>
}
It's problem with your formatter which returns default value, see API. If you want to keep numeric symbols, call defaultLabelFormatter.
Demo: http://jsfiddle.net/BlackLabel/uL2jx0t9/1/
yAxis: {
labels: {
formatter: function() {
return '$' + this.axis.defaultLabelFormatter.call(this);
}
}
}

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 remove High Charts Gird Lines

I have the following High Chart of type Bar. I did some online search on how to hide the grid lines , I was able to hide grid lines except first line. can anybody suggest me where i am the doing the mistake.
HTML
<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; max-width: 800px; height: 400px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
width:300,
height: 100,
type: 'bar'
},
title: {
text: ''
},
title: {
text: ''
},
xAxis: {
categories: ['Wind', 'Flood', 'EQ'],
tickWidth: 0,
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ''
},
gridLineColor: 'transparent',
minorGridLineWidth: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
}, legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
labels:
{
enabled: false
},
exporting: { enabled: false },
plotOptions: {
series: {
borderWidth: 0,
minPointLength:10 ,
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [10],
color: '#9CC7DC'
}, {
name: 'Jane',
data: [21],
color: '#72AFCD'
}, {
name: 'Joe',
data: [31],
color: '#1479ac'
}]
});
)};
You need to disable axis line by setting lineWidth parameter as 0.

Resources