BSD/Linux Tutorial Zone

Today, I want to introduce a software to draw a diagram in the Web. The name of this software is XML/SWF Charts. The main purpose of this software is to allow you to easily draw the chart in the website. There are often a lot of charts to be drew in the blogs or websites to provide more detail data for customers or users. A lot of Web sites use the PHP GD Library to draw the chart before. That is really a nice solution to display detail data in the web. However, XML/SWF Charts is convenient and easy to use for me. It works in the client-side through the SWF (Flash), so as long as the focus of preparations for Server-side XML data, this would reduce the loading on Server-side. Of course, another advantage is that you can draw the three-dimensional objects and 3D rendering and animation effects.
Actually, it was a little bit complicated software especially when I began to use it first time. So I have to take a moment to understand the contents of XML that I probably know how to use it. If you are also want to try it to draw diagram in the web, you can refer to the following steps to configure and install XML/SWF Charts for your website.

Step 1: You have to download it from the official website and then extract it to the root directory of your website

http://www.maani.us/xml_charts/charts.sit--for MacOS
http://www.maani.us/xml_charts/charts.tgz--for Linux,BSD
http://www.maani.us/xml_charts/charts.zip--for Windows


# cd /usr/local/www/apache22/data/your_web_root_directory/
# mkdir charts
# cd charts
# wget http://www.maani.us/xml_charts/charts.tgz
# tar -zxvf charts.tgz

Step 2: Now, you can see the example from the sample link as below.

http://your_web_address/charts/sample.html

Step 3: In this step, you shall copy this sample.xml file to another one such as test.xml and then fill data what you want to display. Please refer to my below example:

# cp sample.xml test.xml
# vi test.xml

<chart>
<chart_type>bar</chart_type>
<chart_transition type='scale' delay='.5' duration='0.5' order='series' />
<chart_label position='right' font='arial' bold='true' size='10' color='000000' alpha='100' />
    <chart_data>
      <row>
        <null/>
        <string>Taiwan
        <string>US
        <string>UK
      </row>
      <row>
        <string>Product A
        <number>15785
        <number>15268
        <number>15094
      </row>
      <row>
        <string>Product B
        <number>15718
        <number>14633
        <number>14504
      </row>
      <row>
        <string>Product C
        <number>15150
        <number>14253
        <number>14223
      </row>
    </chart_data>
</chart>

Step 4: Please modify the following red word parts and then add the embedded code in your web page!

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash /swflash.cab#version=9,0,0,0' WIDTH='400' HEIGHT='250' id='charts' ALIGN=''> <param NAME=movie VALUE='http://www.ardoros.com/charts/charts.swf?library_path=http://www.ardoros.com/charts/charts_library&xml_source=http://www.ardoros.com/charts/test.xml'></param><param NAME=quality VALUE=high> </param><param NAME=bgcolor VALUE=#dddddd> <embed src='http://www.ardoros.com/charts/charts.swf?library_path=http://www.ardoros.com/charts/charts_library&xml_source=http://www.ardoros.com/charts/test.xml' quality=high bgcolor=#dddddd WIDTH='400' HEIGHT='250' NAME='charts” ALIGN='' swLiveConnect='true' TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer'> </embed> </param></object>

PS: If you want to see the effect of XML/SWF Charts, please refer to the following article.
http://lifestory.moqin.com/?p=3494