I'm using JavaScript to format the y values of a piechart to two decimal places but they are not appearing on the chart.
I need to take the percentage of each and then return them. fiddle
If the fiddle doesn't work this is my code.
$(function () {
var dataPie =[];
var abc =[{"val":"19981","name":"TOTAL"},{"val":"2051","name":"\"NATURAL GAS\""},{"val":"274","name":"\"OTHER FOSSIL FUELS\""},{"val":"8826","name":"\"DUAL FUEL\""},{"val":"5351","name":"\"NUCLEAR\""},{"val":"2628","name":"\"HYDRO\""},{"val":"501","name":"\"WIND\""},{"val":"350","name":"\"OTHER RENEWABLES\""},{"val":" ","name":"\"UNKNOWN\" "}];
$.each(abc,function(i,el)
{
var total = null;
if(el.name == "TOTAL"){
total = parseInt(el.val);
}else{
var p = parseInt(el.val) / total * 100;
dataPie.push({name :el.name,y: p});
}
});
$('#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:.2f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.2f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Brands",
colorByPoint: true,
data: dataPie
}]
});
});
highcharts is capable to do that ,you need to simply use
{point.percentage:.2f}
See the fiddle, which has your last question's data updated here
Related
i am using pie chart of highcharts and i am not able to popluate dynamic data. Here is static form pie chart view
and code for above graph is
Highcharts.setOptions({
colors: projectColor.split(','),
});
Highcharts.chart('myChartStatics', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
type: 'pie',
},
title: {
text: ''
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
}
},
series: [{
type: 'pie',
innerSize: '60%',
name: 'Tasks',
colorByPoint: true,
data: [
[
"Inbox", 12
],
[
"Usage Guidance", 12
],
[
"Jobeegoo", 12
],
]
}]
});
now i want to add data array dynmaic on ajax call i am tried but it does not show graph
projectName = projectName.split(',')
totalTask = totalTask.split(',')
var loop = [];
for(var x = 0; x < projectName.length; x++){
loop.push([projectName[x] , parseInt(totalTask[x])]);
}
var data_value = JSON.stringify(loop);
console.log(data_value)
and console disply
[["inbox",128],["Usage Guidance",116],["FocusChain",0]]
tell me where i am wrong
I Have a Pie Chart Whose functionality is working fine right now. The Problem is with its display.When I Hover upon the Pie Chart's one section, The other sections's opacity of the pie chart get low. As shown Below
My Script is Here :
<script type="text/javascript">
var data = <?php echo json_encode($json_data) ?>
data.forEach(function(el) {
el.name = el.label;
el.y = Number(el.value);
});
Highcharts.chart('userpie', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: undefined
},
credits: {
enabled: false
},
exporting: { enabled: false } ,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme &&
Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Users',
colorByPoint: true,
data: data
}]
});
</script>
Am I missing Something ?. Please Help. Thanks in Advance
You can change the opacity property in the inactive state:
plotOptions: {
pie: {
states: {
inactive: {
opacity: 1
}
},
...
}
}
Live demo: http://jsfiddle.net/BlackLabel/05qwthgz/
API Reference: https://api.highcharts.com/highcharts/series.pie.states.inactive.opacity
I've got the following array which I want to use for draw pie chart with highchairs
and this is my code
var dataChart = [];
function getData()
{
return $.get('/report/charts-top-10-claimant')
.done(function(data) {
for (var i=0; i<data.length; i++) {
dataChart.push(data[i]);
}
});
}
getData();
$(function() {
console.log(dataChart);
$('#test').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{point.y} <b>({point.percentage:.1f}%)</strong>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</strong>: {point.y} ({point.percentage:.1f}%)',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
colorByPoint: true,
data: []
}]
});
$('#claimant-by-amount').on('click', function(e) {
var chart = $('#test').highcharts();
chart.series[0].setData(dataChart);
});
});
After loading the page and checking the error console saying "Uncaught Highcharts error #14: www.highcharts.com/errors/14 ". What am doing wrong, please help me out
If you click on the error in console it should redirect you to:
https://www.highcharts.com/errors/14
Which clearly states what is the problem.
Your y-values are strings when numbers are expected.
I need to include my json String output to a highcharts --pie chart category
but chart is not loading properly
This is my JSON string
var json = {"{\"name\":\"BillToMobile\"}":{"y":2.35},"{\"name\":\"Telenav\"}":{"y":13.59}}
Highcharts.chart('container', {
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: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: json
}]
});
Below is the chart what I'm getting when loading this jsonstring.
Can any one help me with this because I'm new to this.Thanks in advance.
Try formatting your json this way
var json = [{name: "BillToMobile", y: 2.35}, {name: "Telenav", y: 13.59}]
To convert the json you have you can use this:
ES5 or earlier
var properJson = [];
for (var i in json) {
var item = JSON.parse(i);
for (var j in json[i]) {
item[j] = json[i][j];
}
properJson.push(item);
}
ES6
var properJson = [];
for (var i in json) {
var item = JSON.parse(i);
Object.assign(item, json[i]);
properJson.push(item);
}
I facing a strange problem while generating a 3D-Pie chart using highcharts. The colors on different slices are not loading initially and are displaying only after mouse hover.
Code snippet:
module.pieChart = function (divid, title, subTitle, seriesData) {
//seriesData is in form of json
window[divid] = new Highcharts.Chart({
chart: {
renderTo: divid,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: title
},
subtitle: {
text: subTitle
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}, legend: {
enabled: true
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
}
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: title,
data: seriesData
}]
}, NodataMessage);
};
If anyone have any suggestions or solution to it.?
EDIT
DEMO
Its about Highcharts.getOptions().colors. This function generate 10 colors, and after tenth, colors list is null. And you try to push color like this:
// there is no color for i > 9
color:data[i].color;
Highcharts.getOptions().colors output is : ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#8085e8", "#8d4653", "#91e8e1"]
So, you should remove it from your options, or manually define it.
and working example:
DEMO
The problem is as #AliRıza Adıyahşi said - length of colors array. Simple solution is to take width of colors array, then instead of colors[i] use colors[i % colors.length]. See live demo: http://jsfiddle.net/nQ8k8/4/
Or just don't set colors, let Highcharts do that for you: http://jsfiddle.net/nQ8k8/5/