Des graphiques Silverlight dans sharepoint ! (Fin partie 5 : afficher les données en Silverlight)

  Dans les billets précédents, nous avons vu :

• Une introduction et une vidéo,
• La création d'une liste custom pour stocker les valeurs des nos graphiques
• L'ajout des composants Silverlight Visifire à notre site sharepoint.
• L'affichage des données sous forme de tableau avec une DataView WebPart

Suite a l'article précédent, nous avons affiché les données sous forme de tableau en utilisant la DataView webpart.

Dans cette dernière partie, nous allons modifier la feuille de style xsl de la DataView webpart afin de configurer et afficher les données avec les contrôles silverlight Visifire.

Configurer le rendu graphique

La première étape est de se rendre sur le site de VisiFire afin d'utiliser le "Chart Designer" pour configurer le rendu de notre graphique.

Ici, j'ai choisi un graphique en forme de "donut" et en "3D"

Vous pouvez ensuite cliquer sur View Html afin d'obtenir le code permettant d'afficher le graphique :

<script type="text/javascript" src="Visifire2.js"></script>
    <div id="VisifireChart">
    <script language="javascript" type="text/javascript">
        var chartXmlString = ''
+'<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" BorderThickness="0" Theme="Theme1" View3D="True" >'
    +'<vc:Chart.Titles>'
        +'<vc:Title Text="Demo Visifire et Sharepoint" />'
    +'</vc:Chart.Titles>'
    +'<vc:Chart.AxesX>'
        +'<vc:Axis Title="Companies" />'
    +'</vc:Chart.AxesX>'
    +'<vc:Chart.AxesY>'
        +'<vc:Axis Title="Revenue in Million dollars" />'
    +'</vc:Chart.AxesY>'
    +'<vc:Chart.Series>'
        +'<vc:DataSeries RenderAs="Doughnut" AxisYType="Primary" >'
            +'<vc:DataSeries.DataPoints>'
                +'<vc:DataPoint AxisXLabel="Wall-Mart" YValue="351139" />'
                +'<vc:DataPoint AxisXLabel="Exxon Mobil" YValue="345254" />'
                +'<vc:DataPoint AxisXLabel="Shell" YValue="318845" />'
                +'<vc:DataPoint AxisXLabel="BP" YValue="274316" />'
                +'<vc:DataPoint AxisXLabel="General Motors" YValue="207349" />'
            +'</vc:DataSeries.DataPoints>'
        +'</vc:DataSeries>'
    +'</vc:Chart.Series>'
+'</vc:Chart>';
        var vChart = new Visifire2("SL.Visifire.Charts.xap " , 500 , 300 );
        vChart.setDataXml(chartXmlString);
        vChart.render("VisifireChart");
    </script>
    </div>

Pour être utilisable, il faudra effectuer deux modifications :

• Référence l'emplacement des fichiers Visifire dans notre site.
• Afficher le contrôle dans la DataView webPart
• Créer dynamiquement les balises "DataPoint" correspondant aux valeurs à afficher.

Référencer les scripts VisiFire

Si vous avez suivi les articles précédents, nos avons déposé les fichiers "Visifire2.js" et "SL.Visifire.Charts.xap" dans la librairie de documents "Xap", il faudra donc changer les références dans le fichiers Html.

<script type="text/javascript" src="Xap/Visifire2.js"></script>
.....
.....
        var vChart = new Visifire2("Xap/SL.Visifire.Charts.xap ", 500, 300);
......

Pour la suite, vous devez modifier la dataview webpart dans sharepoint designer.

Afficher le contrôle dans la DataView webpart

Recherchez la feuille de style Xsl dans le webpart dans le code de la page. Vous devez trouver les balises :

<xsl:template match="/">
  <xsl:call-template name="dvt_1"/>
</xsl:template>

Remplacez le contenu par le code Html d'affichage du contrôle visifire par celui-ci :

