Develop Reference

How to show multiple graphs in drilldown (highcharts)?

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

Generating 3D pie chart using HIghchart and JSON

I am trying to generate a 3d pie chart using HighChart and the data is in JSON. It seem to only generate 2d even though I have enabled 3D.
I am trying to generate a 3d pie chart like this
https://www.highcharts.com/demo/3d-pie
Can someone show me what i am missing on my code below.
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="code.highcharts.com/highcharts-3d.js"></script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'chart1',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
// x: -20 //center
},
subtitle: {
text: '',
// x: -20
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
legend: {
// layout: 'vertical',
// align: 'right',
// verticalAlign: 'top',
// x: -10,
// y: 100,
// borderWidth: 0
enabled:false
},
series: []
}
$.getJSON("data1.json", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
JSON DATA
[{
"name": "",
"data": ["Asset","Total Lending","Total Deposits","Brokered Deposits" ]
}, {
"name": "First Republic Bank",
"data": [48353330,38079817,37130929,1957317]
}, {
"name": "Cathay Bank",
"data": [11488897,8902674,8814629,497369]
}]

You can see the 3d pie working in this codepen. I have updated the pen with your json data.
The only thing missing in your options is:
plotOptions: {
pie: {
depth: 25
}
}
If you look here you can see that some of the charts require not only the chart property to be sent but plotOptions as well.
while some specific settings for different chart type can be found under plotOptions;

spline is not plotting after drilldown - HighCharts

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/

Highchart not fully rendered, only when mouse over

im making a pie chart with a lot of data, however the chart its not fully rendered (only the half) the other half its rendered only when i pass the mouse over, and not always, here is my code!:
// Create the chart
$('#container').highcharts(
{
chart:
{
type: 'pie',
height: 1200,
width: 1200
},
title:
{
text: 'Films by category'
},
yAxis:
{
title:
{
text: 'Total percent market share'
}
},
plotOptions:
{
pie:
{
shadow: false,
center: ['50%', '50%']
}
},
tooltip:
{
valueSuffix: '%'
},
series:
[
{
name: 'Film cateories',
data: browserData,
size: '60%',
dataLabels:
{
formatter: function()
{
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
},
{
name: 'Films',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels:
{
formatter: function()
{
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
},
cursor: 'pointer',
point:
{
events:
{
click: function()
{
alert("Value "+this.y+" category "+this.category+" id "+this.id);
}
}
}
}]
});
});
Thanks in advance!
JSFiddle

Legend and Axis titles not showing in Highcharts Graph

I have a Highcharts Graph that is displaying three different energy costs. I can't seem to get my legend to show nor can I get the axis titles to show.
The Legend should have the titles on; Gas, Electric, Oil and they should also be on the axis too.
The link to the JSFiddle is:
http://jsfiddle.net/petenaylor/HHEfW/3/
(function ($) { // encapsulate jQuery
$(function () {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['Electric', 'Oil', 'Gas'],
colors = Highcharts.getOptions().colors;
$.each(names, function (i, name) {
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 10,
y: 100,
borderWidth: 0
},
rangeSelector: {
selected: 12
},
title: {
text: 'Energy Prices'
},
yAxis:[{opposite:false},{opposite:true},{opposite:true,offset:50}],
series: [
{
name: 'Electric',
yAxis:0,
data: [
[1072915200000, 5.73],
[1073001600000, 5.81],
[1073088000000, 5.23],
[1073174400000, 5.32]
],
tooltip: {
valueDecimals: 2
}
}, {
name: 'Oil',
yAxis:1,
data: [
[1072915200000, 29.73],
[1073001600000, 29.73],
[1073088000000, 29.73],
[1073174400000, 29.73]
],
tooltip: {
valueDecimals: 2
}
}, {
name: 'Gas',
yAxis:2,
data: [
[1072915200000, 0.823],
[1073001600000, 0.82],
[1073088000000, 0.82],
[1073174400000, 0.82]
],
tooltip: {
valueDecimals: 2
}
}
]
});
});
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 4
},
yAxis: [{ // Primary yAxis
labels: {
formatter: function () {
return (this.value > 0 ? '+' : '') + this.value + '%';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Electric',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Oil',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Gas',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
})(jQuery);
Can anyone help me show the legend and axis titles?
The legend also needs to be click-able so that each line disappears and reappears when clicked.
Many thanks for your help
Pete

For legend you should add enabled parameter with true value.
http://jsfiddle.net/HHEfW/5/
legend: {
enabled: true
}
yAxis titles don't work, because are not defined, so you should add title parameter with text value. http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/title-text/