Highcharts - variable data forces browser lock

Question

I am trying to use the javascript highcharts library to load charts using this function:

function create_chart(success, failed, pending) { var chart = new Highcharts.Chart({ chart: { renderTo: 'graph', margin: [5, 5, 5, 5] }, title: { text: 'Message Sending Status' }, plotArea: { shadow: null, borderWidth: null, backgroundColor: null }, tooltip: { formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; } }, plotOptions: { pie: { allowPointSelect: true, dataLabels: { enabled: true, formatter: function() { if (this.y > 5) return this.point.name; }, color: 'white', style: { font: '13px Trebuchet MS, Verdana, sans-serif' } } } }, legend: { layout: 'vertical', style: { left: 'auto', bottom: 'auto', right: '50px', top: '100px' } }, series: [{ type: 'pie', name: 'Message Status', data: [ ['Successful Messages', success], ['Failed Messages', failed], ['Pending Messages', pending] ] }] }); } 

however this blocks the browser up

I narrowed the problem down to

 data: [ ['Successful Messages', success], ['Failed Messages', failed], ['Pending Messages', pending] ] 

as if I used numbers instead of variables (for example, replaced success with 12 ect) then it works fine

This is confusing since using console.log (success) returns 12, so what could be the reason for this?

Answer 1

to try

 data: [ ['Successful Messages', success - 0], ['Failed Messages', failed - 0 ], ['Pending Messages', pending - 0] ] 

lets see that it does a thing ...