I have the following code to generate a pie chart. I am calling an external json file to generate the pie chart.
For some reason. it not generating the pie chart. what am i missing or doing wrong?
Here is my code below:
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
JAVASCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- high chart libarary -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
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
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},
series: [{}]
}
setTimeout(function() {
$.getJSON("pie.json", function(json) {
// options.xAxis.categories = json[0]['data'];
// options.series[0] = json[1];
// options.series[1] = json[2];
// chart = new Highcharts.Chart(options);
// debugger
console.log(json);
alert(json);
options.series[0].data = json
chart = new Highcharts.Chart(options);
});
}, 0)
</script>
JSON - pie.json
[{
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
}]
Here we are.The pie json data need a transfrom as I show you below:
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
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
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},
series: [{type:"pie"}]
}
setTimeout(function() {
$.getJSON("pie.json", function(json) {
console.log(json);
alert(json);
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
}, 0);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- high chart libarary -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body></html>
pie..json
[{
"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
}]
Related
I'm trying to pass a secondary variable that's located in each point of my series' data-set. I've managed to that so far but when I try to hover on another data point on the chart, the same data gets printed for all points instead of showing the correct data for that specific point.
I've tried a variety of solutions and I would like to stick to this one, however I have this small hurdle which I can't seem to get over.
Here's a jsFiddle to show the problem I'm encountering: https://jsfiddle.net/Flik1/dfn51akc/47/
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].series.userOptions.data[0].tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<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; max-width: 800px; height: 400px; margin: 0 auto"></div>
I believe its a problem with this specific line of code as its displaying the first 'tt' variable from each series.
this.points[index].series.userOptions.data[0].tt
The expected outcome would be 1 and 5 for column 1, 2 and 6 for column 2, 3 and 7 for column 3 and 4 and 8 for column 4.
Try this.points[index].point.options.tt
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].point.options.tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<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; max-width: 800px; height: 400px; margin: 0 auto"></div>
I am using highcharts and facing the issue.
In my data I have different ratings for different quarters and I am trying
to show all "ratings" on xaxis for all "quarters".
enter code here
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
var response = {
"KBByRating":[
{
"FiscalQtr":"FY2018 Q4",
"FiscalQtrData":[
{
"Rating":"2.5",
"Count":1
},
{
"Rating":"4.0",
"Count":1
},
{
"Rating":"5.0",
"Count":1
}
]
},
{
"FiscalQtr":"FY2018 Q3",
"FiscalQtrData":[
{
"Rating":"2.33",
"Count":1
},
{
"Rating":"1.0",
"Count":3
},
{
"Rating":"5.0",
"Count":17
}
]
},
{
"FiscalQtr":"FY2018 Q2",
"FiscalQtrData":[
{
"Rating":"3.67",
"Count":1
},
{
"Rating":"5.0",
"Count":8
}
]
}
]
};
var ratings=[],ratingsCount=[],periodRatingData=[];
_.each(response.KBByRating, function(val){
ratings=[];
ratingsCount=[];
_.each(val.FiscalQtrData, function(main){
ratings.push(main.Rating),
ratingsCount.push(main.Count);
});
periodRatingData.push({
name: val.FiscalQtr,
data:ratingsCount
});
});
Highcharts.chart('container',
{
chart:{
type: 'column'
},
title: {
text: 'Knowledge Articles Published By Rating'
},
subtitle: {
text: ''
},
colors: ['#005073','#64e572','#24cbe5'],
xAxis: {
categories:ratings,
labels: {
formatter: function(){
var str = this.value;
if(str < 0){
str = '';
}
return str;
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'middle'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return '' +'Count'+ ': ' + this.y;
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth: 40,
groupPadding: '.05',
shadow: false
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name + '</span>';
}
},
credits: {
enabled: true
},
exporting: {
enabled: true
},
series: periodRatingData
});
but I am getting only few ratings which is not correct. Could you please
help out to fix this.
Here I have created live example on jsfiddle:
https://jsfiddle.net/ugyef9ju/
I am using High chart to show charts in my website. for example:
$(document).ready(function(){
//Gender
var Result=[{"Name":"خانم","Value":59,"Percent":3,"Total":0,"Hours":null},{"Name":"آقای","Value":1708,"Percent":97,"Total":0,"Hours":null}];
var data =[] ;
for (var i in Result) {
var serie = new Array(Result[i].Name, Result[i].Value);
var data22 = [];
data22.push(Result[i].Value);
var obj = {
name: Result[i].Name,
y: Result[i].Value
}
data.push(obj);
}
FixedPieChart(data, "Gender", "بازدید کنندگان به تفکیک جنسیت", '1767', 50);
});
function FixedPieChart(series, elementId, title, total, marginBottom) {
var chart = Highcharts.chart(elementId,
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
style: {
fontFamily: 'B yekan',
fontSize: '14px',
color: 'black'
}
},
title: {
text: ""
},
tooltip: {
//pointFormat: '<span style="color:black;background-color:white"><span style="direction:rtl"><b>{point.percentage:.1f}%</b><br/>{series.name}</span></span>',
//useHTML: true,
//backgroundColor: '#ffffff',
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
allowOverlap: true,
format: '<span style="dirsction:rtl"><b>{point.name}</b>:{point.percentage:.1f}</span>',
style: {
color: 'black'
},
useHTML: true
},
showInLegend: true,
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function () {
return '<div style="text-align: right; direction:rtl">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>';
},
// labelFormatter: function() {
// return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div><div style="width:40px; float:left;text-align:right;">' + this.percentage.toFixed(1)+ '%</div>';
//}
},
series: [{
name: ' از ' + total + ' نفر',
colorByPoint: true,
data: series
}],
credits: {
enabled: false
},
});
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body bg-light dark" id="Gender" style="direction: ltr !important;margin: 0 auto"></div>
in this example I rendered a pie chart. every thing is fine in rendering chart on the page. but after exporting labels are messed up. and labels are not showing correctly.
internationalization in highcharts. See demo at last.
There is use of useHTML: Highcharts.hasBidiBug, for RTL language.
I have disabled dataLables (tried but not working with useHTML: Highcharts.hasBidiBug,).
Hope this helps
$(document).ready(function() {
//Gender
var Result = [{
"Name": "خانم",
"Value": 59,
"Percent": 3,
"Total": 0,
"Hours": null
}, {
"Name": "آقای",
"Value": 1708,
"Percent": 97,
"Total": 0,
"Hours": null
}];
var data = [];
for (var i in Result) {
var serie = new Array(Result[i].Name, Result[i].Value);
var data22 = [];
data22.push(Result[i].Value);
var obj = {
name: Result[i].Name,
y: Result[i].Value
}
data.push(obj);
}
FixedPieChart(data, "Gender", "بازدید کنندگان به تفکیک جنسیت", '1767', 50);
});
function FixedPieChart(series, elementId, title, total, marginBottom) {
var chart = Highcharts.chart(elementId, {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
style: {
fontFamily: 'B yekan',
fontSize: '14px',
color: 'black'
}
},
title: {
text: ""
},
tooltip: {
//pointFormat: '<span style="color:black;background-color:white"><span style="direction:rtl"><b>{point.percentage:.1f}%</b><br/>{series.name}</span></span>',
//useHTML: true,
//backgroundColor: '#ffffff',
},
exporting: {
allowHTML: true
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
allowOverlap: true,
format: '<span style="dirsction:rtl"><b>{point.name}</b>:{point.percentage:.1f}</span>',
style: {
color: 'black'
},
useHTML: true
},
showInLegend: true,
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function() {
return '<div style="text-align: right; direction:rtl">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>';
},
// labelFormatter: function() {
// return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div><div style="width:40px; float:left;text-align:right;">' + this.percentage.toFixed(1)+ '%</div>';
//}
},
series: [{
name: ' از ' + total + ' نفر',
colorByPoint: true,
data: series
}],
credits: {
enabled: false
},
});
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body bg-light dark" id="Gender" style="direction: ltr !important;margin: 0 auto"></div>
Update
Just add exporting.allowHTML in option in chart
exporting: {
allowHTML: true
},
I have a Highcharts pie chart on my page, working fine.
What I would like to do is remove the values displayed on mouseover of the pie and instead display the values statically with dataLabels(?).
I am not that good at JS and have no idea where to start.
See image below for explanation.
$(function() {
$('#total').highcharts({
credits: {
enabled: false
},
data: {
table: document.getElementById('datatable_total'),
switchRowsAndColumns: true,
endRow: 1
},
chart: {
type: 'pie'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -20
}
}
});
});
$(function () {
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br>{point.y}</br>',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Europe',
y: 50
}, {
name: 'Africa',
y: 25
}, {
name: 'Australia',
y: 18
}, {
name: 'US',
y: 7
}]
}]
});
});
<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>
currently i doing Highchart in ColdFusion. I want to pass my data in Highchart to next page when i click on the x-axis' label. The charts i doing is spiderweb. For a scenario,i have x-axis label like 'Overall','Appt Booking', 'Reception', 'Service Advisor', 'Completion Delivery Process'. When i click on overall, the data in overall axis are pass to next page in the link i going. So anyone can guide me how to do it? I manage to link to the page i want,now i just dunno how to get the data to pass to next page.
Below is my code,TQ.
<cfscript>
categories= ['Overall','Appt Booking', 'Reception', 'Service Advisor', 'Completion Delivery Process'] ;
series = [{
'name': 'Last Month',
'data': [3.775,3.5, 3.9, 4, 3.7],
'pointPlacement': 'on'
}, {
'name': 'MTD',
'data': [ 3.775, 3.7, 3.5, 3.9, 4],
'pointPlacement': 'on'
}, {
'name': 'Target',
'data': [3.725, 3.8,3.5, 3.7, 3.9],
'pointPlacement': 'on',
'url': 'https://www.google.com/'
}];
</cfscript>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<script src="highcharts-more.js"></script>
<script>
$(function () {
var categoryLinks = {
'Overall': 'http://127.0.0.1:8500/highCharts/Spiderweb.cfm?id=1234',
'Appt Booking': 'http://127.0.0.1:8500/highCharts/line.cfm',
'Service Advisor': 'http://127.0.0.1:8500/highCharts/combine.cfm'
};
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -1000
},
pane: {
size: '70%'
},
xAxis: {
categories: <cfoutput>#serializeJson(categories)#</cfoutput>,
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
formatter: function () {
return '<a href="' + categoryLinks[this.value] + '">' +
this.value + '</a>';
}
}
},
yAxis: [{
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 3,
endOnTick: true,
showLastLabel: true,
tickPositions: [3,3.5, 4, 4.5, 5],
}],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: <cfoutput>#serializeJson(series)#</cfoutput>
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Try using:
labels: {
formatter: function () {
location.href = categoryLinks[this.value];
}
}
instead of:
return '' + this.value + '';`