I have a combo highchart but this is not rendered correctly, this the code that I am using:
<script type="text/javascript">
$(document).ready(function () {
SCurvechart = new Highcharts.Chart({
chart:
{
events: {
load: function () {
var label = this.renderer.label('Details for Company B')
.css({
width: '450px',
color: '#666666',
fontSize: '16px'
})
.attr({
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 50,
verticalAlign: 'top',
y: 5
}), null, 'spacingBox');
}
},
borderColor: '#BBBBBB',
borderWidth: 1,
plotShadow: true,
renderTo: 'SCurvechart_container',
zoomType: 'xy'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend:
{
align: 'left',
backgroundColor: '#FFFFFF',
floating: true,
layout: 'vertical',
verticalAlign: 'top',
x: 120,
y: 100,
itemStyle: {
color: '#666666',
fontWeight: 'bold',
fontSize: '10px',
font: 'Trebuchet MS, Verdana, sans-serif'
}
},
title:
{
text: ''
},
tooltip:
{
shared: true
},
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
events: {
//click: ChartClick
},
showInLegend: false,
stacking: 'normal'
}
},
xAxis:
{
labels:
{
formatter: function () { return this.value; }, style: { color: '#4572A7' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
categories: ['25/07/14','29/08/14','26/09/14','31/10/14','28/11/14','26/12/14','30/01/15','27/02/15','27/03/15','24/04/15','29/05/15','26/06/15','31/07/15','28/08/15','25/09/15','30/10/15','27/11/15','25/12/15','29/01/16','26/02/16','25/03/16','29/04/16','27/05/16','24/06/16','29/07/16','26/08/16','30/09/16','28/10/16','25/11/16','30/12/16','27/01/17','24/02/17','31/03/17','28/04/17','26/05/17','30/06/17']
},
yAxis: [
{
min: 0,
labels:
{
formatter: function () { return this.value; }, style: { color: '#4572A7' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
opposite: true,
title:
{
style:
{
font: '10px Trebuchet MS, Verdana, sans-serif'
},
text: 'Overall Activities'
}
},
{
labels:
{
formatter: function () { return this.value; }, style: { color: '#89A54E' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
title:
{
style:
{
font: '10px Trebuchet MS, Verdana, sans-serif'
},
text: 'Weekly Activities'
}
}],
series: [
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,7,3,5,4,1,2,0,0,0,0,0,1,0,1,0,4,0,0,0], name: 'Target', type: 'column', yAxis: 1, color: '#6699CC' },
{ data: [], name: 'Actual', type: 'column', yAxis: 1, color: '#FAC090' },
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,,,,,,,,,,,,,,,,,], name: 'Actual Acc', type: 'spline', color: '#FF0000' },
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,5,12,15,20,24,25,27,27,27,27,27,27,28,28,29,29,33,,,], name: 'Target Acc', type: 'spline', color: '#376092' }
]
});
});
If you see the compare the chart against the one created in Excel you can see the issue,
https://www.dropbox.com/s/8lrk0vtgwitbdb4/Chart-Screenshot-in-Excel.JPG?dl=0
with the highchart rendered chart:
https://www.dropbox.com/s/c1ga0x3vxa8sbol/Highchart-screenshot.JPG?dl=0
As you can see the line charts are wrong they should be close to each other.
Any help is appreciated.
The problem is that the code setting up the highchart has enabled stacking by setting stacking attribute to 'normal'.
{..., plotOptions: { series: {..., showInLegend: false, stacking: 'normal'}}, ...}
You can disable stacking by removing the stacking attribute. For example...
{..., plotOptions: { series: {..., showInLegend: false}}, ...}
Or you can disable stacking by setting stacking attribute to null. For example...
{..., plotOptions: { series: {..., showInLegend: false, stacking: null}}, ...}
Related
I needed to set a individual color in Plot Options > series > color using Highcarts.
I tried get series name using this.series.name and set color by name but I could not, I always get "undefined"
this.chartYear = new Chart({
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: this.yearData.months
},
yAxis: {
min: 0,
stackLabels: {
enabled: false,
},
title: {
text: null
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
},
pointWidth: this.innerHeight > 800 ? 60 : 40
},
series: {
dataLabels: {
enabled: true,
color: I NEEDED SET INDIVIDUAL COLOR HERE,
style: {
textOutline: 'false',
fontFamily: 'Segoe UI, Robot, Helvetica Neue, Arial, sans-serif',
fontWeight: '400',
color: "#212529",
fontSize: '12px'
}
},
showInLegend: false
}
},
series: series,
exporting: {
enabled: false
}
})
You can define color for data labels on a series level:
series: [{
dataLabels: {
color: 'red'
},
...
}, {
dataLabels: {
color: 'yellow'
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/cv740ygL/
API Reference: https://api.highcharts.com/highcharts/series.column.dataLabels
I have a bar graph, I want to plot a shaded area on the same graph whose max and min range say are -1000k and -1250k, which most probably is a area-range graph. I cannot find an example in highchart doc, so need help.
The graph I have now -> http://jsfiddle.net/hhh2zx3w/6/
var c2chart3=Highcharts.chart("container1", {
colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],
chart: {
type: 'bar',
backgroundColor: 'rgba(0,0,0,0.7)',
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
},
title: {
text: ''
},
xAxis: {
title: {
text: null
},
gridLineWidth:0,
lineWidth:0,
tickWidth: 0,
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
formatter: function(){
return ""
}
},
},
yAxis: {
// min: -2000000,
// max: 1000000,
gridLineColor: '#fff',
gridLineWidth: 0,
lineWidth:0,
plotLines: [{
color: '#fff',
width: 1,
value: 0
}],
title: {
text: '',
align: 'high'
},
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px'
},
},
},
tooltip: { enabled: false },
credits: { enabled: false },
exporting: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style: {
textOutline: false,
color:'#fff',
}
}
},
series: {
colorByPoint: true,
pointWidth: 1,
borderWidth:0,
dataLabels: {
enabled: true,
formatter: function(){
}
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
}]
});
What I want is something like shown in the image
The feature you are referring to is called as the "Plot Bands" in Highchart
Here is how you can do it.
plotBands: [{
color: 'tomato',
from: -1000000,
to: -1250000
}],
you can have plot bands with respect to any axis.
Here is a jsfiddle for your ref: http://jsfiddle.net/hhh2zx3w/7/
Highcharts API ref: https://api.highcharts.com/highcharts/yAxis.plotBands
I am working on a script that produces a chart (Highcharts). This work fine but I would like to add a "click" function which when clicked opens another scropt on the same site. After reading about clickable columns I am not sure how to make it work.
How would I made a column clickable to say google.com
The code I have is:
$(function () {
var categories=[];
var data2 =[];
var chart;
$(document).ready(function() {
$.getJSON("../charts/imaint_audit_water_temp_cold_chart.php", function(json) {
$.each(json,function(i,el) {
if (el.name=="Count")
categories = el.data;
else data2.push(el);
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 40,
marginRight: 30,
marginBottom: 50,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: 'Failed cold water temperatures',
x: -20, //center
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
subtitle: {
text: '',
x: -20
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
plotLines: [{
color: '#808080'
}]
},
legend: {
enabled: true,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
colors: [
'#0066CC',
'#FF2F2F',
],
plotOptions: {
series: {
point: {
events: {
click: function() {
}
}
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
y: 0, // 10 pixels down from the top
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
credits: {
enabled: false
},
series: data2
});
});
});
});
Many thanks in advance for your time.
Here is explained: http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
You could accomplish this with custom url in each bar:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url;
}
}
}
}
},
series: [{
data: [{
y: 29.9,
url: 'http://bing.com/search?q=foo'
}, {
y: 71.5,
url: 'http://bing.com/search?q=bar'
}, {
y: 106.4,
url: 'http://bing.com/search?q=foo+bar'
}]
}]
working fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/
or all the same URL:
point: {
events: {
click: function () {
location.href = "http://stackoverflow.com";
}
}
}
Hope it helps!
UPDATE
If is in a frame, you could try using:
window.top.location.href='URLGoesHere';
"_top" loads content in the top-level frameset (in effect, the whole
browser window), no matter how many nested levels down the current
frame is located
I built a stacked column chart using Highcharts, but there is a problem with dataLabels. Some of the data labels cannot be displayed.
I have created a JSFiddle: http://jsfiddle.net/samsularifin/7gf787vL/1/
This my Javascript code:
$(function () {
$('#ctrend').highcharts({
chart: {
type:'column',
margin: 75,
options3d: {
enabled: false,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: 'Month to Month Rev',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
subtitle: {
text: 'LEVEL',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
plotOptions: {
column: {
depth: 25
}
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb','Mar', 'Apr','May','Jun','Jul']
},
yAxis: {
title: {
text: '(In Bio)'
},
stackLabels: {
useHTML: true,
x: 0,
y:-28,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif',
color:'#722c84',
//textShadow: "1px 1px #000"
},
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.total, 0);
},
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0.1,
dataLabels: {
enabled: true,
//crop: false,
//overflow: 'none',
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
}
},
series: {
dataLabels: {
crop: false
}
}
},
tooltip: {
formatter: function() {
return 'The value for <b>' + this.x + '</b> is <b>' + Highcharts.numberFormat(this.y,2) + '</b>, in '+ this.series.name;
}
},
series: [{
name: 'Voice',
data: [4.77,4.08,4.76,4.66,4.78,4.93,5.07],
index:3,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
},
{
name: 'SMS',
data: [4.07,3.45,4.20,4.28,4.41,4.68,5.23],
index:2,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Other',
data: [0.52,0.49,0.61,0.62,0.62,0.64,0.70],
index:0,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Data',
data:[1.55,1.39,1.72,1.68,1.86,2.15,2.27],
index:1,
shadow : true,
dataLabels: {
enabled: true,
crop: false,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
Need help!
Highcharts thinks that these data labels are too close to show them all.
You can remedy this by allowing overlap, using this code (JSFiddle):
plotOptions: {
series: {
dataLabels: {
allowOverlap: true
// ...
}
}
}
Or making it less likely to occur by reducing the padding (JSFiddle):
plotOptions: {
series: {
dataLabels: {
padding: 0
// ...
}
}
}
i have echoed the data from database in another file.. now i am fetching data . I am new to jquery and highchart.. plz help
my data format passed is :
[
{"name":"a","data":0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]},
{"name":"b","data":[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]}
]
my code for highchart is :
var chartOptions = {
chart: {
renderTo: 'container',
zoomType: 'x',
defaultSeriesType: 'line',
backgroundColor: null,
plotBackgroundColor: null,
borderRadius:20,
plotShadow: false,
events: {
load: function() {
// event.exporting.buttons.infoButton.symbolX=5;
// event.exporting.buttons.infoButton.symbolY=2;
// info_img=0;
// this.renderer.rect(5, 5, 60, 25, 15).attr({ fill: issue_col[1], zIndex: 0 }).add();
}
},
style: {
zIndex: 1
},
marginRight:30
},
title: {
text: 'hello',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none'
}
},
xAxis: {
type:'datetime',
title: {
text: null
}
},
yAxis: {
title: {
text: 'nothing is coming',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none'
}
},
min: 0.0,
},
credits: {
enabled: true,
position: {
align: 'center',
x: 10,
verticalAlign: 'bottom',
y: -3
},
href: "http://www.interscapetech.com",
style: {
cursor: 'pointer',
color: '#909090',
fontSize: '9px'
},
text: "(c)1997- Interscape Technologies Inc. All rights reserved."
},
/*labels:{
items: [{
html: "TM",
style: {
fontSize:'8px',
left: '330px',
top: '140px'
}
}],
style: {
color: 'grey'
}
},*/
lang:{
downloadButtonTitle:'Download Chart',
printButtonTitle :'Print Chart',
infoButtonTitle:'Chart Information',
switchButtonTitle:'Click to Enlarge'
// switchButtonTitle:'Switch to Bar Chart'
},
navigation:{
buttonOptions:{
align:'right',
verticalAlign:'middle',
height:15,
symbolFill: '#4572A7',
hoverSymbolFill: '#768F3E',
hoverBorderColor:'#92A8CD',
borderColor:'#3D96AE',
backgroundColor:'white',
borderRadius:5,
borderWidth:2,
width:20,
symbolX:10,
symbolY:8,
symbolSize:10
}
},
subtitle: {
text: '',
align:'left',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none',
color: 'white'
},
x:3, //-165 if center
y:12
},
plotOptions: {
line: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
zindex:1
},
series:[{
zindex:1
}]
}
,
tooltip: {
formatter: function() {
var ctime= Highcharts.dateFormat('%m/%d/%Y %H:%M:%S',this.x);
var s = '<b>'+ ctime +'</b>';
$.each(this.points, function(i, point) {
var result=Math.round(point.y*10)/10;
s += '<br/>'+ point.series.name +': '+result;
});
return s;
},
shared: true,
backgroundColor: '#FCFFC5'
},
legend: {
itemStyle: {
fontFamily: 'Arial',
fontSize: '12px',
textShadow: 'none'
},
enabled: true
// symbolPadding: 10
},
series: []
};
$(document).ready(function()
{
var url='highchars_test2.php';
alert('helo');
$.getJSON(url, function(seriesData){
$(seriesData).each(function(i, pdata){
console.log();
if(i==(seriesData.length-1) || i==(seriesData.length-2))
{}
else
{
alert(pdata['data']);
chartOptions.series.push(pdata);
}
});
chart = new Highcharts.Chart(chartOptions);
});
});
cannot create the chart.. plz help..
in series a data is not formatted properly ( opening bracket missing)
I added that and its working
check this out http://jsfiddle.net/q6LVV/
Seems like in series a, the opening square bracket is missing before the data array.