populating x-axis(Category) Highcharts ajax - json

Question

I need assistance on how to dynamically bind my x-axis. I have written a webservice, that will fetch the data from the stored procedure.
I am stuck on displaying just the first column from the SP as for the x-axis.
$.ajax({
type: "POST",
url: "/path/path.asmx/xpath",
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function(data) {
alert("X_axis function is being hit")
// Parse JSON data:
var jsonCategories = eval('(' + data + ')');
alert(jsonCategories);
// Pass parsed data to the chart:
$('#Div3').xAxis[0].setCategories(jsonCategories);
}
})
// };
$('#Div3').highcharts({
chart: {
type: 'areaspline',
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
}
},
title: {
text: 'Average Disc Space consumption',
style: { fontSize: 10, color: '#E0E0E3' }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 0,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#EEE'
},
legend: {
enabled: true
},
xAxis: {
categories: [],
labels: {
style: {
color: '#E0E0E3'
}
},
plotBands: [{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Disc (GB)',
style: { fontSize: 10, color: '#E0E0E3' }
},
labels: {
style: {
color: '#E0E0E3'
}
}
},
tooltip: {
shared: true,
valueSuffix: ' GB'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'DB size',
data: [20, 10, 65, 3, 55, 62, 58]
}, {
name: 'Data size',
data: [19, 34, 47, 31, 3, 54, 41]
},
{
name: 'Log size',
data: [11, 34, 49, 38, 38, 80, 10]
},
{
name: 'Backup size',
data: [1, 32, 47, 3, 39, 59, 4]
}
]
});