Custom Chart Menggunakan WebChart3D


Coldfusion menggunakan engine WebChart3D dari GreenPoint, Inc. Tetapi tidak semua tipe chart secara default disupport oleh tag cfchart, cfchartseries, dan cfchartdata. Untuk membuat custom chart, kita dapat menggunakan WebChart3D Designer yang sudah tersedia.


Langkah-langkah pembuatan custom chart menggunakan WebChart3D Designer:

  1. Buka WebChart3D, untuk ColdFusion 9 Windows terletak di C:\ColdFusion9\charting\webcharts.bat
  2. Pilih tipe chart yang akan dipergunakan dari Chart Gallery kemudian klik OK
    chart-gallery

    chart-gallery

  3. Akan tampil Designer
    designer

    designer

    1. Design: tampilan chart dan editable properties – value
    2. Xml Style: style dari chart dalam format xml
    3. Xml Model: data dari chart dalam format xml
    4. Code View: sample Java code untuk menampilkan chart
    5. Console: builtin web server untuk menampilkan chart, dengan format http://hostname:8802/%5Bimage type]
    6. Help: developers guide
  4. Save hasil editan dari Designer ini, akan menghasilkan file dengan extension wcp

UDF untuk menampilkan chart menggunakan WebChart3D dari GreenPoint, Inc.

<cffunction 
	name="webChart3D" 
	output="No"
	>
	
	<!--- Xml Style --->
	<cfargument 
		name="style" 
		required="Yes" 
		type="string" 
		hint="chart style" 
		/>
	
	<!--- Xml Model --->	
	<cfargument 
		name="model" 
		required="Yes" 
		type="string" 
		hint="chart data"
		/>
	
	<!--- Output Type --->
	<cfargument 
		name="type" 
		default="PNG" 
		required="Yes" 
		type="string" 
		hint="PNG, JPEG or JPG, GIF, WBMP, SWF, SVG, PDF, TIFF"
		/>
	
	<!--- Width --->
	<cfargument 
		name="width" 
		default="400" 
		required="Yes" 
		type="numeric"
		hint="width"
		/>
	
	<!--- Height --->
	<cfargument 
		name="height" 
		default="300" 
		required="Yes" 
		type="numeric"
		hint="height"
		/>
	
	
	<!--- object --->
	<cfset LOCAL.servletContext = GetPageContext().getServletContext() />
	<cfset LOCAL.objChart = CreateObject("java", "com.gp.api.jsp.MxServerComponent").getDefaultInstance(LOCAL.servletContext) />
	
	<!--- http://www.webcharts3d.com/website/WebCharts50/cf/faq.jsp --->
	<cfchart chartwidth="1" chartheight="1"/>
	
	<!--- chart properties --->
	<cfset LOCAL.chart = LOCAL.objChart.newImageSpec() />
	<cfset LOCAL.chart.style = ARGUMENTS.style />
	<cfset LOCAL.chart.model = ARGUMENTS.model />
	<cfset LOCAL.chart.type = ARGUMENTS.type />
	<cfset LOCAL.chart.width = ARGUMENTS.width />
	<cfset LOCAL.chart.height = ARGUMENTS.height />
	
	<!--- output --->
	<cfsavecontent variable="LOCAL.output">
		<cfoutput>
			#LOCAL.objChart.getImageTag(LOCAL.chart, "/CFIDE/GraphData.cfm?graphCache=wc50&graphID=")#
		</cfoutput>
	</cfsavecontent>
	
	<cfreturn LOCAL.output />
	
</cffunction>

Sekarang kita dapat menjalankan UDF webChart3D di atas dengan menggunakan file wcp yang telah disave tadi, atau menggunakan isi dari tab Xml Style dan Xml Model dari Designer.

Xml Style dan Xml Model

<cfsavecontent variable="style">
<?xml version="1.0" encoding="UTF-8"?>
<pieChart depth="Double" style="Sliced" type="SmallNut" angle="314">
	<dataLabels style="Pattern" placement="Inside" font="Arial-10"/>
	<elements drawOutline="false">
		<morph morph="Grow" stage="None"/>
	</elements>
	<paint palette="Fiesta" paint="Plain"/>
</pieChart>
</cfsavecontent>

<cfsavecontent variable="model">
<?xml version="1.0" encoding="UTF-8"?>
<XML type="default">
	<COL>2000</COL>
	<COL>2001</COL>
	<COL>2002</COL>
	<COL>2003</COL>
	<COL>2004</COL>
	<ROW col0="100.0" col1="200.0" col2="100.0" col3="180.0" col4="200.0">Sample 0:</ROW>
</XML>
</cfsavecontent>

<cfset pieChart = webChart3D(style, model)>

<cfoutput>
#pieChart#
</cfoutput>

File wcp

<cfset wcpFile = ExpandPath("./") & "piechart.wcp">
<cfset wcpXml = XmlParse(wcpFile)>

<cfset model = wcpXml.project.model.XmlCData>
<cfset style = wcpXml.project.style.XmlChildren[1]>
<cfset pieChart = webChart3D(style, model)>

<cfoutput>
#pieChart#
</cfoutput>

Output dari eksekusi UDF webChart3D

output

output

Style tersebut juga bisa dijadikan sebagai nilai dari attribute style dari tag cfchart

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: