Google Graphiques À L'Aide Des Données De Liste SharePoint
Je suis perplexe et a besoin d'un peu d'aide
Ce que je veux faire est d'utiliser Google Chart API pour créer un simple bar graph(graphique) qui permettra d'extraire des données à partir d'un Point de Partage de la liste.
Ici est Google Graphique à barres de Code....
<html>
<head>
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Year', 'Number Of Days'],
['Dec', 2013, 10],
['Jan', 2013, 6],
['Mar', 2012, 22],
['Jun', 2011, 44] ]);
var options = {
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} };
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options); }
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
Cela fonctionne, mais il est statique et j'ai besoin de dynamique des données en provenance d'une liste SharePoint. Voici la méthode que j'ai utilisé pour extraire les données à partir d'une liste SharePoint, mais n'arrive pas à comprendre la meilleure façon d'obtenir de la Google Graphique à utiliser mes données. Merci à l'avance.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var siteUrl = "//serverURL",
listId = "{b2b61446-4dfc-44f0-80af-8d18b2b17547}";
$.get( siteUrl + "/_vti_bin/owssvr.dll?Cmd=Display&XMLDATA=TRUE&List=" + listId,
function( xml ) {
var zrow = xml.getElementsByTagName("z:row");
for(var i=0; i<zrow.length; i++) {
$("#table1 tbody").append(
"<tr><td>"
+ zrow[i].getAttribute("ows_Month")
+ "</td><td>"
+ zrow[i].getAttribute("ows_Number_x0020_Of_x0020_Days")
+ "</td><td>"
+ zrow[i].getAttribute("ows_Year")
+ "</td></tr>"
);
}
});
});
</script>
- Est votre deuxième extrait de code d'un exemple de code qui fonctionne pour l'extraction de données à partir de votre liste sharepoint?
- Oui le deuxième morceau de code qui fonctionne et extrait des données à partir de la liste SharePoint...pas de problème. Je suis juste avoir un moment difficile essayer de comprendre...Comment puis-je inclure ce code pour qu'il fonctionne avec le code ci-dessus, il(Google Chart)
Vous devez vous connecter pour publier un commentaire.
Je tiens à remercier Asgallant pour la réponse. C'était son reposense qui m'a incité à explorer d'autres moyens ou d'options pour obtenir que cela fonctionne. À l'aide de HighCharts je suis venu avec la résolution suivante pour extraire des données à partir d'une liste SharePoint à l'aide de XML et JQuery. Check it out. Par la façon dont cela fonctionne pour les deux l'histogramme et Diagramme en camembert pour HighCharts. Tout ce que vous devez faire pour inverser les graphiques de la Barre graphique de graphique à secteurs est de changer les options de la "plotOptions" du code, où il est dit [bar]...changement de [pie].
Par le chemin, la underscore.js le fichier peut être téléchargé à partir de GITHib.com ou tout simplement faire une recherche google sur underscore.js. Autre chose....Je n'ai pas testé avec les versions de JQuery ou SPServices de sorte qu'il peut être important de se servir de ce qui est déjà testé ici dans cet exemple.
Cheers!
Et maintenant le code.....L'exemple est basé sur une liste personnalisée de la Demande de congé pour les employés.
Essayer quelque chose comme cela:
Qui va dupliquer la mise en page du diagramme que vous avez posté ci-dessus, mais je ne suis pas sûr que c'est exactement ce que vous voulez. Qui met des mois sur le vAxis et des années comme une série de données. Est-ce que vous est-il destiné?