highcharts shows exception "c is undefined" for pie chart - highcharts

I'm using highcharts in GXT application.
There are 2 charts in GXT collapsible panel,
one is column chart, the other one is pie chart
And there always pop up an exception showing
(TypeError): c is undefined
fileName: http://127.0.0.1:8888/js/highcharts.js
lineNumber: 118
columnNumber: 0
when injecting the json data for pie chart(column chart works normally).
Does any one can help me to check this?
Here is the JSON data for pie chart
{
"title" : {
"text" : "pie chart"
},
"chart" : {
"type" : "pie",
"renderTo" : "container",
"events" : {
"load" : function(event) { this.id = 'chart320002'; $wnd.registerChart(this, true);}
}
},
"series" : [ {
"name" : "COUNT",
"data" : [ [ "A", 37 ], [ "B", 23 ], [ "C", 21 ], [ "D", 21 ], [ "E", 23 ], [ "F", 19 ], [ "G", 20 ] ]
} ],
"exporting" : {
"buttons" : {"printButton":{"enabled":false}},
"type" : "img/png",
"url" : "http://127.0.0.1:8888/export/hiChart"
},
"credits" : {
"enabled" : false
},
"plotOptions" : {
"pie" : {"dataLabels":{"formatter":function(){return this.point.name+': '+$wnd.Highcharts.numberFormat(this.percentage,2)+'%';}}}
},
"xAxis" : {
"title" : {
"text" : "Compliant"
}
},
"yAxis" : {
"title" : { }
}
}

UPDATE: Include the code from the Highcharts web site, i.e. http://code.highcharts.com/highcharts.js. When I do this, I get pie charts!! Woot!
I have the same issue using different data. All of the line based charts plot correctly.
I copied your JSON to jsfiddle and it runs. Then I pasted your JSON into my project, same error, "c is undefined".
The only difference I can see is that when I do this:
$('#chart').highcharts({...});
I get $(...).highcharts is not a function, so I am using:
var chart = Highcharts.Chart({...});
Code for my pie chart that generates the same error.
var piechart = new Highcharts.Chart({
chart: {
borderColor: '#000000',
borderWidth: 2,
margin: 32,
renderTo: 'piechart',
type: chartType
},
series: [{
name: 'Channel',
data: [{
name: 'Web',
y: 75.6
},{
name: 'Mail',
y: 24.4
}]
}],
title: {
text: 'Revenue'
},
});
Which also runs in jsfiddler as $('#piechart').highcharts ..., but not my web page.

Related

How to use image on label depending on data?

