Highcharts simple column chart: data not showing - highcharts

Question

I'm attempting to pull values from data- attributes in <tr> elements and put them into a small column chart on hover. The chart pops up correctly on hover and the title and axes are rendered, but the chart is empty.
I'm guessing there's something incorrect with how I'm loading data into the Highcharts series option?
Here's my JS code:
$("#campaigns tbody tr:not(.group)").hover(
function() {
var name = $(this).attr("data-name");
var type = $(this).attr("data-type");
var sends = $(this).attr("data-sends");
var conversions = $(this).attr("data-conversions");
var opens = $(this).attr("data-opens");
var bounces = $(this).attr("data-bounces");
$('body').append('<div id="hoverchart"></div>');
$('#hoverchart').highcharts({
chart: {
type: 'column',
width: 300,
height: 200
},
title: {
text: name
},
subtitle: {
text: type
},
xAxis: {
categories: [
'Sends',
'Conversions',
'Opens',
'Bounces'
],
title: {
enabled: false
}
},
yAxis: {
min: 0,
title: {
enabled: false
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
showInLegend: false,
data: [sends, conversions, opens, bounces]
}],
credits: {
enabled: false
}
});
$(document).on('mousemove', function(e){
$('#hoverchart').css({
left: e.pageX+10,
top: e.pageY-10
});
});
}, function() {
$('#hoverchart').remove();
}
);
Any ideas?
Thanks

Answer 1

I was able to fix this by changing:
var sends = $(this).attr("data-sends");
var conversions = $(this).attr("data-conversions");
var opens = $(this).attr("data-opens");
var bounces = $(this).attr("data-bounces");
to:
var sends = parseInt($(this).attr("data-sends"), 10);
var conversions = parseInt($(this).attr("data-conversions"), 10);
var opens = parseInt($(this).attr("data-opens"), 10);
var bounces = parseInt($(this).attr("data-bounces"), 10);