I have this code that get the data from SharePoint using ajax, and the datatable plugin creates the table.

function LoadAIP(state){
var call = $.ajax({
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"}});
call.done(function (data,textStatus, jqXHR){
$('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaData": data.d.results,
"aoColumns": [
{ "mData": "ROCode" },
{ "mData": "AIP" },
{ "mData": "NotificationDate" }],"bRetrieve": true,
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"aButtons": [ "xls"], 
"sSwfPath": ../js/datatables/TableTools/media/swf/copy_csv_xls_pdf.swf",
"bFilter": true}} );});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);});}

Is there a way to represent this data using Google Visualization API? I have been reading the documentation, but I haven't found there exactly what I need. thanks!

2 Answers 2


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.


var namesArray = [];
var valuesArray = [];
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]);
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

Yes you can. But i hope you are not confusing DataTables with DataTable

SharePoint will not give you json object directly in format you want for Google Visualization API. You need to create it manually in java script and then pass it to Google Visualization API.

You have your "data.d.results" from Sharepoint. Loop through each result and construct an object you need: Here is an example.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.