<xsl:template match="/"> 
<script type="text/javascript" src="Xap/Visifire2.js"></script> 
<xsl:text disable-output-escaping="yes">
  <![CDATA[      <div id="VisifireChart">
    <script language="javascript" type="text/javascript">
        var chartXmlString = ''
+ '<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" BorderThickness="0" Theme="Theme1" View3D="True" >'
    + '<vc:Chart.Titles>'
        + '<vc:Title Text="Demo Visifire  Sharepoint" />'
    + '</vc:Chart.Titles>'
    + '<vc:Chart.AxesX>'
        + '<vc:Axis Title="Companies" />'
    + '</vc:Chart.AxesX>'
    + '<vc:Chart.AxesY>'
        + '<vc:Axis Title="Revenue in Million dollars" />'
    + '</vc:Chart.AxesY>'
    + '<vc:Chart.Series>'
        + '<vc:DataSeries RenderAs="Doughnut" AxisYType="Primary" >'
            + '<vc:DataSeries.DataPoints>'
                + '<vc:DataPoint AxisXLabel="Wall-Mart" YValue="351139" />'
                + '<vc:DataPoint AxisXLabel="Exxon Mobil" YValue="345254" />'
                + '<vc:DataPoint AxisXLabel="Shell" YValue="318845" />'
                + '<vc:DataPoint AxisXLabel="BP" YValue="274316" />'
                + '<vc:DataPoint AxisXLabel="General Motors" YValue="207349" />'
            + '</vc:DataSeries.DataPoints>'
        + '</vc:DataSeries>'
    + '</vc:Chart.Series>'
+ '</vc:Chart>';
        var vChart = new Visifire2("Xap/SL.Visifire.Charts.xap ", 500, 300);
        vChart.setDataXml(chartXmlString);
        vChart.render("VisifireChart");
    </script>
    </div>]]></xsl:text>
</xsl:template>

Vous avez maintenant un contrôle silverlight dans votre page, mais celui-ci n'affiche pas encore les valeurs de la liste navigateurs.

Afficher des données de la liste "Navigateurs"

La dernière étape est de créer dynamiquement les balises "DataPoint" à partir des valeurs de la liste "Navigateurs".

Pour cela modifier le code afin d'obtenir ceci :

<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
<script type="text/javascript" src="Xap/Visifire2.js"></script>  
<xsl:text disable-output-escaping="yes">
  <![CDATA[       <div id="VisifireChart">
    <script language="javascript" type="text/javascript">
        var chartXmlString = ''
+'<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" BorderThickness="0" Theme="Theme1" View3D="True" >'
    +'<vc:Chart.Titles>'
        +'<vc:Title Text="Demo Visifire  Sharepoint" />'
    +'</vc:Chart.Titles>'
    +'<vc:Chart.AxesX>'
        +'<vc:Axis Title="Companies" />'
    +'</vc:Chart.AxesX>'
    +'<vc:Chart.AxesY>'
        +'<vc:Axis Title="Revenue in Million dollars" />'
    +'</vc:Chart.AxesY>'
    +'<vc:Chart.Series>'
        +'<vc:DataSeries RenderAs="Doughnut" AxisYType="Primary" >'
            +'<vc:DataSeries.DataPoints>'
]]></xsl:text>

<xsl:for-each select="/dsQueryResponse/Rows/Row">
  <xsl:text disable-output-escaping="yes"><![CDATA[ + ' <vc:DataPoint AxisXLabel="]]></xsl:text>
  <xsl:value-of select="./@Title" />
  <xsl:text disable-output-escaping="yes"><![CDATA[" YValue="]]></xsl:text>
  <xsl:value-of select="@Value" />
  <xsl:text disable-output-escaping="yes"><![CDATA[" LabelText="]]></xsl:text>
  <xsl:value-of select="@Value" />
  <xsl:text disable-output-escaping="yes"><![CDATA[" Exploded="True]]></xsl:text>
  <xsl:text disable-output-escaping="yes"><![CDATA["/>']]></xsl:text>
</xsl:for-each>

<xsl:text disable-output-escaping="yes">
  <![CDATA[ 
              +'</vc:DataSeries.DataPoints>'
        +'</vc:DataSeries>'
    +'</vc:Chart.Series>'
+'</vc:Chart>';
        var vChart = new Visifire2("Xap/SL.Visifire.Charts.xap ", 500, 300);
        vChart.setDataXml(chartXmlString);
        vChart.render("VisifireChart");
    </script>
    </div>]]></xsl:text>
</xsl:template>

Si vous actualisez la page dans votre navigateur, vous devriez obtenir le résultat suivant :

 

Conclusion

Suite à cette série d'articles, vous êtes maintenant capable d'intégrer des graphiques en silverlight dans vos applications sharepoint sans faire une ligne de C#.

Nous avons vu :

• La création d'une liste custom pour stocker les valeurs des nos graphiques
• L'ajout des composants Silverlight Visifire à notre site sharepoint.
• L'affichage des données sous forme de tableau avec une DataView WebPart
• L'affichage des données en silverlight.

Pour reproduire l'exemple, vous trouverez les fichiers nécessaire ici :

•  http://blogtech.fr/file.axd?file=2009%2f3%2fCode+source.zip