Seperti yang telah diterangkan oleh kawan saya yaitu Reza, bahwa Visifire itu merupakan free chart component yang berbasiskan Silverlight 2.0. Pada posting kali ini saya akan menerangkan bagaimana caranya menampilkan data yang sudah ada dengan component tersebut.
Sudah pasti komputer yang akan dipakai harus terinstall terlebih dahulu silverlight 2.0 runtime nya. Component Visifire dapat didonwload disini http://www.visifire.com/downloads/visifire_v1.0.5_beta_with_documentation.zip . Sebelumnya saya akan memberikan gambaran secara umum mengenai penggunaan component ini point to point :
1. Component ini memiliki dua file yang harus diinclude ke project, yaitu Visifire.js dan Visifire.xap. Kedua file ini harus ditempatkan pada direktori yang sama dengan direktori web form yang akan digunakan untuk menampilkan chart tersebut.
2. Data source yang digunakan mempunyai dua alternatif pilihan, yaitu berupa file xml dan data xml yang diembed langsung ke dalam sebuah variable yang disimpan di java script.
3. Component ini memiliki "kelemahan" apabila kita menggunakan file xml sebagai data source. Jika file xml nya memiliki nama file xml yang sama maka dia akan cache data tersebut, jika file xml nya berbeda maka chart tersebut akan invalidate data cache sebelumnya, dan saya belum tahu bagaimana caranya untuk invalidate cache data yang digunakan oleh komponen tersebut secara imperative.
4. Solusi untuk point-3 yaitu kita bisa mengakalinya dengan create file xml secara random dengan menggunakan Guid setiap kali chart tersebut akan ditampilkan, sehingga chart tersebut dapat mendeteksi perubahan file xml. Akan tetapi kita harus menghapus kembali file-file xml tersebut setelah dipakai, kalau nggak bisa menuhin web servernya tuh :).
5. Jika kita menggunakan teknik data embedded maka permasalahan cache data tersebut tidak terjadi.
6. Agar datanya di load secara dinamis maka kita dapat membuat java scriptnya secara dinamis juga setiap kali chart tersebut akan di load.
7. Jika kita menggunakan file xml yang disimpan di direktori tertentu maka xml declaration yang terdapat di dalam file xml tersebut harus dihilangkan, karena chart tersebut akan menganggap struktur data xml nya tidak valid. Lalu bagaimana caranya? Kita dapat menggunakan XmlWriterSettings class yang mulai ada di .Net Fx 2.0.
8. Struktur file xml yang digunakan dapat anda lihat di dokumentasinya. Secara umum sih sederhana, anda dapat mengatur tampilan / style secara declarative di file xml nya. Anda dapat merubah Title, AxisXTile, AxisYTitle, View3d, dsb.
9. Untuk membaca datanya, chart ini menggunakan elemen DataPoint dengan pengaturan atribut AxisLabel, YValue, dan Color untuk memberikan warna pada tiap-tiap data. Selengkapnya dapat dilihat di dokumentasi.
Pada posting kali ini saya akan menjelaskan kedua teknik di atas, yaitu xml file sebagai sumber data, dan embedded data. Kita bisa render chart as Column, Line, Point, Bubble, dengan Marker Style as Triangle, Diamond...ok mari kita lihat saja langsung code nya (tanpa basa basi :) )...
Kode pertama yang akan saya perlihatkan yaitu rendering chart dengan file xml sebagai sumber datanya. Disini saya gunakan XML Literal yang ada di VB 9.0 agar lebih mudah...
Berikut kode HTML yang ada di body elemen
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<span class="style1">Chart Object Using Visifire</span>
<br /><br />
<cc1:TabContainer ID="TabContainer1" runat="server"
ActiveTabIndex="0" Width="600px"
Height="480px">
<cc1:TabPanel runat="server"
HeaderText="Rendering Chart Using XML File"
ID="TabPanel1">
<ContentTemplate>
Render As : <asp:DropDownList
ID="ddlRenderAs"
runat="server" >
<asp:ListItem>Point</asp:ListItem>
<asp:ListItem>Line</asp:ListItem>
<asp:ListItem>Bubble</asp:ListItem>
</asp:DropDownList>
Marker Style : <asp:DropDownList
ID="ddlMarkerStyle"
runat="server" >
<asp:ListItem>Triangle</asp:ListItem>
<asp:ListItem>Diamond</asp:ListItem>
<asp:ListItem>Cross</asp:ListItem>
<asp:ListItem>Square</asp:ListItem>
</asp:DropDownList>
<br /><br />
<div id="VisifireChart1">
</div>
<br />
<asp:Button ID="btnXmlChart" runat="server"
Text="Load XML file" />
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server"
HeaderText="Rendering Chart Using Embedded XML Data"
ID="TabPanel2">
<ContentTemplate>
<div id="VisifireChart2">
</div>
<br />
<asp:Button ID="btnEmbedData" runat="server"
Text="Load Embedded Data" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>
</form>
</body>
Untuk menampilkan warna per customer saya membuat data dummy, dimana kelima customer tersebut sudah saya set warnanya sbb :
Private Function FindColor(ByVal CustID As String) As String
Dim colorList = New Dictionary(Of String, String)
colorList.Add("QUICK", "Red")
colorList.Add("ERNSH", "Blue")
colorList.Add("SAVEA", "Yellow")
colorList.Add("RATTC", "Green")
colorList.Add("HUNGO", "White")
Return colorList.Item(CustID)
End Function
Dibawah ini code behind untuk create file xml sebagai data source. Xml declaration dihilangkan lewat XmlWriterSetting class, file xml di create dengan menggunakan XML literal, dan java script di create secara dinamis. Data diambil dari database Northwind dengan view yang sudah ada yaitu Invoices. View ini saya gunakan untuk menghitung Top 5 customer dengan total nilai uang yang pernah mereka order dan di group kan berdasarkan customer id. Sebelumnya kita import terlebih dahulu namespacenya :
Imports <xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts">
Berikut code behind create xml chart data :
Protected Sub btnXmlChart_Click() Handles btnXmlChart.Click
Dim xmlChartData = <vc:Chart Theme="Theme3"
AnimationType="Type3"
View3D="True">
<vc:Title Text="Customer-Order"/>
<vc:AxisX Title="Customers"/>
<vc:AxisY Title="Total"/>
<vc:DataSeries
RenderAs=<%= ddlRenderAs.Text %>
MarkerStyle=<%= ddlMarkerStyle.Text %>
MarkerSize="20"
LabelEnabled="True">
<%= From data In db.Invoices _
Group By ID = data.CustomerID _
Into Total = Sum(data.ExtendedPrice) _
Order By Total Descending _
Select <vc:DataPoint
Color=<%= FindColor(ID) %>
AxisLabel=<%= ID %>
YValue=<%= Total %>/> Take (5) %>
</vc:DataSeries>
</vc:Chart>
Dim randomFile = "ChartData/" & Guid.NewGuid.ToString & ".xml"
Dim xmlSetting = New XmlWriterSettings _
With {.OmitXmlDeclaration = True, .Indent = True}
Dim writer = XmlWriter.Create(Request.MapPath(randomFile), _
xmlSetting)
xmlChartData.WriteTo(writer)
writer.Flush()
writer.Close()
If (Not ClientScript.IsStartupScriptRegistered("clientScript1")) Then
Dim scriptString As String = "<script type=""text/javascript"">"
scriptString += "var vChart = new Visifire('Visifire.xap',500,400);"
scriptString += "vChart.setDataUri(""" + randomFile + """);"
scriptString += "vChart.render(""VisifireChart1"");"
scriptString += "</script>"
ClientScript.RegisterStartupScript(Me.GetType, _
"clientScript1", scriptString)
End If
End Sub
Jangan lupa hapus kembali file xml yang terdapat di folder ChartData :) , sebaiknya dihapus secara run time...XMlWriterSetting digunakan untuk menghapus xml declaration, dan format penulisan xml file agar memiliki indentasi. Chart ini di render pada div element yang terdapat di file HTML nya. Sekarang mari kita lihat web previewnya :
Kode berikut memperlihatkan bagaimana caranya menampilkan chart dengan data yang di embed (full of string concatenation), hmmm...sebenarnya saya tidak terlalu suka dengan cara ini, akan tetapi dengan cara ini kita tidak perlu membuat file xml terlebih dahulu.
Protected Sub btnEmbedData_Click() Handles btnEmbedData.Click
Dim custOrder = From data In db.Invoices _
Group By ID = data.CustomerID _
Into Total = Sum(data.ExtendedPrice) _
Order By Total Descending _
Select ID, Total Take (5)
Dim randomEmbedVar = "a" & Guid.NewGuid.ToString & "a"
randomEmbedVar = randomEmbedVar.Replace("-"c, "a"c)
Dim xmlEmbed = New StringBuilder
xmlEmbed.Append("<script type=""text/javascript"">")
'//create var xmldata
xmlEmbed.Append("var " & randomEmbedVar & "='")
xmlEmbed.Append("<vc:Chart xmlns:vc=""clr-namespace:")
xmlEmbed.Append("Visifire.Charts;assembly=Visifire.Charts""")
xmlEmbed.Append(" AnimationType=""Type3"" Theme=""Theme3""")
xmlEmbed.Append(" View3D=""True"" Width=""500"" Height=""400"">")
xmlEmbed.Append("<vc:Title Text=""Customer-Order""/>")
xmlEmbed.Append("<vc:AxisX Title=""Customers""/>")
xmlEmbed.Append("<vc:AxisY Title=""Total""/>")
xmlEmbed.Append("<vc:DataSeries RenderAs=""Column""")
xmlEmbed.Append(" LabelEnabled=""True"">")
For Each item In custOrder
Dim keyID = item.ID
xmlEmbed.Append("<vc:DataPoint")
xmlEmbed.Append(" Color=""" & FindColor(keyID) & """")
xmlEmbed.Append(" AxisLabel=""" & keyID & """")
xmlEmbed.Append(" YValue=""" & item.Total.ToString & """")
xmlEmbed.Append(" />")
Next
xmlEmbed.Append("</vc:DataSeries>")
xmlEmbed.Append("</vc:Chart>")
xmlEmbed.Append("';")
'//render chart
xmlEmbed.Append("var vChart = new Visifire('Visifire.xap',500,400);")
xmlEmbed.Append("vChart.setDataXml(" + randomEmbedVar + ");")
xmlEmbed.Append("vChart.render(""VisifireChart2"");")
xmlEmbed.Append("</script>")
If (Not _
ClientScript.IsStartupScriptRegistered("clientScript2")) Then
ClientScript.RegisterStartupScript( _
Me.GetType, "clientScript2", xmlEmbed.ToString)
End If
End Sub
Web preview chart kode diatas untuk Column style :
Ok...that's it :)