Below is my code:
exec_dashboard_load_chart('exec_dashboard_gender_chart',response);
/**
* A function that loads a chart.
*/
function exec_dashboard_load_chart(id , data){
var myChart = Highcharts.chart(id, {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: data
});
}
The data variable contains the value below:
Here is my fiddle.
Why does my 3d chart doesnt display? I have found no error. I think there's something wrong with my data. Can someone point me, where am I missing?
Check out this Working Fiddle
function exec_dashboard_load_chart(id , data){
var myChart = Highcharts.chart(id, {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
data: data.data
}]
});
}
Related
Whats the best way to achieving the below chart using Highcharts library?
You can create additional pie charts as data labels:
chart: {
events: {
load: function() {
var points = this.series[0].points,
container;
points.forEach(function(p) {
container = p.dataLabel.div.querySelector('.dataLabelChart');
Highcharts.chart(container, {
chart: {
margin: 0,
backgroundColor: 'transparent'
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
series: [{
innerSize: 30,
dataLabels: {
enabled: false
},
type: 'pie',
data: [1, 2, 3]
}],
legend: {
enabled: false
}
});
});
}
}
},
series: [{
dataLabels: {
verticalAlign: 'middle',
enabled: true,
useHTML: true,
formatter: function() {
return '<div class="dataLabelChart" id="' + this.point.index + '"></div>'
}
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/y46ubx1L/
API Reference: https://api.highcharts.com/highcharts/series.scatter.dataLabels.formatter
I have 2 div of same content, I want to display the same pie charts inside the 2 div, however just the first one is showing, I know the idea of duplicate the js code and make the id like #container1, #container2, but is there a way to avoid code duplication.
Thank you.
Here is the js:
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
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: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
});
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
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: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
});
});
And HTML :
<div id='container' style="margin-top:300px">pie1</div>
<div id='container' style="margin-top:500px">pie2</div>
You can define the Highchart configuration object once and use it multiple times, like this:
$(document).ready(function () {
// Using classes to select multiple containers
var $containers = $(".container");
// You just set the configuration object once
var chartConfig = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
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: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
};
// And then for every container init Hightchart with the same object
$containers.each(function() {
$(this).highcharts(chartConfig);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container1" class="container">pie1</div>
<div id="container2" class="container">pie2</div>
Hi I'm facing an issue with 3D Pie Chart using highchart.js
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-pie/
-
highcharts-3d.js:16 Uncaught TypeError: O is not a function
$('#container').highcharts
({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{name:'Firefox',
y:45},
{name:'Firefox123',
y:10}
]
}]
});
any advice? thanks.
Fixed by downloading and changing all source file to latest version.
I have data from ajax response in array, here it is:
"attd": [
{
"y": 1,
"name": "Attendance",
"sliced": true,
"selected": true
},
{
"y": 1,
"name": "SPJ in town",
"sliced": true,
"selected": true
}
]
i want pass this result into highchart, here's my code:
success: function(rs) {
var attdChart = $(".attdChart");
attdChart.unbind();
var jsonData = JSON.parse(rs);
if (jsonData.success) {
var data = jsonData.attd;
var data_array = [];
$.each(data, function(key, value){
data_array.push(value);
});
$('#containerPiechart').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
height: 200,
marginRight: 60
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
}
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 0
},
series: data_array
});
}
I tried to use console.log, here is the result:
It show the result. I assumed that the error in series: data_array cause when i give a hard code in there, the chart showed. But cause the code:series: data_array,there is no chart show.Help me please...
here's my sample code for pie chart that how i do that ,
var options1={
chart:{
renderTo: 'pie_chart',
type: 'pie',
options3d:{
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Title'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Time Fixed',
},
labels: {
overflow: 'justify'
},
tooltip:{
formatter: function() {
return this.series.name +': '+ this.y;
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true
},
showInLegend: true
},
series: {
animation:{ duration: 1000}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 50,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: []
}
// chart = new Highcharts.Chart(options1);
$.getJSON("your_ajax_call_file.php", function(json){
$.each(json, function(key, value) {
var series = {}; // <-------------------- moved and changed to object
series.name = key;
series.data = value;
options1.series.push(series); // <-------- pushing series object
});
var chart = new Highcharts.Chart(options1);
});
just tried out this method , it should helps you definitely . remember just put series as array in var options1.
My code is here
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
{
name: 'FireFox',
y: 15.8
}
]
}]
});
});
In ToolTip
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}
I want to write
tooltip: {
pointFormat: '{series.data.name}: <b>{point.percentage:.1f}%</b>'
}
its Not Working please some one help me
I am following this link
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/
try this point.name should help
demo
tooltip: {
pointFormat: '<b>{point.name}</b>: <b>{point.percentage:.1f}%</b>'
},
I adivce you to use formatter, which allows to customise content. Custom parameter will be kept in point.options.name
http://api.highcharts.com/highcharts#tooltip.formatter