Visifire:
Visifire is a set of data visualization controls - powered by
Microsoft®Silverlight™
& WPF.
Visifire is a
multi-targeting control which can be used in both WPF & Silverlight
applications. Visifire Silverlight
Controls can be embedded in any webpage as a standalone Silverlight App .
Need for Visifire in Salesforce:
Although Salesforce has provided all the required charting tools and controls, its our mindset to search and try for someother alternatives. One such category is using other charting controls/displays in our visualforce page and this post will definitely be a feed for it.
This post demonstrates embedding Visifire charts in visualforce page, by displaying the Top 10 Opportunities in an Organization.
Steps to follow:
1. Make sure that your machine is equipped with Microsoft®Silverlight™ or download it by and install.
2. Just google for Visifire Binaries or visifire_v3.6.8_source.zip to download visifire binaries into your machine. This is necessary as it contains the JS and XAP files which is used for visifire charting.
3. Extract the ZIP file which contains Visifire.js and SL.Visifire.Charts.xap files.
4. Create another ZIP files with these, and add it into your Salesforce Static Resources with Name as "VisifireBinaries".
5. Create a Visualforce page and Apex class using the following code snippets and Save.
Visualforce Page:
<apex:page controller="OpptyVisifireChart">
<apex:sectionHeader title="Top 5" subtitle="Opportunities"/>
<apex:pageBlock >
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Visifire Charts</title>
<body>
<!-- To embed in existing html copy the code below -->
<script type="text/javascript" src="{!URLFOR($Resource.VisifireBinaries,"Visifire.js")}"></script>
<div id="VisifireChart">
<script language="javascript" type="text/javascript">
var vChart = new Visifire('{!URLFOR($Resource.VisifireBinaries,"SL.Visifire.Charts.xap")}');
vChart.setDataXml('{!chartXmlString}');
vChart.render("VisifireChart");
</script>
</div>
</body>
</html>
<apex:pageBlockTable value="{!Oppties}" var="Oppty">
<apex:column value="{!Oppty.Name}"/>
<apex:column value="{!Oppty.Amount}"/>
<apex:column value="{!Oppty.Account.Name}"/>
<apex:column value="{!Oppty.Owner.Name}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
Apex Controller :
public with sharing class OpptyVisifireChart
{
public String chartXmlString { get; set; }
public OpptyVisifireChart()
{
Oppties=Database.Query('SELECT Id, Name, Amount, Account.Name, Owner.Name FROM Opportunity WHERE Amount!=null ORDER BY Amount DESC LIMIT 10');
chartXmlString= ''
+'<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" BorderThickness="0" Theme="Theme1">'
+'<vc:Chart.Titles>'
+'<vc:Title Text="Top 10 Opportunities"/>'
+'</vc:Chart.Titles>'
+'<vc:Chart.AxesX>'
+'<vc:Axis Title="Opportunity"/>'
+'</vc:Chart.AxesX>'
+'<vc:Chart.AxesY>'
+'<vc:Axis Title="Revenue in Million dollars"/>'
+'</vc:Chart.AxesY>'
+'<vc:Chart.Series>'
+'<vc:DataSeries LegendText="Series1" RenderAs="Column" AxisYType="Primary">'
+'<vc:DataSeries.DataPoints>';
for(Integer i=0;i<Oppties.size();i++)
{
chartXmlString+='<vc:DataPoint AxisXLabel="'+Oppties[i].Name+'" YValue="'+Oppties[i].Amount+'" />';
}
chartXmlString+='</vc:DataSeries.DataPoints>'
+'</vc:DataSeries>'
+'</vc:Chart.Series>'
+'</vc:Chart>';
}
public List<Opportunity> Oppties {get;set;}
}
Preview:
Similarly charts like Line Chart, Polar Chart, Radar Chart, Pie Chart, etc., can be embedded in our visualforce pages.
Checkout Visfire for more details and samples.
