title: Using Highcharts with SPServices jQuery library to create Pie Chart
body: <p>This is my very first <a href="http://www.highcharts.com/" rel="nofollow noreferrer">HighCharts</a> project and I'm having some issues displaying the data that I'm fetching using <a href="http://spservices.codeplex.com/" rel="nofollow noreferrer">SPservices</a>.
  I found this tutorial (<a href="http://hubertvdmsp.blogspot.ca/2012/10/sharepoint-to-highcharts.html" rel="nofollow noreferrer">SharePoint to Highcharts</a>) 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:</p>
  
  <pre><code>$(document).ready(function() {
  
  var namesArray = [];
  var valuesArray = [];
  $().SPServices({
      operation: "GetListItems",
      async: false,
      listName: "Test",
     CAMLQuery: "&lt;Query&gt;&lt;OrderBy&gt;&lt;FieldRef Name='Person'/&gt;&lt;/OrderBy&gt;&lt;/Query&gt;",
     CAMLViewFields: "&lt;ViewFields&gt;&lt;FieldRef Name='Person' /&gt;&lt;FieldRef Name='Age' /&gt;&lt;FieldRef Name='Earnings' /&gt;&lt;FieldRef Name='Names' /&gt;&lt;/ViewFields&gt;",
  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 '&lt;b&gt;'+ this.point.name +'&lt;/b&gt;: $'+ this.y;} }, }},
  
          subtitle: {
              text: 'This chart shows value from a SharePoint list using SPServices',
              x: -20
          },
  
     tooltip:{shared: true,pointFormat: '{series.name}: &lt;b&gt;{point.values}$&lt;/b&gt;{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
          }]
      });});  
  </code></pre>
  
  <p>This is what I see in the browser:</p>
  
  <p><img src="https://i.stack.imgur.com/EeKqA.jpg" alt="enter image description here"></p>
  
  <p>Thanks in advance for any suggestion.</p>