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!


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
| improve this answer | |

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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