Organigramme des éléments de la liste de points de partage

Question

Je souhaite créer un organigramme que je souhaite remplir à l'aide des valeurs d'une liste de points de partage. Je voudrais récupérer des éléments en utilisant REST et Javascript. Voici mon code. Il fonctionne partiellement, mais ne peut pas créer de graphique. S'il vous plaît, aidez quelqu'un.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", { packages: ["orgchart"] }); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
      debugger; 
      $.ajax({    
       url: "http://myurl/_api/Web/Lists/GetByTitle('Employee Hierarchy')/items", 
       type: "GET", 
       headers: { 
        "accept": "application/json;odata=verbose", 
       },   
       success: function (r) { 
        debugger; 

        var items = r.d.results; 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Entity'); 
        data.addColumn('string', 'ParentEntity'); 
        data.addColumn('string', 'ToolTip'); 
        for (var i = 0; i <items.length; i++) { 
        var employeeId = r.d[i][0].toString(); 
        var employeeName = r.d[i][1]; 
        var designation = r.d[i][2]; 
        var reportingManager = r.d[i][3] != null ? r.d[i][3].toString() : ''; 
        data.addRows([[{ 
         v: employeeId, 
         f: employeeName + '<div>(<span>' + designation + '</span>)</div><img src = "Pictures/' + employeeId + '.jpg" />' 
        }, reportingManager, designation]]); 
        var chart = new google.visualization.OrgChart($("#chart")[0]); 
        chart.draw(data, { allowHtml: true }); 
       }, 
       failure: function (r) { 
        alert(r.d); 
       }, 
       error: function (r) { 
        alert(r.d); 
       } 
      }); 
     } 
    </script> 
    <div id="chart"> 
    </div> 

this is the structure of my sharepoint list

Answer 1

L'exemple suivant montre comment visualiser les données de liste SharePoint comme organigramme via Google Visualization API

google.load("visualization", "1", { packages: ["orgchart"] }); 
google.setOnLoadCallback(displayChart); 


function displayChart() 
{ 
    loadListItems('Employee Hierarchy') 
    .done(function(data){ 
      var items = data.d.results;  
      drawChart(items); 
    }) 
    .fail(function(error){ 
      console.log(error); 
    }); 
} 

function drawChart(items) { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('string', 'Manager'); 
    data.addColumn('string', 'ToolTip'); 

    for (var i = 0; i < items.length; i++) { 
     data.addRow([items[i]['Title'],items[i]['Manager']['Title'],'']);    
    }  
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 
    chart.draw(data, { allowHtml: true }); 
} 


function loadListItems(listTitle){ 
    return $.ajax({    
      url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('" + listTitle + "')/items?$select=Title,Manager/Title&$expand=Manager", 
      type: "GET", 
      headers: { 
        "accept": "application/json;odata=verbose", 
      } 
    });    
} 

Points clés

Dans mon exemple, la liste a les suivantes schéma:

Field Name Type 
Title  Text 
Manager  Lookup 
Description Note 

Liste Voir la page

page résultante