I have the following code:
var chart = new Highcharts.Chart({
chart: {
type: 'bubble',
zoomType: 'xy',
renderTo: 'municipalgraph'
},
title: {
text: ''
},
yAxis: {
title: {
text: ''
}},
tooltip: {
formatter: function() {
return this.point.name + '<br/><b>' + this.x + '</b><br/><b>' + this.y + '</b>'
}},
series: [{
data: [67,78,75],[64,12,10],[30,77,82]]
}]
});
I would like to add a name to each point to display it in the tooltip. Is it possible?
You need to replace array of point with object, like:
series: [{
data: [{
x: 67,
y: 78,
z: 20,
customParam: 'custom text1'
},{
x: 14,
y: 68,
z: 50,
customParam: 'custom text2'
},[20,20,20]]
}]
And in the tooltip get parameter form point.options
tooltip: {
formatter: function () {
return this.point.name + '<br/><b>' + this.x + '</b><br/><b>' + this.y + '</b><br/>custom text: '+this.point.options.customParam;
}
},
http://jsfiddle.net/JKLzy/2/
Related
I am working with highcharts and I have to display the series data in form of the percentage. considering first series data as total value and for another calculate its percentage with respect to total
e.g
series: [{
name: 'Total value',
data: [50,100,50,100,50,]
}, {
name: 'Value 1',
data: [5,20,10,62,31,]
}]
I have these values for series data and need to calculate the percentage for value1 field which will be (5*100)/50=20% (50 is consider as total value)
same for all values. I have tried many ways but it considers total value as 50+5, i.e the total of both data fields respectively.
Can anyone help me to solve this problem? I have uploaded the highchart at link
Highcharts.chart('container', {
chart: {type: 'area' },
xAxis: { categories: ['A','B','C','D','E',] },
yAxis: { min: 0,
allowDecimals: false,
title: { text: ' Count'}, },
tooltip: {
headerFormat: '<b>{point.x}</b> ',
pointFormat: '{series.name}: {point.y}<br> ({point.percentage:.1f}%)'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,stacking: 'normal',
dataLabels: {
enabled: true,},},
series: {
cursor: 'pointer',}},
series: [{
name: 'Total value',
data: [50,100,50,100,50,]
}, {
name: 'Value 1',
data: [5,20,10,62,31,]}]});
You can achieve what you are after by using a pointFormatter in the tooltip, like this:
pointFormatter: function() {
return this.series.name + ": " + this.y + "<br/>(" + this.y * 100 / this.series.chart.series[0].data[this.x].y + "%)"
}
Additionaly, if you move the tooltip formatting inside the series, you will only have the tooltip display for the series you want in that way, and not for the total series. Like this:
series: [{
name: 'Total value',
data: [50, 100, 50, 100, 50, ]
}, {
name: 'Value 1',
data: [5, 20, 10, 62, 31, ],
tooltip: {
headerFormat: '<b>{point.x}</b> ',
pointFormatter: function() {
return this.series.name + ": " + this.y + "<br/>(" + this.y * 100 / this.series.chart.series[0].data[this.x].y + "%)"
}
}
}]
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E', ]
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ' Count'
},
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
},
},
series: {
cursor: 'pointer',
}
},
series: [{
name: 'Total value',
data: [50, 100, 50, 100, 50, ]
}, {
name: 'Value 1',
data: [5, 20, 10, 62, 31, ],
tooltip: {
headerFormat: '<b>{point.x}</b> ',
pointFormat: '{series.name}: {point.y}<br> ({point.percentage:.1f}%)',
pointFormatter: function() {
return this.series.name + ": " + this.y + "<br/>(" + this.y * 100 / this.series.chart.series[0].data[this.x].y + "%)"
}
}
}]
});
#container {
min-width: 310px;
max-width: 800px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
Working example: https://jsfiddle.net/ewolden/eudhkgp3/
I am using highcharts.js to build horizontal bar chart. Its working correctly but by default tooltip appears horizontally so I want tooltip position to be vertical instead of horizontal.
Is it possible to achieve that? Any help appreciated!
JSFiddle - Example
Sample Code:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Stacked bar 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: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
});
Expected Output:
I am able to fix this issue using Tooltip.positioner as following -
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
},
positioner: function(labelWidth, labelHeight, point) {
var tooltipX = point.plotX + 20;
var tooltipY = point.plotY - 30;
return {
x: tooltipX,
y: tooltipY
};
}
},
I plan to put the data in y-axis in a mouseover event of my x-axis labels, so that when a user hovers on an x-axis label, it will display a summary text of the values in my stack chart.
Question is how do I access y-axis data inside my x-axis:{...} code
here's my code
http://jsfiddle.net/BkxhA/3/
$(function () {
var categoryImgs = {
'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img> ',
'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> '
};
var totals = new Array();
var stackTotals = new Array();
var i = 5, j = 0;
//totals = HighchartsAdapter
function reverse() {
totals.reverse();
}
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Premium Summary'
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
formatter: function () {
return '$' + this.value;
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',
},
formatter: function () {
totals[i++] = this.total;
return '';
},
}
},
xAxis: {
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
var n = totals.shift();
return '<div class="stacktotal">$' + n + '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
events: {
mouseover: function () {
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>This should be the series y-axis data (this.series.data...something)<p>');
},
mouseout: function () {
$('#hoverboard').html('');
}
},
}
},
linkedTo: 0,
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
},
format: '${y}'
}
}
},
series: [{
name: 'Policy Fee',
y:'$' + this.value,
data: [200.12, 290, 45.78, 71, 120]
}, {
name: 'WOP',
data: [150, 210.23, 150, 200, 100]
}, {
name: 'Income Protection',
data: [89, 400, 258.13, 212, 152]
}, {
name: 'Life Cover',
data: [150, 210.23, 150, 200, 100]
} ]
});
});
Looks like plugin has limitations - in event callback this is pointed to DOM element, instead of something in Highcharts.
To achieve what you need, you can add some custom attribute for created HTML tag in formatter, with info you need. For example passing index:
formatter: function () {
var axis = this.axis,
index = axis.categories.indexOf(this.value);
var n = totals.shift();
return '<div class="stacktotal" data-index="' + index + '">$' + n + '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
Then you can get that value in events:
mouseover: function () {
var chart = $("#container").highcharts(),
index = $(this).find('.stacktotal').attr("data-index");
console.log('Index', index); //index is index of category
var point = chart.series[0].data[index];
console.log('Point', point); // point for specific category in first series
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>' + point.total + '<p>');
},
Demo with all: http://jsfiddle.net/BkxhA/4/
Here is a simplified version of the live scatter chart http://jsfiddle.net/ashwinp/z6QXW/8/
Now i am getting 0 1 2 etc like this on x-axis.i want user defined name on x axis.X axis labels should be pickup-ed from XLables array.
Same code from jsfiddle i have added here
var InfluenceCnt=0;
var QResiduals=[];
var XLables=[];
var HottelingT2=[];
var EllipseChartData;
var EllipseShift;
QResiduals.push('0.5356899');
QResiduals.push('0.5356899');
QResiduals.push('0.6356899');
QResiduals.push('0.2356899');
QResiduals.push('0.3356899');
QResiduals.push('0.1356899');
HottelingT2.push('0.1')
HottelingT2.push('0.2');
HottelingT2.push('0.3');
HottelingT2.push('0.4');
HottelingT2.push('0.5');
HottelingT2.push('0.6');
XLables.push('a')
XLables.push('b');
XLables.push('c');
XLables.push('d');
XLables.push('e');
XLables.push('f');
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Ellipse Plot
EllipseChartData = new Highcharts.Chart({
chart: {
renderTo: 'EllipseContainer',
type: 'scatter',
marginRight: 10,
zoomType: 'xy',
events: {
load: function () {
// set up the updating of the chart each second
EllipseSeries = this.series[0];
setInterval(function () {
EllipseShift = EllipseSeries.data.length > 20;
if (!isNaN(QResiduals[InfluenceCnt]) && $.isNumeric(QResiduals[InfluenceCnt]) && typeof (QResiduals[InfluenceCnt]) != "undefined") { //alert(QResiduals[InfluenceCnt]);
var x = HottelingT2[InfluenceCnt], // current time
y = parseFloat(QResiduals[InfluenceCnt]);
InfluenceCnt++;
EllipseSeries.addPoint([x, y], true, EllipseShift);
}
}, 1000);
}
}
},
title: {
text: 'Ellipse Plot'
},
xAxis: {
title: {
text: 'Sample'
},
plotLines: [{
value:2.5,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: ''
}
}]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0.4,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: ''
}
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>X: ' +
Highcharts.numberFormat(this.x, 2) + '<br/> Y: ' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Ellipse Plot',
data: []
}]
});
});
});
The option you need is 'categories' on the xAxis. Try this:
xAxis: {
title: {
text: 'Sample'
},
categories:XLables,
http://jsfiddle.net/euVvy/
To fix the tooltip, you just need to refer to 'this.x', which will return the category name:
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>X: ' +
this.x + '<br/> Y: ' +
Highcharts.numberFormat(this.y, 2);
}
},
http://jsfiddle.net/4aDQ2/
You can use categories or labels formatter which allows to define "displayed label http://api.highcharts.com/highstock#xAxis.labels.formatter
I am having a problem updating my basic column high chart.
My json array that is returned from the server is:
[{"name":"positive","data":[18,35,32,38]},{"name":"negative","data":[0,14,65,121]}]
I am only using the "data" arrays ^ i.e. jsonArr[0].data and jsonArr[1].data
I have the data set up correctly, however the chart is not depicting these values. Any ideas?
Here is my javascript:
$(document).ready(function() {
var twitterChart;
posArr = [];
negArr = [];
function renderGraph()
{
$.getJSON("FrontController", function(jsonArr, statusTxt, xhr){
console.log("Data returned : " + data);*/
posArr = jsonArr[0].data;
negArr = jsonArr[1].data;
console.log("posArr: " + posArr);
console.log("negArr: " + negArr);
twitterChart.series[0].data = posArr;
twitterChart.series[1].data = negArr;
});
setTimeout(renderGraph, 3000)
}
twitterChart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ':'
},
xAxis: {
categories: [
'Column 1',
'Column 2',
'Column 3',
'Column 4'
]
},
yAxis: {
min: 0,
title: {
text: 'Testing"'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' tweets';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Positive',
data: posArr
}, {
name: 'Negative',
data: negArr
}]
});
renderGraph();
});
</script>
To update series data use twitterChart.series[0].setData(array); see: http://api.highcharts.com/highcharts#Series.setData()