Utiliser les graphiques HighCharts sur SharePoint Online sans développement

par Hamza Cheref
•
28 févr., 2018
•

Comment afficher une liste de données SharePoint sous format graphique en utilisant HighCharts

Comment afficher une liste de données SharePoint sous format graphique en utilisant HighCharts

Highcharts est une librairie graphique multi-plateforme basée sur JavaScript. Optimisées pour appareils mobiles, elle permet l'intégration de graphiques réactifs rendant les données beaucoup plus interactives et facile à comprendre. Afin d'intégrer cette librairie dans SharePoint Online et utiliser ses graphes pour visualiser les informations de vos listes, vous devez récupérer d'abord les données de ces listes à l'aide d'un modèle de programmation client (comme CSOM Client-side Server Object Model ou JSOM JavaScript Object Model ou REST) comme ci-dessous avec JSOM :

Dans cet article, nous allons voir, step by step, comment utiliser la librairie Highcharts sans avoir recours à aucun modèle de programmation client, nous n'auront donc pas besoin d'utiliser le code précédent, car nous allons récupérer les données à l'aide d'un composant natif qui existe déjà depuis longtemps dans SharePoint qui est la Content-Query-Webpart (ou la Webpart Requête de contenu). L'utilisation de la Webpart Requête de contenu ne nécessite pas de compétence particulière en modèles de programmation client, elle nécessite la connaissance du XSLT qui est un langage de transformation XML, et la connaissance de JavaScript afin de pouvoir intégrer le code JS fourni par la librairie.

Step 1 : Inclure les références de la librairie HighCharts dans la Master Page de votre site SharePoint. Vous pouvez télécharger les fichiers js et les sauvegarder dans la galerie de pages maîtres.

<SharePoint:ScriptLink Language="javascript" Name="~sitecollection/_catalogs/Scripts/highcharts.js" runat="server" Localizable="False" LoadAfterUI="True" />

<SharePoint:ScriptLink Language="javascript" Name="~sitecollection/_catalogs/Scripts/exporting.js" runat="server" Localizable="False" LoadAfterUI="True" />

Step 2 : Créer votre liste de données si besoin, et sauvegarder de coté son URL (Exemple URL Liste : /sites/PublishingSite/HighCharts/Lists/ClassementReseauxSociaux)

Step 3 : Accéder au dossier SharePoint "XSL Style Sheets" dans la bibliothèque de styles de votre collection de site (URL : "/Style Library/XSL Style Sheets") et copier les 3 fichiers XSL "ContentQueryMain.xsl" et "Header.xsl" et ItemStyle.xsl" dans un nouveau dossier (nommé ici "My_HighCharts_WP"), et les renommer (renommés ici par l'ajout du préfixe "My_HighCharts_").

Step 4 : Editer le fichier "My_HighCharts_ItemStyle.xsl" à l'aide d'un éditeur de texte ou via SharePoint Designer, et ajouter un nouveau template "My_HighCharts_ItemTemplate" comme ci-dessous, ce template servira à récupérer la valeur des colonnes d'une ligne de liste.

Step 5 : Sur la page que vous souhaitez que le graphe s'affiche, ajouter une nouvelle Webpart Requête de contenu comme suit :

Step 6 : Dans les paramètres de la Webpart, introduire l'URL de votre liste (sauvegardée à la Step 1) dans le champ "Afficher les éléments de la liste suivante". Dans le champ Titre, laisser la colonne Titre. Dans le champ Description, saisir notre deuxième colonne "Classement" (Si votre liste comporte plusieurs colonnes vous pouvez toutes les saisir dans le même champ Description séparées par point-virgule). Enregistrer les paramètres et ensuite exporter la Webpart.

Step 7 : Editer la Webpart exportée à l'aide d'un éditeur de texte. Repérer la propriété "Title" et saisir le titre de votre graphe. Repérer la propriété "ItemStyle" et saisir le nom du nouveau template créé à la Step 3. Repérer la propriété "MainXslLink" et saisir l'URL du fichier ContentQueryMain copié à la Step 2. Repérer la propriété "HeaderXslLink" et saisir l'URL du fichier Header copié à la Step 2. Repérer la propriété "ItemXslLink" et saisir l'URL du fichier ItemStyle copié à la Step 2. Enregistrer.

