Use Google Visualization with Datatables plugin and which get data from REST

I went ahead and used HighCharts plugin and SPServices library, and it works great. The fileds (columns) in the answer are not the same as in the question, because I created a test SP list, but you get the idea.

JS:

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);
        valuesArray.push([names, values]);
        console.log(namesArray);
    });
}
});
chart = new Highcharts.Chart({
chart: {
    renderTo: 'container',
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
},


title: {
    text: 'Total values',
    x: -20, //center
},
credits: { enabled: false
},

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,
},

exporting: {
    enabled: true,
    sourceWidth: 600,
    sourceHeight: 400,
    scale: 2
},

legend: {
    layout: 'vertical',
    enabled: true,
    align: 'right',
    verticalAlign: 'bottom',
    //  x: -300,
    // y: 140,
    //  borderWidth: 0,
    //  floating: true,
    padding: 5,
    itemMarginTop: 10,
    itemMarginBottom: 5,
    itemStyle: {
        lineHeight: '14px'
    }
},

series: [{
    showInLegend: true,
    type: 'pie',
    name: 'Earnings',
    data: valuesArray
}]
});