Using Highcharts with SPServices jQuery library to create Pie Chart

Question

This is my very first HighCharts project and I'm having some issues displaying the data that I'm fetching using SPservices. I found this tutorial (SharePoint to Highcharts) and it helped a lot but I'm having issues showing the names of the columns in the charts and the legend, it only shows "Slice" This is my javascript:

$(document).ready(function() {

var namesArray = [];
var valuesArray = [];
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Test",
   CAMLQuery: "<Query><OrderBy><FieldRef Name='Person'/></OrderBy></Query>",
   CAMLViewFields: "<ViewFields><FieldRef Name='Person' /><FieldRef Name='Age' /><FieldRef Name='Earnings' /><FieldRef Name='Names' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var names = $(this).attr("ows_Names");
var values = Math.round($(this).attr("ows_Earnings"));
namesArray.push(names);
valuesArray.push(values);

});  } });  
chart = new Highcharts.Chart({
           chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Total values',
            x: -20, //center
             },

   plotOptions:{ pie: {
allowPointSelect: true,
showInLegend: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: $'+ this.y;} }, }},

        subtitle: {
            text: 'This chart shows value from a SharePoint list using SPServices',
            x: -20
        },

   tooltip:{shared: true,pointFormat: '{series.name}: <b>{point.values}$</b>{point.y}',valueDecimals: 2,shared: true,
        useHTML: true,},


        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -300,
            y: 100,
            borderWidth: 0
        },
        series: [{
         showInLegend:true,
        type: 'pie',
            name: 'Earnings',
            data: valuesArray
        }]
    });});  

This is what I see in the browser:

Thanks in advance for any suggestion.

Answer 1

You must provide the slice names in your series data array. Try it this way

completefunc: function (xData, Status) {
    $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var names = $(this).attr("ows_Names");
        var values = Math.round($(this).attr("ows_Earnings"));
        //namesArray.push(names); <-- YOU DON'T NEED THIS
        valuesArray.push([names,values]);
    });  
});  

For more explaination See the following fiddle
http://jsfiddle.net/krishanudey/XzZa4/1/
If you see the data of the series, you will see that, where the slice name has not been provided, there it got a name as Slice