I want to remove square bracket effect on hover of column chart. I attahced screenshot. JSON code generated by PHP code.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
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: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5]
}]
});
});
For demo http://jsfiddle.net/mvsrdzg4/
try this to remove hover effect,
xAxis: {
categories: [
'Jan',
'Feb',
'Mar'
],
crosshair: false
},
Related
I am using Highcharts to display transaction status for different months. The chart is displaying fine. To show the number of transactions for each month, I have placed a datalabel on top of each column. The code is given below:
$(function () {
$('#hc').highcharts({
chart: {
renderTo: 'container',
type: <?php echo $type ; ?>,
marginRight: 130,
marginBottom: 35
},
title: {
text: 'Transaction Status',
x: -20
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: <?php echo $monnth_series ?>
},
yAxis: {
title: {
text: 'Transactions'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: '#fff',
style: {fontWeight: 'bold'},
formatter: function() {return this.y},
y: -5,
rotation: 360
},
column: {
pointPadding: .2,
groupPadding: 0,
borderWidth: 1
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +': '+ this.y; +'</b>'
}
},
credits: { enabled: false },
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -6,
y: 90,
borderWidth: 0
},
series: <?php echo $series_data ?>
});
});
Now I want to place another datalabel on the body of the column which will show the type of the transaction.
If I try
formatter: function() {return this.series.name},
inside: true,
then the datalabel shows correctly but the datalabel on top of the column does not show up.
Any idea on how to do this ?
Hi I need to create one dynamic column chart. But i am not able to put my values to the data field of value how can i do that
function getusercategorygraph()
{
$.getJSON('config/alumniusermodes.php',function(data){
// Create a new array
var finaldata = [];
var chart;
// Perform your operations
$.each(data, function( index, value ) {
// Create a new hash
var currentItem = {}
// Create the proper values in your hash
$.each(value, function( index, value ) {
currentItem[index] = value;
});
finaldata += currentItem;
});
var chart = new Highcharts.Chart({
chart: {
renderTo : 'user-count',
type: 'column',
},
title: {
text: 'Alumni Users By Category Analytics'
},
xAxis: {
color:'#0077CC',
//type: 'category',
categories: []
},
yAxis: {
title: {
text: 'Total Number of Alumni Members'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y} Members'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} Members</b><br/>'
},
series: [{
name: "Alumni Type",
colorByPoint: true,
//data: [{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
//data: [{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
data : finaldata,
}],
});
});
}
But the graph doesnt show anything. Whats wrong in this code. Please help.
this is the result from api that i got
[{"name":"Standard","y":"52"},{"name":"Silver","y":"24"},{"name":"Gold","y":"20"},{"name":"Platinum","y":"6"}]
Thanks in Advance
To get you started, on line 18, change
finaldata += currentItem;
to
finaldata.push({
name: currentItem.name,
y: parseFloat(currentItem.y)
});
See JSFilddle.
Edit: Used suggestions by Sebastian in comments. Thanks!
Here is the working version keeping the highchart code inside $.getJSON callback function.
I added following PHP back-end code to get highchart sample data.
$data[] = array('name' => 'Standard', 'y'=> 52);
$data[] = array('name' => 'Silver', 'y'=> 24);
$data[] = array('name' => 'Gold', 'y'=> 20);
$data[] = array('name' => 'Platinum', 'y'=> 6);
echo json_encode($data);
exit;
This data is nothing but giving me data to use in highchart. Following is the javascript call to get it functional.
getusercategorygraph();
function getusercategorygraph()
{
$.getJSON('http://<mydomain>/getdata.php',function(data){
var chart = new Highcharts.Chart({
chart: {
renderTo : 'container',
type: 'column',
},
title: {
text: 'Alumni Users By Category Analytics'
},
xAxis: {
color:'#0077CC',
//type: 'category',
categories: []
},
yAxis: {
title: {
text: 'Total Number of Alumni Members'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y} Members'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat:'<span style="color:{point.color}">{point.name}</span>:<b>{point.y}Members</b><br/>'
},
series: [{
name: "Alumni Type",
colorByPoint: true,
data: data
}],
});
});
}
I am new to highcharts and i am using hightcharts graph but volume not showing.When i remove MACD then volume show i don't understand why i am getting this issue!. my code are
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
var ohlc = [],
volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
$(function() {
$('#container').highcharts('StockChart', {
title : {
text : 'MACD of AAPL stock price'
},
subtitle: {
text: 'From may 15, 2006 to May 10, 2013'
},
yAxis: [{
title: {
text: 'Price'
},
height: 200,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
title: {
text: 'MACD'
},
top: 320,
height: 100,
offset: 0,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 500,
height: 60,
offset: 0,
lineWidth: 2
}],
tooltip: {
crosshairs: true,
shared: true
},
rangeSelector : {
selected : 1
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series : [{
name: 'AAPL Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name : 'MACD',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'trendline',
algorithm: 'MACD'
}, {
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
linkedTo: 'primary',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}, {
name: 'Histogram',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'histogram'
}]
});
});
});
Why volume is not showing?
Thanks in advance!
You have three yAxis, but in each serie (except first) you use yAxis:1 which means that series is displayed on that axis. So you need to modify axis index to display on the "last" yAxis.
I have created a duel-axes column chart, columns side by side, and it was working great until yesterday.
Yesterday, it started rendering a stacked column graph instead of the columns showing side by side. After checking the highcharts examples on their website, I realized that theirs are also rendering this way now.
Any thoughts on how to get the columns to be side by side again?
Here is an image of what I see in FF and Chrome:
Here is the js from highcharts.com (http://jsfiddle.net/d4GfS/):
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} mm',
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: 'Rainfall',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'column',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
i am using highcharts for drawing column charts
i have a column chart with multiple series like this
and this is my code :
$(function () {
var chart;
$(document).ready(function() {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get("rgb")]
]
};
});
chart = new Highcharts.Chart({
chart: {
renderTo: "container"
},
title: {
text: "نمودار کلی عملکرد داوطلب",
style:
{
direction: "rtl",
fontSize: "16px"
}
},
yAxis: {
min: -33.3,
max: 100,
startOnTick: false,
title: {
enabled: true,
text: "درصد"
}
},
xAxis: {
categories: [' . implode(",", $chartCats) . ']
},
tooltip: {
formatter: function() {
return this.series.name+"<br/>% "+this.point.y+"<br/>";
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
pointWidth: 20
},
series: {
animation: {
duration: 3000
}
}
},
credits: {
enabled: false
},
series:
[' . $chartData . ']
});
});
});
how can i place all columns with same color beside each other?
for example : all blue columns beside each other then all red column beside each other
In general something like this is not supported, however you can split data into different arrays, as each column will be one series, just linked to 'master' one, see: http://jsfiddle.net/CVvjZ/
Of course this has limitations, since you need to pre calculate values for for x:
xAxis: {
min: 0,
startOnTick: true,
max: 1,
endOnTick: true,
categories: ['Jan', 'Feb', 'Mar']
},
plotOptions: {
column: {
grouping: false,
pointWidth: 20
}
},
series: [{
color: colors[0],
name: 'Tokyo',
id: 'tokyo',
data: [[0.3, 15]]
}, {
color: colors[0],
name: 'Tokyo',
linkedTo: 'tokyo',
data: [[0, 10]]
}, {
color: colors[0],
name: 'Tokyo',
linkedTo: 'tokyo',
data: [[-0.3, 10]]
},{
color: colors[1],
name: 'Osaka',
id: 'osaka',
data: [[1.3, 15]]
}, {
color: colors[1],
name: 'Osaka',
linkedTo: 'osaka',
data: [[1, 10]]
}, {
color: colors[1],
name: 'Osaka',
linkedTo: 'osaka',
data: [[0.7, 10]]
}]
There is also second solution, a little easier is to use stacking options instead of calculating values: http://jsfiddle.net/CVvjZ/1/
And code:
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
color: colors[0],
stack: 1,
name: 'Tokyo',
id: 'tokyo',
data: [15]
}, {
color: colors[0],
stack: 2,
name: 'Tokyo',
linkedTo: 'tokyo',
data: [15]
}, {
color: colors[0],
stack: 3,
name: 'Tokyo',
linkedTo: 'tokyo',
data: [11]
},{
color: colors[1],
stack: 1,
name: 'Osaka',
id: 'osaka',
data: [[1,12]]
}, {
color: colors[1],
stack: 2,
name: 'Osaka',
linkedTo: 'osaka',
data: [[1,13]]
}, {
color: colors[1],
stack: 3,
name: 'Osaka',
linkedTo: 'osaka',
data: [[1,14]]
}]