FusionCharts, Free Chart Component
Kemaren sudah ada cerita tentang Visifire di sini, komponen chart yang memanfaatkan Silverlight sehingga sehingga chart yang ditampilkan terlihat indah dengan tayangan animasi, dan gratis. Sekarang Visifire sudah mencapai versi 1.0.13 Beta dan sudah support Silverlight 2 Beta 2. Visifire, termasuk komponen chart yang adil dan tidak pandang teknologi...ASP.NET ok...JSP...oke...PHP juga bisa. Hal ini karena sumber data dan pendefinisian antarmuka menggunakan data format XML.
Tetapi mungkin ada yang masih kawatir dengan Silverlight yang masih kurang populer, maka dapat menggunakan komponen chart lain yang menggunakan teknologi yang lebih populer yaitu FusionCharts yang menggunakan Adobe Flash. Free? Iya....Bisa untuk ASP.NET, JSP, PHP? Iya juga...karena sumber data dan pendefinisian antarmuka menggunakan format XML seperti Visifire.
Sebelum menulis kode-kode pada ASP.NET, kita lihat dulu tipe-tipe chart apa saja yang disediakan oleh FusionCharts.
Seperti pada gambar, ada beberapa feature yang juga dimiliki oleh Visifire yaitu :
- Line.
- Bar.
- Pie.
- Area.
- Doughnut.
Tipe-tipe chart di atas dapat dipresentasikan dalam 2D dan 3D. Nilai tambah dari FusionCharts adalah tipe chart seperti Candlestick chart yang biasa digunakan untuk presentasi data Financial, Funnel chart dan juga Gantt chart untuk keperluan pembuatan aplikasi yang berhubungan dengan Project Management {hmm....cocok untuk project pembuatan Telco Provider - Project Management ntar...}.
{Menggambar Chart dengan C#}
Sekarang masuk ke langkah apa yang mesti dilakukan apabila ingin menggunakan FusionCharts pada ASP.NET.
Langkah pertama tentu saja perlu web project entah itu berupa Website atau Web Application.
Setelah itu tambahakan Bin (ASP.NET Folder) pada Website dan tambahkan FusionCharts.dll pada direktori tersebut. Dimana mendapatkan FusionCharts.dll? Bila sudah download FusionChartsFree.zip di sini, maka FusionCharts.dll dapat ditemui disitu. Kemudian buat direktori Shared/FusionCharts dan tambahkan file-file seperti pada gambar.
{Icon file flash beda dengan biasanya karena install IrvanView}
File-file SWF pada Shared/FusionCharts ibaratnya berfungsi sebagai template chart dan datanya tinggal disuntik dari Data.xml.
Selain itu juga tambahkan Data.xml pada direktori Data (awalnya disimpan di dalam App_Data, tapi entah kenapa data dianggap tidak ada, sepertinya karena sifat dari App_Data yang tidak dapat diakses begitu saja dari sisi client) yang akan menjadi sample data untuk chart nanti, dengan isi seperti berikut :
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
<set name='Jan' value='462' color='AFD8F8' />
<set name='Feb' value='857' color='F6BD0F' />
<set name='Mar' value='671' color='8BBA00' />
<set name='Apr' value='494' color='FF8E46' />
<set name='May' value='761' color='008E8E' />
<set name='Jun' value='960' color='D64646' />
<set name='Jul' value='629' color='8E468E' />
<set name='Aug' value='622' color='588526' />
<set name='Sep' value='376' color='B3AA00' />
<set name='Oct' value='494' color='008ED6' />
<set name='Nov' value='761' color='9D080D' />
<set name='Dec' value='960' color='A186BE' />
</graph>
Selanjutkan ... menulis code pada ASPX seperti berikut :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Import Namespace="InfoSoftGlobal" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>FusionCharts...Yuuk</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%
Response.Write(FusionCharts.RenderChartHTML("Shared/FusionCharts/FCF_Column3D.swf", "Data/Data.xml", "", "myFirst", "600", "300", true));
%>
</div>
</form>
</body>
</html>
Perhatikan pada halaman ini perlu ditambahkan baris berikut :
<%@ Import Namespace="InfoSoftGlobal" %>
Hasilnya seperti berikut :
Bagaimana bila ingin mendapatkan chart dengan data yang secara programmatically atau dari database? Intinya adalah cukup dengan membuat string dengan format seperti yang ada pada file Data.xml. Sebagai contoh bisa dilihat dari kode yang ada pada contoh-contoh pada FusionChartsFree.zip ini.
Untuk file ASPX :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BasicDataXML.aspx.cs" Inherits="BasicExample_BasicDataXML" %>
<HTML>
<HEAD>
<TITLE>
FusionCharts Free - Simple Column 3D Chart using dataXML method
</TITLE>
</HEAD>
<BODY>
<%= CreateCharts() %>
</BODY>
</HTML>Dengan isi BasicDataXML.aspx.cs seperti berikut :
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using InfoSoftGlobal;
public partial class BasicExample_BasicDataXML : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string CreateCharts() {
string strXML;
strXML = "";
strXML += "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>";
strXML += "<set name='Jan' value='462' color='AFD8F8' />";
strXML += "<set name='Feb' value='857' color='F6BD0F' />";
strXML += "<set name='Mar' value='671' color='8BBA00' />";
strXML += "<set name='Apr' value='494' color='FF8E46'/>";
strXML += "<set name='May' value='761' color='008E8E'/>";
strXML += "<set name='Jun' value='960' color='D64646'/>";
strXML += "<set name='Jul' value='629' color='8E468E'/>";
strXML += "<set name='Aug' value='622' color='588526'/>";
strXML += "<set name='Sep' value='376' color='B3AA00'/>";
strXML += "<set name='Oct' value='494' color='008ED6'/>";
strXML += "<set name='Nov' value='761' color='9D080D'/>";
strXML += "<set name='Dec' value='960' color='A186BE'/>";
strXML += "</graph>";
return FusionCharts.RenderChartHTML("Shared/FusionCharts/FCF_Column3D.swf", "", strXML, "myNext", "600", "300", false);
}
}
Perhatikan pada file CS ini perlu ditambahkan baris berikut :
using InfoSoftGlobal;
{Menggambar Chart dengan Javascript}
Berikut contoh penggunaan Javascript untuk menggambar chart :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="Shared/FusionCharts/FusionCharts.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var strXML = "<graph caption='Montly Revenue' showNames='1'><set name='KS' value='32' color='AFD8F8'/><set name='Non-KS' value='16' color='F6BD0F'/></graph>";
function updateChart(chartSWF){
var chart1 = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0");
chart1.setDataXML(strXML);
chart1.render("chart1div");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="chart1div">
FusionCharts
</div>
<script language="javascript" type="text/javascript">
var chart1 = new FusionCharts("Shared/FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300", "0", "0");
chart1.setDataXML(strXML);
chart1.render("chart1div");
</script>
</div>
</form>
</body>
</html>
Hasilnya :
Selamat mencoba :)