I am working with highCharts drilldown. My graph is plotting proper before drilldown. The column and spline is properly getting plot according to X-axis and Y-axis in graph but after drilldown the graph spline is not draw according to Y-axis. I want to plot spline as like before drilldown.
Here is my html
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Here is my js code.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'xy',
events: {
drilldown: function (e){
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'2015':{
name: '2015',
data: [
['Q4-2015',89]
]
},
'2016':{
name: '2016',
data: [
['Q2-2016',95],
['Q3-2016',99]
]
}
},
drilldownsLines = {
'2015':{
type: 'spline',
name: '2015',
data: [
['Q4-2015',11.45]
]
},
'2016':{
type: 'spline',
name: '2016',
data: [
['Q2-2016',11.2],
['Q3-2016',11.5]
]
}
},
series = drilldowns[e.point.name],
seriesLine = drilldownsLines[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, seriesLine);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Rental & Capital Value Trend'
},
xAxis: {
type: 'category',
},
yAxis: [{
min: 0,
title: {
text: 'Rental Value (INR/SF/Month)'
},
labels: {
format: '{value}'
}
}, {
min:0,
tickInterval:5,
title: {
text: 'Capital Value (INR/SF)'
},
labels: {
format: '{value} K'
},
opposite:true
}],
tooltip:{
formatter:function(){
var s='';
$.each(this.points, function () {
if(this.series.type == 'spline'){
s += '<br/>Capital Value : ' + this.y+ 'K';
}else{
s += '<br/> Rental Value : ' + this.y;
}
});
return s;
},
shared:true
},
legend: {
layout: 'horizontal',
align: 'left',
size: '12px',
x: 50,
verticalAlign: 'bottom',
y: 20,
floating: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
name: 'Renatl Value (INR/SFT/Month)',
color: '#EE8908',
data: [
{
name: '2015',
y: 89,
drilldown: true
}, {
name: '2016',
y: 90,
drilldown: true
}
]
},{
name:'Capital Value (INR/SF)',
color:'#F8BB6C',
type:'spline',
yAxis:1,
data:[
{
name:'2015',
y:11.45
},{
name:'2016',
y:15.22
}
],
tooltip: {
valueSuffix: 'K'
}
}
],
drilldown: {
/*activeAxisLabelStyle: {
textDecoration: 'none'
},*/
series: []
}
});
});
On drilldown events you are creating new spline series and you don't specify y axis for them - by default they will be scaled with the use of the first y axis.
Specify a correct yAxis (should be 1 in your example) for the series and the spline will be drawn as you expect.
drilldownsLines = {
'2015':{
type: 'spline',
name: '2015',
data: [
['Q4-2015',11.45]
],
yAxis: 1
},
'2016':{
type: 'spline',
name: '2016',
yAxis: 1,
data: [
['Q2-2016',11.2],
['Q3-2016',11.5]
]
}
},
example: https://jsfiddle.net/2pd1natw/
Related
NET MVC Project, where I use Highcharts. In my charts i have columns and a spline.
I have already implemented drilldown for my chart and it works perfectly, but only for the columns. On the first level the columns and the spline is shown, but when I trigger drilldown only the columns are shown. data2 should be the spline.
var mychart = Highcharts.chart('container', {
chart: {
zoomType: 'xy',
spacingBottom: 40,
spacingTop: 40,
events: {
// DRILLDOWN
drilldown: function (e) {
//Some variables id, func
$.getJSON(`/Home/GetDataForMinuteDrilldown?id=${id}&function=${func}`, function (data) {
console.log(data);
var durationArrMinutes = data.map(function (item) {
return item['minuteavg'];
});
var errorArrayMinutes = data.map(function (item) {
return item['errorsperminute']
});
var minuteArray = data.map(function (item) {
return {
name: drill + ":" + item['minute'],
y: item['minuteavg'],
drilldown: item['minute']
};
});
data2 = {
name: 'Errors per Minute',
type: 'spline',
data: errorArrayMinutes,
tooltip: {
valueSuffix: ' '
}
}
data = {
name: 'Average Duration per Minute',
type: 'column',
yAxis: 1,
data: minuteArray,
tooltip: {
valueSuffix: ' ms'
},
data2 //I think this is the error, but I i know no solution
}
console.log('Data:')
console.log(data);
mychart.hideLoading();
mychart.addSeriesAsDrilldown(e.point, data);
});
}
}
},
title: {
text: 'Performance and Error Analytics'
},
subtitle: {
text: 'Analytics of: ' + func
},
xAxis: [{
type: 'category',
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Errors',
style: {
color: Highcharts.getOptions().colors[2]
}
}
}, { // Secondary yAxis
title: {
text: 'Duration in ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 50,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
series: [{
name: 'Average Duration per Hour',
type: 'column',
yAxis: 1,
data: durationPerHourArray,
tooltip: {
valueSuffix: ' ms'
}
}, {
name: 'Errors',
type: 'spline',
data: errorArray,
tooltip: {
valueSuffix: ' '
}
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'normal',
color: 'black'
},
series: []
}
});
The addSeriesAsDrilldown method allows to add only one series to drilldown. From source code:
Chart.prototype.addSeriesAsDrilldown = function (point, options) {
this.addSingleSeriesAsDrilldown(point, options);
this.applyDrilldown();
};
Instad of addSeriesAsDrilldown, you can use internal addSingleSeriesAsDrilldown method to add both series and call applyDrilldown:
mychart.addSingleSeriesAsDrilldown(e.point, data);
mychart.addSingleSeriesAsDrilldown(e.point, data2);
mychart.applyDrilldown();
Live demo: http://jsfiddle.net/BlackLabel/obukspae/
Source code: https://code.highcharts.com/modules/drilldown.src.js
I want to make the format of my y axis series to only return 2 decimal places.
I have this code:
$('#main-graph').highcharts({
chart:{
zoomType:'xy',
type: 'spline'
},
title: {
text: '',
x: -20 //center
},
xAxis: {
categories: stat_date,
crosshair:true,
},
yAxis: [
{ //0
title: {
text: 'Impressions'
},
},
{//1
title:{
text: "Clicks"
}
},
{ //2
title:{
text: "CTR"
}
},
{ //3
title:{
text: "CPM"
}
},
{ //4
title:{
text: "CPC"
}
},
{ //5 - secondary axis which is the SPEND axis
title: {
text: "Spend",
style:{
// color: Highcharts.getOptions().colors[0]
color: "#8B8B8B"
}
},
opposite:true
}],
tooltip: {
shared: true,
valueDecimals: 2
// pointFormat: "{point.y:,.2f}"
},
legend: {
layout: 'horizontal',
align: 'top',
verticalAlign: 'top',
borderWidth: 0,
floating:true,
x: 0,
y: 0
},
series: [{
name: 'Spend',
data: spend,
yAxis: 5,
type:'column'
}, {
name: 'Impressions',
data: imp,
yAxis: 0,
}, {
name: 'Clicks',
data: clicks,
yAxis: 1
},
{
name: 'CTR',
data: ctr,
yAxis: 2
}, {
name: 'CPM',
data: cpm,
yAxis: 3
}, {
name: 'CPC',
data: cpc,
yAxis: 4
}
]
});
}
I tried adding this line of code:
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
}
}
but it isn't working.
Any ideas? your help will be grealty apprecaited!
Thanks!
I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?
bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.
Can you please take a look at this demo and let me know why I am not able to set the other side yAxis , as well?
$(function () {
$('#chart2').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#5882FA',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Roads', 'Powerlines'],
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return this.x +
' is <b>'+ this.y +'</b>';
}
},
series: [{
data: [{
name: 'Roads',
y: 200
}, {
name: 'Powerlines',
color: '#FF00FF',
y: 50
}]
}]
});
});
I find some sample on the Highcharts API and I tried to follow them on my demo but they didn't work!
Highcharts : bar chart with multiple y axes
I have corrected the problem with your code: DEMO
You will have to pass series data for each y-axis individually:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'column',
data: [7.0, 6.9],
tooltip: {
valueSuffix: ' °C'
}
}]
Well, I think you need to fix your series object. How about this:
series : [{
data : [{
name : 'Roads',
y : 200
}, {
name : 'Powerlines',
color : '#FF00FF',
y : 50
}
]
},
{
yAxis : 1,
data : [{
name : 'Roads',
y : 30
}, {
name : 'Powerlines',
color : '#FF00FF',
y : 10
}
]
}
]
Also you need to add yAxis : 1 as an id to axis (you can explicitly set the id of an axis to make sure)
I'm stuck at MACD plotting in highchart.
I don't understand where I'm doing wrong. Please follow jsfiddle link and try to solve and plotting graph for MACD only.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: [{ // Primary yAxis for volume
title: {
text: 'volume',
style: {
color: 'blue'
}
},
height: '60%',
},{ // Secondary yAxis for Return
height: '60%',
opposite: true
},{
labels: {
align: 'left',
x: -3
},
title: {
text: 'MACD'
},
top: '65%',
height: '35%',
opposite: true
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ { color: "blue",
data: [0.06694678963061322,0.22184874961635637,1,1.031408464251624,0.6989700043360187,1e-7,0.47712125471966244,1e-7,0.17609125905568124,0.6989700043360187,1e-7,1e-7,1e-7,0.47712125471966244,1e-7,0.47712125471966244,0.0791812460476248],
id: "left_bar",
name: "Sentiment",
type: "column",
},{
color: "#F09413",
data: [50,49.805,50.024142,51.9900907806,54.0333013483,56.1568100913,58.3637727279,60.5991052233,62.7140139956,65.2100317526,68.5422643752,72.0447740848,75.7262620405,80.3758545298,85.3109319979,89.457043293,3.9835696837],
id: "right_bar",
name: "Price",
type: "line",
yAxis: 1
},{
algorithm: "MACD",
linkedTo: "right_bar",
name: "MACD",
showInLegend: true,
type: "trendline",
yAxis: 1
}
]
});
});
Accoring to the code: https://rawgit.com/laff/technical-indicators/master/technical-indicators.src.js it looks like periods are hardcoded, so it is a reason why your macd is not calculated. You you no enough points.