Working With SharePoint List And Visifire Chart

In this topic you will learn how to work with SharePoint List and Visifire Chart.

 

In order to visualize the SharePoint list data in Visifire chart you need to follow these steps shown below.

 

Step 1 : Create a custom list named as "VisifireList" in SharePoint site. By default a field named "Title” will be present in the list which accepts single line of text. Lets add another column named "Value" which accepts numbers. Now add new records into to the list. After adding few rows in the VisifireList.

 

 

 

Step 2 : Upload SL.Visifire.Charts.xap and Visifire.js files in SharePoint site.

 

Step 3 : Open your site in SharePoint 2010 Designer. Click on "Edit site home page" link

 

Step 4 : In the default.aspx  page  click inside the div tag  as shown below.

 

 

 

Step 5 : Select "Insert tab" and then click on DataView. In the drop-down of Data view menu click on "Empty Data view"  as shown below.

 

 

This will now insert an Empty Data view in your selected zone as shown below.

 

 

Step 6 . Next click on "click here to select datasource" to select the datasource or list.

 

Step 7 . Select the list\library you want to display the data from. Here we are using a dataview to display data from SharePoint list named VisifireList as shown below.

 

 

Step 8: .Next In the DataSource Details tab, select the fields that you want to show in the DataView.To select multiple fields hold down CTRL when you click them. Click ”Insert Selected fields as”  and choose ”Multiple Item View” to  display multiple records, with the fields in columns with headings for each column.

 

 

Step 9. You now have the Dataview webpart on your page which will look similar to this.

 

 

Step 9: You can edit the DataView by switching to code view.

 

Step 10:  Replace the first xsl:template entry in the DataFormWebPart with a new template.

 

 

Replace the above code within rectangle with the code given below.

 

<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">

<!-- Load the chart tools -->

<script type="text/javascript" src="http://localhost:3083/VisifireCharts/Visifire.js" mce_src="http://localhost:3083/VisifireCharts/Visifire.js"></script> <!-- Create the JavaScript variable that holds the data to plot. -->

<!-- Note the xsl:for-each statement which loops over all the -->

<!-- list items and creates the necessary DataPoint entries -->

<!-- in the Chart XML. -->

<xsl:text disable-output-escaping="yes"><![CDATA[

<script type="text/javascript">

var xmlString =

' <vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"'

+ ' Theme="Theme1" >'

+ '<vc:Chart.Titles>'

+ ' <vc:Title Text="Visifire Column Chart"/>'

+ '</vc:Chart.Titles>'

+ ' <vc:Chart.Series>'

+ ' <vc:DataSeries RenderAs="Column" ShowInLegend="False" Bevel="False" LabelEnabled="True">'

+ ' <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["/>']]></xsl:text>

</xsl:for-each>

<xsl:text disable-output-escaping="yes">

<![CDATA[

+ ' </vc:DataSeries.DataPoints>'

+ ' </vc:DataSeries>'

+ ' </vc:Chart.Series>'

+ ' </vc:Chart>';

</script>

]]></xsl:text>

<!-- Create the div to hold the chart and then run -->

<!-- the JavaScript code to actually show the chart. -->

<div id="myChart" style="width:500px;height:300px;">

<script language="javascript" type="text/javascript">

var vChart = new Visifire('http://localhost:3083/VisifireCharts/SL.Visifire.Charts.xap');

vChart.setDataXml(xmlString);

vChart.render('myChart');

</script> </div>

</xsl:template>

 

 

Step 11: The screenshot below shows where we have to specify the column name of the DataSource.  Make sure that you have provided the correct path to the Visifire libraries which are uploaded in the site.

 

 

Step 12: Now Save and Refresh the page.

 

Step 13: Go to your SharePoint portal to see the Visifire chart.