Highcharts series doesnt show data and render the chart - javascript

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.

Related

How to add dynamic data in highcharts pie chart in laravel

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

Highchart's Pie Chart Opacity Changes on Hover

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

Loading JSON string into a pie chart in highcharts

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);
}

How Can I Remove This White Box Behind This HighCharts Sparkline (Code and Picture Included)

In the code provided below, you can see that I have a list of data series all with Data and a Name, and for each series in that list, I am trying to create a highcharts sparkline. The data for the sparkline is bound using KnockoutJS. However, there is this pesky white background square that I can't figure out how to remove (pictured below).
var highChartsFunction = $(function () {
Highcharts.SparkLine = function (a, b, c) {
var hasRenderToArg = typeof a === 'string' || a.nodeName,
options = arguments[hasRenderToArg ? 1 : 0],
defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
borderWidth: 0,
type: 'area',
backgroundColor: '#eeeeee',
width: 120,
height: 50,
style: {
overflow: 'visible'
},
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
fillOpacity: 0.25,
color: "#2aabb2"
},
},
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
var $tds = $('div[data-sparkline]');
function doChunk() {
var i,
len = $tds.length,
$td,
stringdata,
data,
chart;
for (i = 0; i < len; i += 1) {
$td = $($tds[i]);
stringdata = $td.data('sparkline');
data = $.map(stringdata.split(','), parseFloat);
chart = {};
$td.highcharts('SparkLine', {
series: [{
data: data,
pointStart: 1
}],
chart: chart
});
}
}
doChunk();
});
Here is the html behind the sparklines:
<ul data-bind="foreach: $parent.series">
<li>
<span data-bind="text: Name"></span>
<div data-sparkline="#" data-bind="attr: { 'data-sparkline': Data } "></div>
</li>
</ul>
And finally, the picture of the output:
Is there anyway to remove this white square? I've tried all of the background attributes and the borders and nothing seems to work. Whenever I add this into JFiddle, the charts look just fine and do not have the white square, so I cannot recreate the issue there in order to isolate it. Thank you in advance for any help you can give!
Hard as there isn't a live example. Try the below though:
ul,
ul li {
padding: 0px !important;
margin:0px !important;
}

Highcharts Pie chart not accepting values

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

Categories