I have a polar chart and I want to use little icon on label. The icon to use depend on data.
So I add an url with the icon in the data of the series but I cannot take it in the xAxis.
xAxis: {
labels: {
formatter: function() {
return '<image src='+this.point.icon+'/>';
},
useHTML: true
}
},
yAxis: {
max: 7,
tickInterval : 1
},
plotOptions: {
column: {
pointPadding: 0,
groupPadding: 0
},
series: {
stacking : "normal"
}
},
series: [{
name : 'Serie A',
color : "#76DFE4",
data : [
{name : "Data 1", y : 3, icon : "https://via.placeholder.com/15" },
{name : "Data 2", y : 3, icon : "https://via.placeholder.com/15" },
{name : "Data 3", y : 2, icon : "https://via.placeholder.com/15" }
],
},{
name: 'Serie B',
color : "#37C0F7",
data: [
{name : "Data 1", y : 1, icon : "https://via.placeholder.com/15" },
{name : "Data 2", y : 2, icon : "https://via.placeholder.com/15" },
{name : "Data 3", y : 3, icon : "https://via.placeholder.com/15" }
]
Please see the JSFiddle here : https://jsfiddle.net/gpn6mLah/9/
Thank you
You can refer to the icon property in this way:
xAxis: {
labels: {
formatter: function() {
var point = this.chart.series[0].userOptions.data[this.pos];
if (point) {
return '<image src=' + point.icon + '/>';
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/vdqk45no/

How can I get every bar in different colour using Highchart?

The Highchart graph code is shown below I want every bar label color is different. Currently, I'm getting the same color in bar
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'Popular '
},
credits:{
enabled:false
},
xAxis: {
max: 20,
type: 'category',
style:{
fontSize: '12px'
}
},
yAxis: {
min: 0,
allowDecimals:false,
title: {
text: 'Number of applications',
style:{
fontSize: '12px'
}
},
gridLineWidth:0,
minorGridLineWidth: 0,
tickLength: 5,
tickWidth: 1,
tickPosition: 'inside',
lineWidth:1
},
scrollbar: {
enabled: true
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'hi'
},
series: [{
name: Stats',
data: data,
color:'#2ecc71',
pointWidth: 25,
}],
Data format is :
[
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
],
]
The output is shown in the picture I want every bar is in a different color can you help me?
Referring to comments you can set a specific color to a single point by adding a color property programmatically to its object like that:
series: [{
data: [
["Qualcom", 17],
{
name: "The ram",
y: 12,
color: 'red'
},
["Aoperty", 8],
["Ob.", 8],
["Sugh", 8]
],
color: '#2ecc71'
}]
API reference:
https://api.highcharts.com/highcharts/series.column.data.color
Demo:
https://jsfiddle.net/BlackLabel/craqy1sv/1/
If you want to add a specific color to a point when a condition is matched you can loop through each series point in chart load event and update a matched point:
chart: {
type: 'column',
events: {
load: function() {
var chart = this,
series = chart.series[0];
series.points.forEach(function(point) {
if (point.name === 'The ram') {
point.update({
color: 'red'
})
}
});
}
}
}
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
https://jsfiddle.net/BlackLabel/jmuoevz1/
You need to set colorByPoint :true to use different colors like that
series: [{
name: 'Stats',
data: [
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
]
],
colorByPoint: true,
pointWidth: 25,
}]
Fiddle

How can i load external json file in highcharts for making bar chart

I have tried to load JSON file from external link in Highcharts. I am doing this code by referring the example given in Highcharts website,but when I loading the web page,it doesn't show any bar chart and when opening console there is no error found.I have following type of json data.
[
{
"Country_Name": "MYANMAR",
"value": [
143
]
},
{
"Country_Name": "MONGOLIA",
"value": [
46
]
},
{
"Country_Name": "ZIMBABWE",
"value": [
1
]
},
{
"Country_Name": "Bahrain",
"value": [
1
]
}
]
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('try.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});

Highstock show/hide serie

I am having a strange response when I show/hide series clicking in the legend. When I hide a serie the other is incorrectly drawn.
Here is my fiddle:
http://jsfiddle.net/JorgeDuenasLerin/kkE8h/36/
This is the code of the initialization
$('#container').highcharts('StockChart', {
yAxis : [{
height : 180,
lineWidth : 2
}, {
top : 220,
height : 180,
lineWidth : 2
}],
rangeSelector : {
selected : 5
},
tooltip: {
shared: true
},
legend : {
enabled : true
},
title : {
text : 'AAPL Stock Price'
},
series : [
{
name : 'Click on Me!',
data : data,
yAxis: 0,
tooltip: {
valueDecimals: 2
}
},
{
name : 'Click on Me!',
data : data2,
yAxis: 1,
tooltip: {
valueDecimals: 2
}
}
]
});
Someone knows something about it?
Indeed it looks like a known bug reported here: https://github.com/highslide-software/highcharts.com/issues/2348

X-axis category name from string in series list

Is it possible to get the x-axis names from a string in my series list? I'm building this series list on the backend and would like to use the "New York", "LA" and "Chicago" as my x-axis category values.
I would expect "New York", "LA" and "Chicago" as my x-axis labels, however, I'm getting -0.25 through 2.25.
Thanks.
http://jsfiddle.net/nicholasduffy/H7zgb/2/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
series: [{
"data": [
["New York", 3570.5],
["LA", 50128.38],
["Chicago", 5281.22]
],
"name": "Stuff"
}, {
"data": [
["New York", 10140.84],
["LA", 21445.04],
["Chicago", 12957.77]
],
"name": "Junk"
}, {
"data": [
["New York", 65119.6],
["LA", 103118.6],
["Chicago", 78349.6]
],
"name": "Other Stuff"
}]
});
});
As of HighCharts 3 you can use xAxis.type and set it to "category" for your desired behavior without having to specify the category names.
http://api.highcharts.com/highcharts#xAxis.type
I've edited the jFiddle to have the following:
xAxis: {
type: "category"
}
http://jsfiddle.net/H7zgb/22/
I believe you are looking for this...
http://api.highcharts.com/highcharts#xAxis.categories
Take a look at this fiddle...I've added the following:
xAxis: {
categories: ["New York", "LA", "Chicago"]
},
http://jsfiddle.net/H7zgb/3/

Resources