… Grafik PHP, Part 3 …
Hehehe, kembali penasaran dengan grafik untuk PHP, maka kembali googling, kali ini versi berbayar hehe, ya… namun free untuk trialnya, namanya XML/SWF Charts. Harganya lumayan mahal juga, sekitar $49 – Single License dan $599 – Bulk License. Nah, fitur & jenis grafiknya banyak, mulai dari yang simpel hingga yang kompleks. Oke deh, mari kita mulai menulis kodenya :
Ok, Asumsinya, Apache & PHP Anda sudah siap. Maka langkah selanjutnya adalah mengunduh Engine Chartnya disini. Setelah itu, ekstraklah file yang Anda unduh pada home directory web server Anda. Nah, kemudian buatlah file Grafik.HTML dengan kode sebagai berikut :
<HTML>
<HEAD>
<TITLE>Grafik Permohonan DJHKI</TITLE>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
var requiredMajorVersion = 9;
var requiredMinorVersion = 0;
var requiredRevision = 45;
-->
</script>
</HEAD>
<BODY bgcolor="#FFFFFF">
<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0',
'width', '500',
'height', '300',
'scale', 'noscale',
'salign', 'TL',
'bgcolor', '#777788',
'wmode', 'opaque',
'movie', 'charts',
'src', 'charts',
'FlashVars', 'library_path=charts_library&xml_source=data.xml',
'id', 'my_chart',
'name', 'my_chart',
'menu', 'true',
'allowFullScreen', 'true',
'allowScriptAccess','sameDomain',
'quality', 'high',
'align', 'middle',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'play', 'true',
'devicefont', 'false'
);
} else {
var alternateContent = 'This content requires the Adobe Flash Player. '
+ '<u><a href=http://www.macromedia.com/go/getflash/>Get Flash</a></u>.';
document.write(alternateContent);
}
}
// -->
</script>
<noscript>This content requires JavaScript.
</noscript>
</BODY>
</HTML>
Kemudian buatlah file XML (data.xml) untuk datanya dan atribut lain yang diperlukan engine grafik :
<chart>
<axis_category shadow='light' size='11' color='000000' alpha='70' />
<axis_value shadow='light' size='10' color='ffffff' alpha='70' steps='4' prefix='' suffix='' decimals='0' separator='' show_min='true' />
<chart_border color='000000' top_thickness='0' bottom_thickness='2' left_thickness='0' right_thickness='0' />
<chart_data>
<row>
<null/>
<string>Jun 09</string>
<string>Jul 09</string>
<string>Aug 09</string>
</row>
<row>
<string>Paten</string>
<number tooltip='50' bevel='bevel1' shadow='high'>50</number>
<number tooltip='30' bevel='bevel1' shadow='high'>30</number>
<number tooltip='90' bevel='bevel1' shadow='high'>90</number>
</row>
<row>
<string>Merek</string>
<number tooltip='450' bevel='bevel1' shadow='high'>450</number>
<number tooltip='600' bevel='bevel1' shadow='high'>600</number>
<number tooltip='550' bevel='bevel1' shadow='high'>550</number>
</row>
<row>
<string>Cipta</string>
<number tooltip='90' bevel='bevel1' shadow='high'>90</number>
<number tooltip='120' bevel='bevel1' shadow='high'>120</number>
<number tooltip='75' bevel='bevel1' shadow='high'>75</number>
</row>
<row>
<string>Desain</string>
<number tooltip='200' bevel='bevel1' shadow='high'>200</number>
<number tooltip='160' bevel='bevel1' shadow='high'>160</number>
<number tooltip='180' bevel='bevel1' shadow='high'>180</number>
</row>
<row>
<string>Average</string>
<number bevel='bevel1'>197.5</number>
<number>222.5</number>
<number>223.8</number>
</row>
</chart_data>
<chart_grid_h alpha='20' color='ffffff' thickness='1' type='dashed' />
<chart_label color='0000ff' alpha='60' size='11' position='below' />
<chart_pref line_thickness='2' point_shape='circle' fill_shape='true' />
<chart_rect x='75' y='50' width='400' height='200' positive_alpha='0' />
<chart_type>
<string>column</string>
<string>column</string>
<string>column</string>
<string>column</string>
<string>line</string>
</chart_type>
<draw>
<rect shadow='bg' layer='background' x='0' y='0' width='500' height='300' fill_color='0' />
<text shadow='low' layer='background' color='0' alpha='7' rotation='0' size='30' x='120' y='100' width='300' height='200'>@ DGIP</text>
<text shadow='low' color='000000' alpha='10' rotation='-90' size='35' x='-10' y='300' width='400' height='200' >||||||||||||||||||||||||||||||</text>
<text shadow='high' color='eeffee' alpha='90' size='18' x='45' y='10' width='400' height='180' h_align='center'>Grafik Permohonan HKI</text>
</draw>
<filter>
<shadow id='low' distance='2' angle='45' color='0' alpha='50' blurX='5' blurY='5' />
<shadow id='high' distance='7' angle='45' color='0' alpha='40' blurX='15' blurY='15' />
<shadow id='bg' inner='true' quality='1' distance='50' angle='135' color='000000' alpha='10' blurX='300' blurY='200' knockout='true' />
<bevel id='bevel1' angle='0' blurX='10' blurY='0' distance='5' highlightAlpha='15' highlightColor='ffffff' shadowAlpha='15' type='inner' />
</filter>
<legend shadow='low' x='90' y='45' width='400' height='40' margin='5' fill_color='000000' fill_alpha='0' line_color='000000' line_alpha='0' line_thickness='0' bullet='circle' size='11' color='000000' alpha='60' />
<series_color>
<color>7FB775</color>
<color>A5B1FF</color>
<color>FFDA60</color>
<color>FF2926</color>
<color>FF9205</color>
</series_color>
<tooltip color='FFFFFF' alpha='75' size='11' background_color='8888ff' background_alpha='90' shadow='low' />
</chart>
Ok, keren juga sih grafiknya, cuma sayang bayar =)) Oke deh, selamat mencoba. Kali lain saya akan menulis tentang grafik / chart lagi ah...
