**edit - I have narrowed it down to this line breaking it - pointFormat: '{series.name}: {point.percentage:.1f}%'
Any ideas why that would happen?
I used highcharts a few years ago and I'm just getting reacquainted. For some reason I can't get anything other than a pie chart working.
Using the basic bar example works fine:
<script>
$(function () {
var myChart = Highcharts.chart('stats_container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
But when I go to use any other example, like a pie chart:
<script>
$(function () {
var myChart = Highcharts.chart('stats_container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
});
</script>
I get a http 500 error. I tried a highstock example too, and the same problem happened. Can anyone see where I am going wrong? I can put in the series and other details for the pie chart, but it's when I start putting in the tooltip & plotoptions that it breaks. Thanks
I use smarty templates, and the js wasn't within a {literal} tag. Oooops
Related
I need to disable the ability to click items in the legend in a HighChart. Normally I would use the following on a point or series as appropriate:
events: {
legendItemClick: function() {
return false;
}
However the page I'm working on requires the entire HighChart to be defined within a JSON object, for example:
{
"chart": { "type":"column"},
"xAxis": { "categories":[a, b, c, d] },
"series": [{
"name": "name",
"data": [0,1,2,3]
}]
}
Obviously I can't put a function within a JSON, so I'm struggling to find a way to disable legendItemClick.
I could override the site templates to build the chart in JS, and then I could solve my problem. But I've been requested to try to make it work within the current system.
I would welcome any suggestions.
EDIT: Added some clarity on why I can't use a function.
Using json data, update your series data as
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
legendActive:true, //attribute for legend, true means click will work
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true,
legendActive:false,
}, {
name: 'Firefox',
y: 10.38,
legendActive:false,
}, {
name: 'Safari',
y: 4.77,
legendActive:false,
}, {
name: 'Opera',
y: 0.91,
legendActive:false,
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
legendActive:false,
}]
Use function for legend click
point: {
events: {
legendItemClick: function() {
return this.legendActive; //this is property from series data
}
}
}
$(document).ready(function() {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
point: {
events: {
legendItemClick: function() {
return this.legendActive;
}
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
legendActive: true,
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true,
legendActive: false,
}, {
name: 'Firefox',
y: 10.38,
legendActive: false,
}, {
name: 'Safari',
y: 4.77,
legendActive: false,
}, {
name: 'Opera',
y: 0.91,
legendActive: false,
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
legendActive: false,
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
I want to show 2 data labels inside pie charts with drill-down. I know this is possible by overlaying 2 pie with different data labels. However, in the drill down, it's only showing 1 data labels, which is the last one I put (the first data label is being ignored by highcharts).
Here is my attempt:
https://jsfiddle.net/firstlutfi/a3v3mhef/
$('#chart').highcharts({
chart: {
type: 'pie'
},
xAxis: {
type: 'category'
},
tooltip: {
headerFormat: '<span style="font-size:10px">{series.name}</span><br>',
pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>',
percentageDecimals: 0
},
plotOptions: {
pie: {
size: '80%',
cursor: 'pointer',
data: [{
name: 'Jakarta',
y: 7000000,
drilldown: 'jakarta_sales'
}, {
name: 'New York',
y: 5000000,
},
]
},
},
series: [{
type: 'pie',
name: 'Sales Details',
colorByPoint: true,
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -30,
connectorColor: '#000000',
format: '{point.percentage:.2f}%'
},
},{
type: 'pie',
name: 'Sales Details',
colorByPoint: true,
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: 30,
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>:<br/> ' + this.y + ' ';
}
}
}],
exporting: {
enabled: true,
},
drilldown: {
series: [
{
name: 'Jakarta Sales',
id: 'jakarta_sales',
data: [
{name:'Car Brand A',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -30,
connectorColor: '#000000',
format:'{point.percentage:.2f}%'
},
y:800000},
{name:'Car Brand B', y:400000},
]
},
{
name: 'Jakarta Sales',
id: 'jakarta_sales',
data: [
{name:'Car Brand A',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: 30,
connectorColor: '#000000',
format:'{point.name}:<br/> {point.y}'
},
y:800000},
{name:'Car Brand B', y:400000},
]
},]
}
});
Update:
click on the jakarta data, and you'll get this
The result that i want is to have 2 labels in the drilldown. one is the amount (on the outside of the pie), and the percentage (inside the pie).
Is anyone know how to use 2 data labels (inside and outside) every chart including the drill down?
Thank you.
I see you use workaround to render multiple-labels per point by using two pie charts. Problem with that solution is.. you can not drilldown from one pie chart to multiple pie charts (ID's are unique).
Reminder: there is also another solution: Highcharts. Pie chart. DataLabels formatter
In your case, try async-drilldown (see details in drilldown event) instead:
https://jsfiddle.net/BlackLabel/a3v3mhef/77/
Snippets:
create the event:
chart: {
type: 'pie',
events: {
drilldown: function (e) {
this.addSingleSeriesAsDrilldown(e.point, drilldownSeries[0]);
this.addSingleSeriesAsDrilldown(e.point, drilldownSeries[1]);
this.applyDrilldown();
}
}
},
enable drilldown on a point:
data: [{
name: 'Jakarta',
y: 7000000,
drilldown: true // just enabled, no ID
}, {
name: 'New York',
y: 5000000,
}]
setup series references:
var drilldownSeries = [{ ... }, { ... }];
How do I Highlight a slice of pie chart in highcharts on click of a div? More like copying the highlighting functionality of legends but from a differrent div.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
For example in the highchart above I want a different div to do what legends do here. Here is the link to jsfiddle http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-legend/
To do this make the chart a variable and interact with it like a typical javascript Object:
// Build the chart
$(function() {
var chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
$('#button').click(function() {
var point = chart.series[0].data[3]; //Or any other point
point.select();
chart.tooltip.refresh(point);
});
})
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<div id="button" style="background-color:grey; width:100px;color:white;">Select Safari</div>
edit: words
I am trying to get my highcharts graph to look like this or similar to this.
I have tried to use groupped category addon for highcharts, but it down not seem to work well with stack option.
sample in JSFiddle: http://jsfiddle.net/02ey1hbr/7/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -0,
style: {
fontSize: '10px',
align: 'Right',
}
},
categories: [{
name: "Case A",
categories: ["Male", "Female"]
}, {
name: "Case B",
categories: ["Male", "Female"]
}]
},
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [5,3,4,5],
stack: 'StackA'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackA'
},{
name: 'x',
data: [5,3,4,5],
stack: 'StackB'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackB'
}
]
});
To display bar the way you want, you need to get rid of the stack property from all series. Why do you want to preserve them? They are used for dividing series into groups. I also corrected position of labels using x property.
API Reference:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.stack
http://api.highcharts.com/highcharts/xAxis.labels.x
Example:
http://jsfiddle.net/sjtdgq9L/
Within my project, using stacks allows me to get better control over the 12 data sets in a series that is split into 2 stacks. Example in jsfiddle is a smaller version to get the proof of concept working and better interact with community. Stacks also make the code much easier to maintain.
Using: Proper x-axis for Highcharts stack group column as a reference, i was able to modify my example to: http://jsfiddle.net/02ey1hbr/11/ and achieve a working example with stacks. Its not perfect but really close to.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: [{
categories: ["Case A", "Case B","Case C", "Case D"],
labels: {
rotation: -90,
x: -60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 1,
tickLength: 60,
},
{
categories: ['Male', 'Female','Male', 'Female','Male', 'Female','Male', 'Female'],
opposite: false,
labels: {
rotation: 0,
x: 60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 0,
}],
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [1,8,9,16],
stack: 'StackA'
}, {
name: 'y',
data: [1,7,10,15],
stack: 'StackA'
},{
name: 'x',
data: [3,6,11,14],
stack: 'StackB'
}, {
name: 'y',
data: [4,5,12,13],
stack: 'StackB'
},
{
name: '',
data: [0,0,0,0,0,0,0,0],
showInLegend: false,
stack: 'StackB',
xAxis: 1
}
]
});
Change your series to:-
series: [{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
},{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
}
]
I am trying to render a pie chart on the server using PHP and PhantomJS but I am having no luck so far. I followed a lot of guides and threads here and this is what I have tried so far but I am getting a 0 error code which I have no idea what it means.
pieChart.php
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
});
</script>
Test.js
var page = require('webpage').create();
var url = 'pieChart.php';
page.open(url, function (status) {
page.render('pieChart.png');
phantom.exit();
});
Test.php
$error = exec('/usr/bin/phantomjs test.js', $op, $code);
echo $code; // prints 0 on screen