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
Related
With help of my previous question, I'm able to set equal heights for all the sections to the funnel. How can I add some extra texts to the edges(right) of every section. I did not find any documentation for this. My expected funnel chart as follows:
Highcharts.chart('container', {
chart: {
type: 'funnel'
},
title: {
text: 'Sales funnel'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
softConnector: true,
inside: true,
},
neckHeight: "0%",
neckWidth: "80%",
width: '15%',
reversed: true,
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
plotOptions: {
series: {
dataLabels: {
inside: true
},
center: ['50%', '50%'],
width: '100%'
}
}
}
}]
}
});
jsfiddle Example: https://jsfiddle.net/kiranuk/xhfbyj64/
Thanks for the help.
For adding extra text on the chart use Highcharts. SVGRenderer
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Sample code:
chart: {
type: 'funnel',
events: {
render: function() {
let chart = this,
point1 = chart.series[0].points[4],
x = point1.dlBox.x + point1.dlBox.bottomWidth + chart.plotLeft + 1,
y = point1.dlBox.y + chart.plotTop - point1.dlBox.height;
if (!chart.myCustomText) {
chart.myCustomText = chart.renderer
.text('1% <br> Did')
.css({
fontSize: '10px',
zIndex: '3px'
})
.add();
}
//pdate text coordinates
chart.myCustomText.attr({
x: x,
y: y
})
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/kLyt6ngs/
since I need to add a description text to some of my y-axis titles I need to set the height of the ticks in a highcharts bar chart. Does anyone know how to get this working? Is there perhaps an automatic height calculation possible?
new Highcharts.Chart({
credits: { enabled: false },
chart: {
renderTo: 'parameterAnalysisChart{0}'.format(chartCount),
type: 'bar',
height: parameters.length * categories.length * 20 + (parameters.length + 1) * 40,
spacingRight: 20
},
title: { text: i18n.t('misc.valueCategory_plural') },
xAxis: {
categories: xAxis
},
yAxis: {
min: 0,
title: { text: null },
labels: { overflow: 'justify' },
allowDecimals: false
},
tooltip: { enabled: false },
legend: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<strong>'+ this.series.name +':</strong> ' + this.y;
}
}
},
series: {
minPointLength: 5,
stickyTracking: false
}
},
series: series
});
Kindly take a look at following fiddle in which i tried to remove the categories but on removing categories its placing numbers instead of it by default and also showing those numbers in tooltip.
All I am trying to do is that categories or numbers doesnot display on chart or on tooltip and only stackedbar appears on the chart , So kindly let me know how can i do it .Thanks,
http://jsfiddle.net/EJFsH/3/
$(function () {
var data = [ {
name: 'Year 2008',
data: [0, 914, 4054, 732, 34]
}];
data = $.grep(data, function (category) {
return $.grep(category.data, function (item) {
return item > 0;
}).length > 0;
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: data
});
});
I'm not 100% sure of what you are asking for. But, to turn off the XAxis or yAxis labels, juse labels : {enabled:false} and to change the tooltips use tooltip:{formatter: function() {...}}
see this fiddle:
http://jsfiddle.net/6ypq4/
xAxis: {
title: {
text: null
},
labels : {
enabled: false
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
enabled: false
}
},
tooltip: {
formatter: function() {
return this.y + ' millions';
}
},
I want to build a lightweight dashboard with Highcharts. First, look at this graphic http://jsfiddle.net/jerryvermanen/Zr7zE/.
I want to make a dashboard with this visualization. When clicking on a point, I want to display additional information below the visualisation. For instance, I want to show a picture (.jpg), some more information about this point and a URL to the specific source.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'DAYS BETWEEN RELEASE AND CEREMONY',
style: {
fontSize: '22px'
}
},
subtitle: {
text: ''
},
xAxis: {
min: 0,
reversed: true,
title: {
enabled: true,
text: 'Days difference'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'longdashdot',
width: 1,
value: 365,
label: {
text: 'ONE YEAR',
y: 580,
rotation: 0,
textAlign: 'left',
}
}]
},
yAxis: {
min: 1929,
max: 2012,
title: {
text: 'Year'
},
labels: {
formatter: function() {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'In<b>'+this.y +'</b>this movie was released<br/><b>'+ this.x +'</b>days from the ceremony.';
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
radius: 4,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Nominees',
marker: {
symbol: 'circle'
},
Can anyone help me out with this project?
You can bind a click event to the point using the following code.
plotOptions: {
scatter: {
point: {
events: {
click: function() {
// do what you want
// you can get the point reference using `this`
}
}
}
}
}
demo
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
}]
});
});