Step 8 : Importer la Webpart modifiée sur votre page.

Step 9 : Editer le fichier "My_HighCharts_ContentQueryMain.xsl" à l'aide d'un éditeur de texte ou via SharePoint Designer, et ajouter un nouveau template "GetItemFieldByPosition" comme ci-dessous, ce template servira à récupérer toute les données de la liste.

Step 10 : Sur le même fichier, remplacer le contenu du template de base (<xsl:template match="/">) par le code Javascript fournis par HighCharts précedé par une phase de récupération de données comme suit :

<xsl:template match="/">

var Title1 =

'<xsl:call-template name="GetItemFieldByPosition">

<xsl:with-param name="itemPosition" select="1"/>

<xsl:with-param name="itemField" select="'Title'"/>

</xsl:call-template>'

var Classement1 =

<xsl:call-template name="GetItemFieldByPosition">

<xsl:with-param name="itemPosition" select="1"/>

<xsl:with-param name="itemField" select="'Classement'"/>

</xsl:call-template>

var Title2 =

'<xsl:call-template name="GetItemFieldByPosition">

<xsl:with-param name="itemPosition" select="2"/>

<xsl:with-param name="itemField" select="'Title'"/>

</xsl:call-template>'

var Classement2 =

<xsl:call-template name="GetItemFieldByPosition">

<xsl:with-param name="itemPosition" select="2"/>

<xsl:with-param name="itemField" select="'Classement'"/>

</xsl:call-template>

var Title3 =

'<xsl:call-template name="GetItemFieldByPosition">

<xsl:with-param name="itemPosition" select="3"/>

<xsl:with-param name="itemField" select="'Title'"/>

</xsl:call-template>'

var Classement3 =

<xsl:call-template name="GetItemFieldByPosition">

<xsl:with-param name="itemPosition" select="3"/>

<xsl:with-param name="itemField" select="'Classement'"/>

</xsl:call-template>

var Title4 =

'<xsl:call-template name="GetItemFieldByPosition">

<xsl:with-param name="itemPosition" select="4"/>

<xsl:with-param name="itemField" select="'Title'"/>

</xsl:call-template>'

var Classement4 =

<xsl:call-template name="GetItemFieldByPosition">

<xsl:with-param name="itemPosition" select="4"/>

<xsl:with-param name="itemField" select="'Classement'"/>

</xsl:call-template>

var Title5 =

'<xsl:call-template name="GetItemFieldByPosition">

<xsl:with-param name="itemPosition" select="5"/>

<xsl:with-param name="itemField" select="'Title'"/>

</xsl:call-template>'

var Classement5 =

<xsl:call-template name="GetItemFieldByPosition">

<xsl:with-param name="itemPosition" select="5"/>

<xsl:with-param name="itemField" select="'Classement'"/>

</xsl:call-template>

Highcharts.chart('container', {

chart: {type: 'bar'},

title: {text: 'Classement des réseaux sociaux les plus populaires dans le monde en août 2017, selon le nombre d\'utilisateurs actifs (en millions)'},

subtitle: {text: 'Source: <a href="https://fr.statista.com/statistiques/570930/reseaux-sociaux-mondiaux-classes-par-nombre-d-utilisateurs">Statista.com</a>'},

xAxis: {

categories: [Title1, Title2, Title3, Title4, Title5],

title: {text: null}

yAxis: {

min: 0,

title: {text: 'Nombre d\'utilisateurs actifs en millions',align: 'high'},

labels: {overflow: 'justify'}

tooltip: {valueSuffix: ' millions'},

plotOptions: {bar: {dataLabels: {enabled: true}}},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -40,

y: 80,

floating: true,

borderWidth: 1,

backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),

shadow: true

credits: {enabled: false},

series: [{

name: 'Year 2017',

data: [Classement1, Classement2, Classement3, Classement4, Classement5]

}]

});

</script>

</xsl:template>

Utiliser les graphiques HighCharts sur SharePoint Online sans développement

Comment afficher une liste de données SharePoint sous format graphique en utilisant HighCharts

Non, V.I.K.I. C'est pas encore pour demain

Les 12 modes d'affectation des tâches de flux de travail avec K2 Blackpearl

Les pop-ups de confirmation dans K2 Smartforms