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;
Related
I want to show my categories on the top of each bar chart. like the image.
for this i set bar-chart option as below without any xAxis categories label.
options: {
title: null,
chart: {
type: 'bar'
},
colors: ['#9696b2', '#ff058d'],
xAxis: {
categories: ['Tokyo', 'Fukuoka', 'Hiroshima', 'Osaka', 'Nagoya'],
visible: false,
},
yAxis: {
visible: false,
},
tooltip: {
valueSuffix: ' '
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Compliant',
data: [1300, 1121, 1700, 1121, 700]
}, {
name: 'Non-Compliant',
data: [60, 30, 50, 20, 0]
}]
}
how can i make this one with stacked horizontal bars?
You can align labels to left and position them by x and y properties:
xAxis: {
...,
lineWidth: 0,
labels: {
align: 'left',
x: 0,
y: -24
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4767/
API Reference: https://api.highcharts.com/gantt/xAxis.labels
I have a scatter chart in which there are some points in different series which overlap at exact points.
The x,y for both of these points in different series are same.
So I need to show both of them at the same time in tooltip.
However, the shared option only works when I'm not formatting the tooltip.
It doesn't work when I use pointFormat.
I tried to use formatter, but this just gives current point.
If I switch the chart to line chart, this gives points, which has all the points in the current position. With that, I can iterate and do the formatting.
Chart options:
{
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
borderWidth: 1
}, tooltip: {
formatter: function () {
console.log(this);
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' +
point.point.options.dynamicText;
}, '<b>' + this.x + '</b>');
},
crosshairs:true,
shared: true
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [{x:161.2, y:51.6, dynamicText:"foo1"}]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [{x:161.2, y:51.6, dynamicText:"foo2"}]
}]
}
https://jsfiddle.net/dushyantbangal/ojqde34x/17/
Shared tooltip does not work with scatter series - please check this issue: https://github.com/highcharts/highcharts/issues/1431
The simplest solution is to use line series type with lineWidth property set to 0:
plotOptions: {
series: {
lineWidth: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/3fda1nm4/
API Reference: https://api.highcharts.com/highcharts/series.line.lineWidth
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/
I would like to have something similar to the image below, but the columns representing the classes all stack together now. How do I separate them and allow them to load dynamically as well?
Also I need a legend that says green is band 1, yellow is band 2, orange is band 3 and red is band 4, how do i do that as well? My code is in the JS Fiddle page. I am not allowed to use jQuery, need to use pure JavaScript.
var options = {
chart: {
renderTo : 'container',
type: 'column'
},
title: {
text: 'Topic & Subtopic Mastery'
},
subtitle: {
text: 'Average Level-Stream Mastery vs Average Class Mastery'
},
xAxis: {
categories: topics
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Mastery'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' %'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: resultsData
};
http://jsfiddle.net/kscwx139/2/
I came up with a solution you are looking for with specifying x and y axis data for level and giving appropriate width to the point.
$(function() {
var chart;
$(document).ready(function() {
var i = 0;
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
if (i == 0) {
i++;
return Highcharts.Color(color)
.setOpacity(1)
.get('rgba');
} else {
i++;
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
}
});
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderColor: null
},
title: {
text: 'Mailboxes over Quota'
},
subtitle: {
text: 'Mailbox Size in MB'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ["Overall Topic", "Topic 1", "Topic 2"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Total',
align: 'high'
},
allowDecimals: false,
},
tooltip: {
formatter: function() {
return '' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ',');
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
series: [{
name: 'Level',
color: colors[0],
data: [{
y: 86,
x: 0.25
}, {
y: 80,
x: 1.25
}, {
y: 95,
x: 2.25
}],
pointWidth: 80
}, {
name: '4A',
data: [90, 88, 97]
}, {
name: '4B',
data: [95, 78, 92]
}, {
name: '4C',
data: [80, 69, 84]
}]
});
});
});
To show in label inside your column you can use below code.
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name;
},
y: 25,
}
}
}
You can see it in action at this JSFIddle
I have Drilled the "Column chart".
& Now I want to Drill down the "Pie chart"
my code for showing Pie chart is as below,
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %';
}
}
}
},
series:
[{
type:'pie',
data: model.mixchart
}]
});
});
});
How can I do drilldown in this ?
After Drilldown It should show the Pie chart only. So what should I do for that in the code abve?
At least just Give me some reference links for drilldown in Pie chart so that I can Prefer that one.
There are two methods you can drill down pie chart.
Either you can modify same chart data
You can draw new pie chart using the clicked refrence to previous
chart.
here is my Jsfiddle link.
I have drilled down the pie chart to show column chart.
To drill down a pie chart,What you need is the clicked slice.
to do that what you need is,
plotOptions: {
pie: {
point: {
events: {
click: function() {
//logic for drill down goes here
}
}
}
}
},
Note : If you are drilling down in the same chart..
You will also need plot options for that chart type,If you are drilling down to different chart type.
I hope this helps.
cheers :)
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
backgroundColor: '#e2dfd3',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
//credits for highcharts
credits: {
enabled: false
},
title: {
text: 'Country/Region',
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
borderWidth: 0, // border color control
size: '80%',
allowPointSelect: true,
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
},
dataLabels: {
enabled: true,
color: '#000', //label colors
connectorColor: '#000', // connector label colors
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Country/Region',
data: [
{
name:'United States',
y: 45.0,
},{
name:'Germany',
y: 26.8
},{
name: 'France',
y: 12.8,
sliced: true,
selected: true,
/*drilldown: {
name: ['Disney'],
categories: ['2001', '2002', '2003','2004','2005','2006','2007','2008','2009','2010','2011'],
data: [32591, 29256, 28036, 27113, 26441, 27848, 29210, 29251, 28447, 28731],
color: colors[12]
},*/
},{
name:'Japan',
y: 8.5
},{
name:'United Kingdom',
y: 8.5
},{
name:'Switzerland',
y: 8.5
},{
name: 'South Korea',
y: 6.2
},{
name:'Italy',
y: 6.2
},{
name:'Canada',
y: 0.7
},{
name:'Finland',
y: 0.7
},{
name:'Netherlands',
y: 0.7
},{
name:'Spain',
y: 0.7
},{
name:'Sweden',
y: 0.7
}
]
}]
}/**/
});
});
</script>
Rahul , check out this code. its just sample
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: { renderTo: 'container', type: 'bar'},
title: { text: '' },
xAxis: {
categories: model.buckets,
},
yAxis: {
title: { text: '' }
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
var range=this.category[0];
if (step==0) { // drill down
$.ajax({
type: 'POST',
url: root + "analytics/standard_prospects_prospectaging/?json",
data: { range: range, what: 'drill' },
success: function (o) {
setChart("", o.buckets, o.pcounts, '#e48801');
rebind(o.aging);
step = step + 1;
},
dataType: "json"
});
} else { // restore
console.log(this);
$.ajax({
type: 'POST',
url: root + "analytics/standard_prospects_prospectaging/?json",
data: { oppname: range },
success: function (o) {
window.location.href = "/prospects/index/" + o.oppid;
},
dataType: "json"
});
}
}
}
},
}
},
series: [{
name: 'Prospect Aging',color:'#e48801',
data: model.pcounts
}]
});
});