Free & Open Source Chart for Silverlight 2 Beta 1
Waktu masih jaman Silverlight 1.1 Alpha, charting yang saya kenal adalah FreeSilverlightChart hasil nemu di gallerynya http://silverlight.net. Tapi jangan harap lagi FreeSilverlightChart dapat digunakan ketika Silverlight 2 Beta 1 diinstall dikomputer anda. Tapi ternyata sudah ada solusi terbaru yaitu Visifire yang bisa ditemu di : http://code.google.com/p/visifire/ atau ke http://www.visifire.com.
{ Hasilnya }
Lumayan bukan tampilannya? yang pasti bila dibandingkan dengan FreeSilverlightChart maka antarmuka Virefire lebih elegan, dari segi warna dan juga saat loading chart.
{ chart designer }
Visifire juga menyediakan Chart Designer yang akan sangat membantu dalam membuat antarmuka chart yang diinginkan, tetapi tool ini hanya bisa digunakan secara online di http://www.visifire.com/silverlight_chart_designer.php.
{ How to Use Visifire }
Untuk memulai tinggal download Visifire beserta dokumentasinya di http://www.visifire.com/downloads/visifire_v1.0.5_beta_with_documentation.zip.
Dari file tersebut akan di dapat dua file penting, yaitu :
- Visifire.js, file berperan seperti Silverlight.js, sebagai helper untuk menampilkan charting ke browser.
- Visifire.xap, file ini sepertinya menjadi user control.
Nantinya selain dua file ini juga dibutuhkan file XML yang akan menjadi penentu type chart, penamaan untuk axis, title chart, definisi series beserta datanya.
Contoh file xml ini adalah sebagai berikut :
<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts"
Width="500" Height="300" BorderThickness="0" Theme="Theme3">
<vc:Title Text="Site Alarm Chart"/>
<vc:AxisX Title="Alarm Type">
</vc:AxisX>
<vc:AxisY Title="Alarm">
</vc:AxisY>
<vc:DataSeries Name="Series1" RenderAs="Column">
<vc:DataPoint AxisLabel="Shelter" YValue="1"/>
<vc:DataPoint AxisLabel="PLN Grounding" YValue="13"/>
<vc:DataPoint AxisLabel="AC and SDP" YValue="4"/>
<vc:DataPoint AxisLabel="Light and Alarm" YValue="8"/>
<vc:DataPoint AxisLabel="Tower" YValue="3"/>
<vc:DataPoint AxisLabel="Genset" YValue="20"/>
</vc:DataSeries>
</vc:Chart>
Untuk generate file ini secara on-the-fly dapat menggunakan C# or VB. Apalagi sekarang VB9 sudah ada XML Literal, pasti akan sangat-sangat mudah (bukan begitu om rully?).
Setelah itu siapkan file HTML seperti berikut :
<html>
<head>
<title>Untitled Page</title>
<script src="Visifire.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="VisifireChart">
<script language="javascript" type="text/javascript">
var vChart = new Visifire("Visifire.xap",600,400);
vChart.setDataUri("Data.xml");
vChart.render("VisifireChart");
</script>
</div>
</div>
</form>
</body>
</html>
Hasilnya adalah sebagai berikut :
Bila sudah bosan menggunakannya dan ingin ngulik source-nya tinggal menuju ke : http://www.visifire.com/downloads/visifire_v1.0.5_beta_source.zip.
Nice