My requirement is to turn out other column bar graph in highcharts to dim color when we hover over one. I looked for this on community but found no specific answer. my code is as below:
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<apex:includeScript value="{!URLFOR($Resource.ios, 'jquery-1.9.1.js')}"/>
<script>
var lowerIndex;
var upperIndex;
if({!maxBarVisible}==0)
{
lowerIndex = 0;
upperIndex = 0;
}
else
{
lowerIndex = {!maxBarVisible} - ({!maxBarVisible}-1);
upperIndex = {!maxBarVisible};
}
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginRight: 50,
marginBottom: 30
},
title: {
text:''
},
credits: {
enabled: false
},
legend: {
enabled: false
},
scrollbar:{
enabled:{!showSlider}
},
xAxis: {
min:lowerIndex,
max:upperIndex,
categories: [{!x_axisMonths}]
},
yAxis: {
min: 0,
title: {
text: 'MRR($)'
}
},
colors: [
'rgb(24, 150, 212)',
'rgb(116, 187, 59)',
],
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
tip: 'bottomLeft'
},
series: [{!y_axisData}]
});
});
});
</script>
Any suggestions?
Related
I want to customize non stacked column labels on highchats .
Instead of this
I want to show the labels like this
What i already tried is make another series that shows the percentage.but it's not showing like the expected results.
Is it possible to do in Highcharts ?
<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>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Show Percentage'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Jan',
'Feb'
],
crosshair: true
},
yAxis: {
min: 0,
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
},
series : {
dataLabels : {
enabled :true
}
}
},
series: [
{
name: 'A',
data: [100, 80]
}, {
name: 'B',
data: [50, 40]
}]
});
</script>
You can enable the dataLabels only for the first series and use the render event to position the labels correctly:
chart: {
type: 'column',
events: {
render: function() {
var points = this.series[0].points,
shapeArgs,
y;
points.forEach(function(point, i) {
shapeArgs = point.shapeArgs;
if (point.y > this.series[1].points[i].y) {
y = shapeArgs.y;
} else {
y = this.series[1].points[i].shapeArgs.y;
}
y -= point.dataLabel.height;
point.dataLabel.attr({
x: shapeArgs.x + shapeArgs.width - point.dataLabel.width / 2,
y: y
});
}, this);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/rqp5nb0a/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
https://api.highcharts.com/highcharts/chart.events.render
I had made one highchart in that tooltip is shows date and time in format but it is showing wrong date and time.
Please go through the code below.
HTML Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<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>
Javascript Code
var maxval="94";
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
credits: {
enabled: false
},
chart: {
type: 'column',
renderTo: 'container',
},
title: {
text: 'Weekly Traffic'
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%d-%b-%Y}',
rotation:-45,
},
},
yAxis: {
labels:{enabled: false},
title: {
text: ''
},
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+': '+Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +'<br>'+ Highcharts.numberFormat((this.y /maxval ) * 100) + '%';
}
},
plotOptions: {
line: {
enableMouseTracking: false
},
series:{
pointStart: 1444242600000,
pointInterval: 86400000,
shadow:false,
dataLabels:{
enabled:true,
formatter:function()
{
var pcnt = (this.y /maxval ) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
series: [{
name: 'Firefox',
data: [10,56,32,12,64,13,38],
},{
name: 'Chrome',
data: [52,59,10,60,94,3,8],
},{
name: 'Edge',
data: [22,56,20,35,14,73,38],
},{
name: 'Opera',
data: [30,36,80,65,44,53,81],
},{
name: 'Safari',
data: [40,16,50,77,34,33,36],
}],
});
});
});
The working fiddle is given
here.
you need to set utc false in global option of highcharts.
Highcharts.setOptions({
global: {
useUTC: false
}
});
see Updated fiddle here
I'm using highchart in my web site. I wanna use thousand seperator in tooltip.
Here's the code:
divChart.highcharts({
lang: {
thousandsSep: ','
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<div style="direction:rtl; text-align:center; font-size:16px;">{point.key}</div><table >',
pointFormat: '<tr><td style="text-align: center;color:{series.color};width:100px;"><b style="margin:4px;">{point.y:,.0f}</b></td></tr>',
footerFormat: '</table>'
},
series: temp
});
But it's not working.
And also I wanna display pie chart labels in rtl direction.
Thanks for answering.
You can use a tooltip formatter and inside use a Highcharts.numberFormat
tooltip: {
shared: true,
useHTML: true,
formatter: function() {
return '<div style="direction:rtl; text-align:center; font-size:16px;">'+this.key+'</div><table><tr><td style="text-align: center;color:'+this.series.color+';width:100px;"><b style="margin:4px;">'+Highcharts.numberFormat(this.y,0,'.',',')+'</b></td></tr></table>';
}
},
Example:
- http://jsfiddle.net/bd1hvj1y/
I am trying to get the series in the highcharts from ajax call. But its not working for some reason.I do not get the data populated in the chart. Please can anyone help me with this .
$(document).ready(function() {
$('#exercise').submit(function(e) {
var form = $(e.target);
e.preventDefault();
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
dataType: 'json',
data: form.serialize(),
success : function(data){
alert("parse");
alert(data);
chart4(data);
},
error : function(){
alert("Exercise Error!");
}
});
});
});
This is my ajax call
unction chart4(data){
Highcharts.setOptions({
});
alert("HIT");
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
margin: [50, 150, 60, 80]
},
title: {
text: 'Exercise',
style: {
margin: '10px 100px 0 0' // center it
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
},
},
yAxis: {
min: 0,
title: {
text: 'Minutes'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series:[data]
});
}
[{"duration":120,"date":1418803200000},{"duration":90,"date":1418889600000},{"duration":90,"date":1418976000000},{"duration":90,"date":1419235200000},{"duration":20,"date":1419580800000},{"duration":80,"date":1419667200000},{"duration":120,"date":1419753600000},{"duration":90,"date":1419840000000},{"duration":90,"date":141992600000}]
This is my JSON response
The problem is that you have custom names in the JSON. It should be x/y instaed of durable and date fields. Morever this line: series:[data] should be replaced with series:data becasue your json is array.
I am using highcharts & highstock latest versions and been struggling ever since day 1 to get the download context menu width size right... there seems to be no way to control the context's menu width and I am not sure what I am doing wrong... please take a look on the below image.
Any help would be appreciated.
<div id='CurrentDemand' style='width:1124px; height:400px;'></div>
function Chart_CurrentDemand_Bar(DIVID, TITLE, CATEGORIES, yAxisLabel, Tooltip, SERIES1LABEL, SERIES1VALUES ) {
var Param_CATEGORIESS = JSON.stringify(CATEGORIES);
var Param_SERIES1VALUES = JSON.stringify(SERIES1VALUES);
var data_CATEGORIESS = JSON.parse(Param_CATEGORIESS);
var data_SERIES1VALUES = JSON.parse(Param_SERIES1VALUES);
$("#" + DIVID).highcharts({
chart: {
type: 'column'
},
title: {
text: TITLE
},
xAxis: {
categories: data_CATEGORIESS,
tickInterval: .5,
tickmarkPlacement: 'on',
gridLineWidth: .5
},
yAxis: {
min: 0,
title: {
text: yAxisLabel
}
},
tooltip: {
headerFormat: '<span style="font-size:20px">{point.key}</span><table width=150px>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
animation:true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: SERIES1LABEL,
data: data_SERIES1VALUES
}],
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -20,
height: 30,
theme: {
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
}
}
});
}