การใช้งาน CRI wiki ขั้นสูง

CRI wiki ถูกออกแบบให้ผู้ใช้ สามารถเข้าถึง หน้าเนื้อหา และ หมวดเนื้อหาดังนี้

• การเข้าถึงหน้าเนื้อหา
  • ผู้ใช้ที่ไม่ได้ login สามารถอ่านหน้าเนื้อหาได้ แต่ไม่สามารถแก้ไขได้
  • ผู้ใช้ที่ login แล้ว สามารถแก้ไขหน้าเนื้อหาได้ทุกหน้า ยกเว้นหน้า home ซึ่งเป็น homepage ของ CRI wiki
• การอัพโหลด ไฟล์รูปภาพ และเอกสาร
  • ผู้ใช้ที่ไม่ได้ login ไม่สามารถอัพโหลด เอกสาร มาไว้ใน CRI wiki ได้
  • ผู้ใช้ที่ login แล้ว สามารถอัพโหลด เอกสาร มาไว้ใน CRI wiki ได้ ในทุกๆ หมวดเนื้อหา (Namespace) แต่ไม่สามารถเขียนทับ หรือลบเอกสารที่มีอยู่แล้วได้
• การใช้งานหน้า intranet
  • ผู้ใช้ที่ไม่ได้ login จะไม่สามารถอ่านหน้าเนื้อหาใน intranet ได้
  • ผู้ใช้ที่ login แล้ว สามารถแก้ไขหน้าเนื้อหาใน intranet ได้
• การใช้งานหน้า homepage ของผู้ใช้
  • หน้าเนื้อหา private และหมวดเนื้อหา private เช่น private มีไว้ให้ผู้ใช้ นั้นๆใช้เท่านั้น ผู้ใช้คนอื่นไม่สามารถอ่านหรือ แก้ไขได้
  • หมวดเนื้อหา (Namespace) private ของ ผู้ใช้นั้นๆ อนุญาตให้ผู้ใช้นั้นๆ อัพโหลดเอกสาร ได้ รวมทั้งเขียนทับ และลบเอกสารที่มีอยู่แล้วได้ด้วย
  • หน้าเนื้อหา public และหมวดเนื้อหา (Namespace) public เช่น public มีไว้ให้ ใครก็ได้เข้ามาแก้ไข แม้แต่ผู้ใช้ ที่ไม่ได้ login
• การใช้งาน stock_photo
  • ผู้ใช้ที่ไม่ได้ login จะไม่สามารถเข้าถึง stock_photo ได้
  • ผู้ใช้ที่ login จะสามารถแก้ไขคำอธิบายรูปภาพได้ แต่ไม่สามารถ อัพโหลด, แก้ไข หรือลบรูปภาพ ใน stock_photo ได้

homepage ของผู้ใช้ มีสองแบบด้วยกันคือ homepage แบบอินเตอร์เน็ต และ homepage แบบอินทราเน็ต โดย homepage แบบอินเตอร์เน็ตจะอนุญาตให้บุคคลภายนอกสามารถเข้ามาดูได้ ส่วน homepage แบบอินทราเน็ตจะอนุญาตให้เฉพาะผู้ที่มี login สามารถเข้ามาดูได้

จะอยู่ในหมวดเนื้อหา staff เช่น :staff:anurat: (anurat) โดยจะมีทั้งหน้าเนื้อหา และหมวดเนื้อหา ในชื่อเดียวกัน เช่นหน้าเนื้อหา :staff:anurat จะมีหมวดเนื้อหา :staff:anurat: ด้วย

ในหมวดเนื้อหา ของผู้ใช้ จะมีหมวดเนื้อหา อีก 2 อันคือ private และ public เช่น :staff:anurat:private private และ :staff:anurat:public public

หน้าเนื้อหา private และหมวดเนื้อหา private มีไว้ให้ผู้ใช้นั้นๆ ใช้งานเท่านั้น คนอื่นๆ ไม่สามารถเข้ามาอ่านได้ เช่นเอาไว้ใช้เขียน memo, note, diary และอื่นๆ

หน้าเนื้อหา public และหมวดเนื้อหา public มีไว้ให้ ใครก็ได้เข้ามาใช้ร่วมกับผู้ใช้ เช่นร่วมกันเขียน papers, articles หรือจัดตั้ง project ต่างๆ

จะอยู่ในหมวดเนื้อหา intranet:staff เช่น :intranet:staff:anurat: (anurat)

• ชื่อเนื้อหาให้ใช้ภาษาอังกฤษตัวเล็กทั้งหมด เช่น about หรือ president
  • ห้ามใช้ภาษาไทย จีน เกาหลี etc.
  • ห้ามใช้ภาษาอังกฤษตัวใหญ่ เช่น CAPITAL หรือ CaPiTal หรือ Capital
• ถ้าเป็นคำสองคำขึ้นไปให้ใช้ เครื่องหมาย underscore ( _ ) ระหว่างคำ เช่น natural_products
  • ห้ามใช้การเว้นวรรคระหว่างคำ
• สามารถใช้ตัวเลขร่วมได้เช่น pc6 หรือ 2008_08_dspace
• หน้าเนื้อหาที่เกี่ยวข้องกับวันเวลา ให้ใช้รูปแบบดังนี้ ปี_เดือน_วัน_ชื่อเอกสาร เช่น 2009_01_12_meeting
• หมวดเนื้อหา (namespace) ให้ใช้หลักการตั้งชื่อเดียวกับ หน้าเนื้อหา

• ไฟล์รูปภาพให้ใช้ภาษาอังกฤษตัวเล็ก ตามด้วยนามสกุลภาพ เช่น lily.jpg
  • ห้ามใช้ภาษาไทย จีน เกาหลี etc.
  • ห้ามใช้ภาษาอังกฤษตัวใหญ่
• ถ้าเป็นคำสองคำขึ้นไปให้ใช้ เครื่องหมาย underscore ( _ ) ระหว่างคำ เช่น white_lily.jpg
  • ห้ามใช้การเว้นวรรคระหว่างคำ
• สามารถใช้ตัวเลขร่วมได้เช่น lily2.jpg
• ถ้าต้องการระบุวันเวลาในชื่อไฟล์ ให้ใช้รูปแบบดังนี้ ปี_เดือน_วัน_ชื่อเอกสาร เช่น 2009_01_12_lily.jpg
• หากมีรูปแบบเดียวกันหลายๆแบบให้เพิ่มเลข ต่อท้ายชื่อไฟล์ เช่น bs_building1.jpg, bs_building2.jpg, bs_building3.jpg เป็นต้น
• รูปภาพ แต่ละรูปจะมี 3 ขนาดคือ original, large และ small ให้เพิ่ม o, l, s ตามลำดับเช่น bs_building1_o.jpg, bs_building1_l.jpg, bs_building1_s.jpg เป็นต้น

การแบ่งคอลัมน์ ใช้คำสั่งดังนี้

  <columns 100% 30% 25% 25% 20% >...</columns>

ค่า 100% คือการกำหนดขนาดของคอลัมน์ทั้งหมด เทียบกับขนาดหน้าจอ ถ้าใส่ 100% จะเป็นการกำหนดให้ใช้พื้นที่หน้าจอทั้งหมดในการแบ่งคอลัมน์

ค่า 30% 25% 25% 20% หมายถึงให้แบ่งคอลัมน์ทั้งหมด 4 คอลัมน์ โดยกำหนดขนาดคอลัมน์แรกเป็น 30% คอลัมน์ที่สองเป็น 25% คอลัมน์ที่สามเป็น 25% และคอลัมน์ที่สี่เป็น 20%

การใส่ข้อมูลในคอลัมน์

สามารถใส่ข้อมูลได้ภายใน tag columns โดยใช้ <newcolumn> ในการเริ่มคอลัมน์ใหม่ ดังตัวอย่างข้างล่างนี้

<columns 100% 30% 25% 25% 20% > 
คอลัมน์ที่ 1
<newcolumn>
คอลัมน์ที่ 2
<newcolumn>
คอลัมน์ที่ 3
<newcolumn>
คอลัมน์ที่ 4
</columns>

จะได้ผลลัพธ์ดังนี้

สามารถให้ CRI wiki ทำการคำนวณทางคณิตศาสตร์ได้ดังตัวอย่างต่อไปนี้

  calc:2+4*10/34=
  calc:cos(pi())>=

จะได้ผลลัพธ์ดังนี้

3.1764705882353
cos(pi()) = -1

วิธีใช้

  calc:math expression=
  calc:math expression>=

calc: คือคำสั่งให้คำนวณทางคณิตศาสตร์
math expression คือสูตรทางคณิตศาสตร์ที่ต้องการให้คำนวณ
ถ้าลงท้ายด้วยเครื่องหมาย = จะแสดงผลลัพธ์การคำนวณเท่านั้น
ถ้าลงท้ายด้วยเครื่องหมาย >= จะแสดงทั้งสูตรทางคณิตศาสตร์ และผลลัพธ์

ฟังก์ชันที่สามารถใช้ได้คือ

สามารถแสดงการนับถอยหลัง ได้ดังนี้

  <COUNTDOWN:1.12.2009|Health risk assessment training program>

จะแสดงผลดังนี้

5500 days since Health risk assessment training program (01/12/2009)

วิธีใช้

  <COUNTDOWN:dd.mm.yyyy|คำอธิบาย>

โดย COUNTDOWN ให้พิมพ์ตัวใหญ่หมด ตามด้วยเครื่องหมาย :
dd.mm.yyyy เป็นวัน เดือน ปี(ค.ศ.) ที่ต้องการให้นับถอยหลัง คั่นด้วยเครื่องหมาย .
ตามด้วยเครื่องหมาย | ก่อนหน้าคำอธิบาย

  <color skyblue>ฟ้า</color>
  <color white/red>ขาวพื้นแดง</color>

จะได้ผลลัพธ์ดังนี้ ฟ้า ขาวพื้นแดง

วิธีใช้

  <color สีตัวอักษร >ข้อความ</color> หรือ
  <color สีตัวอักษร/สีพื้นหลัง >ข้อความ</color> 

สีที่ใช้ได้คือ

RSS feed เป็นการดึงหัวข้อข่าวจากเว็บไซท์ต่างๆ มาแสดงผลบนเว็บของเรา โดยที่เว็บไซท์นั้นๆ จะต้องสนับสนุน RSS feed

เว็บไซท์ที่สนับสนุน RSS feed มักจะมีหัวข้อข่าวหลายประเภทให้แสดงผล เช่น นิตยสาร nature จะมีรายชื่อของ RSS feed ที่สามารถแสดงผลได้ดังนี้

http://www.nature.com/webfeeds/index.html

ถ้าต้องการแสดง RSS feed ในนิตยสาร nature เรื่อง Nature - issue ให้คัดลอกลิงก์จากเว็บไซท์ แล้วพิมพ์ดังนี้

  {{rss>http://www.nature.com/nature/current_issue/rss}}

จะได้ผลลัพธ์ดังนี้

• An error occurred while fetching this feed: http://www.nature.com/nature/current_issue/rss

วิธีใช้

  {{rss>URL ของ RSS feed}}

โดยที่ URL ของ RSS feed เป็นลิงก์ที่ใช้ดึงหัวข้อข่าว

เว็บไซท์ส่วนใหญ่จะแสดงการสนับสนุน RSS feed โดยแสดงไอคอนของ RSS feed เช่น หรือ

เช่นใน http://www.dailynews.co.th และ http://www.bangkokpost.com

เราสามารถคัดลอกลิงก์ได้โดย คลิกเมาส์ขวาที่ไอคอนแล้วเลือก copy link address เมื่อสั่ง paste จะได้ URL ของ RSS feed

สามารถแสดง Note ได้ 4 แบบดังนี้

วิธีใช้

  <note>ข้อความ</note>
  <note important>ข้อความ</note>
  <note tip>ข้อความ</note>
  <note warning>ข้อความ</note>

<note> ใช้สำหรับแสดงข้อความแบบ note
<note important> ใช้สำหรับแสดงข้อความที่สำคัญ
<note tip> ใช้สำหรับแสดงข้อความแบบคำแนะนำ
<note warning> ใช้สำหรับแสดงข้อความแบบคำเตือน

สามารถแสดงผลแบบกราฟได้ เช่น

  <chart2 240 220 barchart FFFFFF CENTER>
  <chart>
   <chart_data>
      <row>
         <null/>
         <string>2001</string>
         <string>2002</string>
         <string>2003</string>
         <string>2004</string>
      </row>
      <row>
         <string>Data</string>
         <number>5</number>
         <number>10</number>
         <number>30</number>
         <number>63</number>
      </row>
   </chart_data>
   <series_color>
     <color>98ce00</color>
   </series_color>
  </chart>
  </chart2>

จะได้ผลลัพธ์ดังนี้

This content requires JavaScript.

หรือแสดงผลแบบกราฟวงกลมดังนี้

  <chart2 240 200 pichart FFFFFF CENTER>
  <chart>
    <chart_type>pie</chart_type>  
    <chart_data>
      <row>
        <null/>
        <string>Academic</string>
        <string>Researchers</string>
      </row>
      <row>
        <string>Data</string>
        <number label='35.1 %'>35.1</number>
        <number label='64.9 %'>64.9</number>
      </row>
    </chart_data>
    <chart_rect x='30' y='10' width='150' height='150'/>
    <chart_label size='12'/>
      <legend layout='vertical' width='100' height='30'
             bullet='circle' font='arial' bold='true'
             size='12' color='CC0000' alpha='90' fill_color='FFFFFF'/> 
      <draw>
        <text size='14' bold='true' x='45' y='160' color='00dd33'>
          CRI personnel
        </text>
      </draw>
      <series_color>
        <color>50c5f3</color>
        <color>f2a02e</color>
      </series_color>
    </chart>
  </chart2>

จะได้ผลลัพธ์ดังนี้

This content requires JavaScript.

หรือแสดงผลแบบ 3D Pie Chart ดังนี้

<chart2 340 290 3dpie FFFFFF CENTER>
  <chart>
    <chart_data>
      <row>
	<null/>
	<string>Noy</string>
	<string>Ake</string>
	<string>Lee</string>
	<string>Mo</string>
	<string>Pok</string>
      </row>
      <row>
	<string></string>
	<number>40</number>
	<number>13</number>
	<number>17</number>
	<number>10</number>
	<number>5</number>
      </row>
    </chart_data>
    <chart_label shadow='low' alpha='65' size='10' position='inside' as_percentage='true' />
    <chart_pref select='true' drag='false' rotation_x='50' />
    <chart_rect x='30' y='50' width='300' height='180' positive_alpha='0' />
    <chart_transition type='scale' delay='2' duration='.5' order='category' />
    <chart_type>3d pie</chart_type>
    <draw>
      <circle transition='dissolve' layer='background' x='165' y='140' radius='100' fill_color='ccddff' fill_alpha='100' line_thickness='0' bevel='bg' blur='blur1' />
    </draw>
    <filter>
      <shadow id='low' distance='2' angle='45' alpha='60' blurX='10' blurY='10' />
      <bevel id='bg' angle='45' blurX='50' blurY='50' distance='10' highlightAlpha='35' shadowColor='0000ff' shadowAlpha='25' type='full' />
      <blur id='blur1' blurX='75' blurY='75' quality='1' />   
    </filter>
    <legend shadow='low' layout='horizontal' margin='20' x='5' y='-10' width='345' height='25' fill_alpha='0' color='191970' alpha='75' />
    <context_menu full_screen='false' />
    <series_color>
      <color>71bf49</color>
      <color>d6ce9b</color>
      <color>e47859</color>
      <color>a384b1</color>
      <color>7d8083</color>
    </series_color>
  </chart>
</chart2>

จะได้ผลลัพธ์ดังนี้

This content requires JavaScript.

หรือแสดงผลแบบ Donut Chart ดังนี้

<chart2 350 340 donutchart FFFFFF CENTER>
  <chart>
    <chart_data>
      <row>
	<null/>
	<string>2005</string>
	<string>2006</string>
	<string>2007</string>
	<string>2008</string>
	<string>2009</string>
      </row>
      <row>
	<string></string>
	<number shadow='high' bevel='data' line_color='FFFFFF' line_thickness='3' line_alpha='75'>20</number>
	<number shadow='high' bevel='data' line_color='FFFFFF' line_thickness='3' line_alpha='75'>10</number>
	<number shadow='high' bevel='data' line_color='FFFFFF' line_thickness='3' line_alpha='75'>30</number>
	<number shadow='high' bevel='data' line_color='FFFFFF' line_thickness='3' line_alpha='75'>50</number>
	<number shadow='high' bevel='data' line_color='FFFFFF' line_thickness='3' line_alpha='75'>40</number>
      </row>
    </chart_data>
    <chart_label shadow='low' color='ffffff' alpha='95' size='10' position='inside' as_percentage='true' />
    <chart_pref select='true' />
    <chart_rect x='30' y='85' width='300' height='175' />
    <chart_transition type='scale' delay='2' duration='.5' order='category' />
    <chart_type>donut</chart_type>
    <draw>
      <rect transition='dissolve' layer='background' x='0' y='100' width='360' height='150' fill_alpha='0' line_color='ffffff' line_alpha='25' line_thickness='40' corner_tl='40'      corner_tr='40' corner_br='40' corner_bl='40' />
      <circle transition='dissolve' layer='background' x='170' y='170' radius='120' fill_color='ccddff' fill_alpha='100' line_thickness='0' bevel='bg' blur='blur1' />
      <rect transition='dissolve' layer='background' shadow='soft' x='20' y='10' width='320' height='35' fill_color='ddeeff' fill_alpha='90' corner_tl='10' corner_tr='10' corner_br='10' corner_bl='10' />
    </draw>
    <filter>
      <shadow id='low' distance='2' angle='45' color='0' alpha='40' blurX='5' blurY='5' />
      <shadow id='high' distance='5' angle='45' color='0' alpha='40' blurX='10' blurY='10' />
      <shadow id='soft' distance='2' angle='45' color='0' alpha='20' blurX='5' blurY='5' />
      <bevel id='data' angle='45' blurX='5' blurY='5' distance='3' highlightAlpha='15' shadowAlpha='25' type='inner' />
      <bevel id='bg' angle='45' blurX='50' blurY='50' distance='10' highlightAlpha='35' shadowColor='0000ff' shadowAlpha='25' type='full' />
      <blur id='blur1' blurX='75' blurY='75' quality='1' />   
    </filter>
    <context_menu full_screen='false' />
    <legend transition='dissolve' x='30' width='300' bevel='low' fill_alpha='0' line_alpha='0' bullet='circle' size='12' color='ffffff' alpha='100' />
    <series_color>
      <color>80cdf3</color>
      <color>f9d327</color>
      <color>7cc461</color>
      <color>ad83ab</color>
      <color>72757a</color>
    </series_color>
    <series_explode>
      <number>0</number>
      <number>0</number>
      <number>0</number>
      <number>25</number>
      <number>0</number>
    </series_explode>
    <series transfer='true' />
  </chart>
</chart2>

จะได้ผลลัพธ์ดังนี้

This content requires JavaScript.

หรือแสดงผลแบบ Polar Chart ดังนี้

<chart2 400 330 polar FFFFFF CENTER>
  <chart>
    <axis_category shadow='shadow1' size='13' color='4e627c' alpha='75' orientation='circular' />
    <axis_ticks value_ticks='' category_ticks='' />
    <axis_value alpha='0' min='0' />
    <chart_border bottom_thickness='0' left_thickness='0' />
    <chart_data>
      <row>
	<null/>
	<string>speed</string>
	<string>power</string>
	<string>cost</string>
	<string>reliability</string>
	<string>efficiency</string>
      </row>
      <row>
        <string>car 1</string>
        <number>60</number>
        <number>90</number>
        <number>40</number>
        <number>90</number>
	<number>50</number>
      </row>
      <row>
	<string>car 2</string>
	<number>85</number>
	<number>70</number>
	<number>80</number>
	<number>40</number>
	<number>90</number>
      </row>
    </chart_data>
    <chart_grid_h alpha='20' color='000000' thickness='1' type='dashed' />
    <chart_grid_v alpha='5' color='000000' thickness='20' type='solid' />
    <chart_pref point_shape='circle' point_size='8' fill_shape='true' grid='circular' />
    <chart_rect bevel='bevel1' x='60' y='40' width='350' height='225' positive_color='008888' positive_alpha='25' />
    <chart_transition type='zoom' delay='2' duration='1' order='series' />
    <chart_type>polar</chart_type>
    <draw>
      <circle transition='dissolve' layer='background' x='220' y='150' radius='125' fill_color='ccddff' fill_alpha='100' line_thickness='0' bevel='bg' blur='blur1' />
    </draw>
    <filter>
      <shadow id='shadow1' distance='1' angle='45' color='0' alpha='50' blurX='3' blurY='3' />
      <bevel id='bevel1' angle='45' blurX='10' blurY='10' distance='5' highlightAlpha='25' highlightColor='ffffff' shadowAlpha='35' type='outer' />
      <bevel id='bg' angle='45' blurX='50' blurY='50' distance='10' highlightAlpha='35' shadowColor='0000ff' shadowAlpha='25' type='full' />
      <blur id='blur1' blurX='75' blurY='75' quality='1' />   
    </filter>
    <legend shadow='shadow1' x='20' y='100' width='20' height='40' margin='3' fill_alpha='0' layout='vertical' bullet='circle' size='12' color='4e627c' alpha='75' />
    <series_color>
      <color>dd7055</color>
      <color>79c45f</color>
    </series_color>
  </chart>
</chart2>

จะได้ผลลัพธ์ดังนี้

This content requires JavaScript.

หรือแสดงผลแบบ 3D Column Chart ดังนี้

<chart2 350 370 3dcolumn FFFFFF CENTER>
  <chart>
    <axis_category shadow='low' size='12' color='000000' alpha='50' orientation='horizontal' />
    <axis_ticks value_ticks='false' category_ticks='false' />
    <axis_value alpha='0' />
    <chart_border top_thickness='0' bottom_thickness='0' left_thickness='0' right_thickness='0' />
    <chart_data>
      <row>
	<null/>
	<string>2007</string>
	<string>2008</string>
	<string>2009</string>
      </row>
      <row>
	<string>region 1</string>
	<number>50</number>
	<number>70</number>
	<number>110</number>
      </row>
      <row>
	<string>region 2</string>
	<number>25</number>
	<number>50</number>
	<number>90</number>
      </row>
    </chart_data>
    <chart_grid_h thickness='0' />
    <chart_label shadow='low' color='FFFFFF' alpha='100' size='10' position='over' />
    <chart_pref rotation_x='30' rotation_y='40' min_x='20' max_x='70' min_y='30' max_y='80' />
    <chart_rect x='-80' y='10' width='480' height='240' positive_alpha='0' negative_alpha='25' />
    <chart_transition type='drop' delay='2' duration='2' order='series' />
    <chart_type>3d column</chart_type>
    <draw>
      <circle transition='dissolve' layer='background' x='170' y='180' radius='130' fill_color='ccddff' fill_alpha='100' line_thickness='0' bevel='bg' blur='blur1' />
    </draw>
    <filter>
      <shadow id='low' distance='2' angle='45' alpha='50' blurX='2' blurY='2' />
      <bevel id='bg' angle='45' blurX='50' blurY='50' distance='10' highlightAlpha='35' shadowColor='0000ff' shadowAlpha='25' type='full' />
      <blur id='blur1' blurX='75' blurY='75' quality='1' />   
    </filter>
    <legend shadow='low' x='10' y='10' width='100' height='40' margin='5' fill_color='000066' fill_alpha='0' line_color='000000' line_alpha='0' line_thickness='0' layout='vertical' size='12' color='000000' alpha='50' />
    <series_color>
      <color>f3a447</color>
      <color>81cef4</color>
    </series_color>
    <series bar_gap='10' set_gap='20' />
  </chart>
</chart2>

จะได้ผลลัพธ์ดังนี้

This content requires JavaScript.

หรือแสดงผลแบบ Line Chart ดังนี้

<chart2 450 285 line FFFFFF CENTER>
  <chart>
    <axis_category size='16' alpha='85' shadow='medium' />
    <axis_ticks value_ticks='false' category_ticks='true' major_thickness='2' minor_thickness='1' minor_count='1' minor_color='222222' position='inside' />
    <axis_value shadow='medium' min='-40' size='10' color='000000' alpha='65' steps='6' show_min='false' />
    <chart_data>
      <row>
	<null/>
	<string>2006</string>
	<string>2007</string>
	<string>2008</string>
	<string>2009</string>
      </row>
      <row>
	<string>region 1</string>
	<number shadow='medium' tooltip='$48 Million'>48</number>
	<number tooltip='$55 Million'>55</number>
	<number tooltip='$80 Million'>80</number>
	<number tooltip='$100 Million'>100</number>
      </row>
      <row>
	<string>region 2</string>
	<number shadow='low' tooltip='$-12 Million'>-12</number>
	<number tooltip='$10 Million'>10</number>
	<number tooltip='$55 Million'>55</number>
	<number tooltip='$65 Million'>65</number>
      </row>
      <row>
	<string>region 3</string>
	<number shadow='low' tooltip='$27 Million'>27</number>
	<number tooltip='$-20 Million'>-20</number>
	<number tooltip='$15 Million'>15</number>
	<number tooltip='$80 Million'>80</number>
      </row>
    </chart_data>
    <chart_grid_h alpha='10' thickness='1' />
    <chart_guide horizontal='true' vertical='true' thickness='1' alpha='25' type='dashed' text_h_alpha='0' text_v_alpha='0' />
    <chart_pref line_thickness='2' point_shape='circle' point_size='7' fill_shape='false' />
    <chart_rect x='75' y='60' width='320' height='150' positive_color='ffffee' positive_alpha='65' negative_color='ff8888' negative_alpha='65' bevel='bg' shadow='high' />
    <chart_transition type='slide_left' delay='2' duration='1' order='series' />
    <chart_type>Line</chart_type>
    <draw>
      <rect transition='dissolve' layer='background' x='40' y='30' width='360' height='200' fill_color='ccddff' fill_alpha='100' line_thickness='0' bevel='bg2' blur='blur1' />
    </draw>
    <filter>
      <shadow id='low' distance='2' angle='45' alpha='20' blurX='5' blurY='5' />
      <shadow id='medium' distance='2' angle='45' alpha='40' blurX='7' blurY='7' />
      <shadow id='high' distance='5' angle='45' alpha='25' blurX='10' blurY='10' />
      <bevel id='bg' angle='45' blurX='15' blurY='15' distance='5' highlightAlpha='25' shadowAlpha='50' type='outer' />
      <bevel id='bg2' angle='45' blurX='50' blurY='50' distance='10' highlightAlpha='35' shadowColor='0000ff' shadowAlpha='25' type='full' />
      <blur id='blur1' blurX='75' blurY='75' quality='1' />   
    </filter>
    <legend shadow='low' transition='dissolve' delay='0' duration='0.5' x='75' y='35' width='320' height='5' layout='horizontal' margin='5' bullet='line' size='13' color='ffffff' alpha='75' fill_color='000000' fill_alpha='10' line_color='000000' line_alpha='0' line_thickness='0' />
    <tooltip color='FFFFFF' alpha='90' background_color_1='8888FF' background_alpha='90' shadow='medium' />
    <series_color>
      <color>e17557</color>
      <color>4ab1e7</color>
      <color>78c35e</color>
    </series_color>
    <series_explode>
      <number>400</number>
    </series_explode>
  </chart>
</chart2>

จะได้ผลลัพธ์ดังนี้

This content requires JavaScript.

CRI wiki สามารถแปลงเอกสารจากหน้าเว็บเป็นไฟล์ odt ได้ ซึ่งไฟล์ odt นี้เทียบเท่ากับไฟล์ doc ของ Microsoft office แต่เป็นไฟล์เอกสาร ของโปรแกรม Open office ซึ่งเป็นโปรแกรมประเภท open source

โดยเมื่อเปิดไฟล์ odt ขึ้นมาด้วยโปรแกรม Open office แล้ว จะสามารถเลือกเซฟเป็นไฟล์ doc หรือ PDF ได้

ทำได้โดยใส่คำสั่งด้านล่างนี้ไว้ที่ด้านบนสุดของหน้า

  ~~ODT~~

จะมีไอคอนของ open office โชว์ดังนี้

เมื่อคลิกที่ไอคอน จะมีหน้าต่างขึ้นมาเพื่อเซฟไฟล์ โดยไฟล์ที่เซฟได้จะเป็นไฟล์ odt ซึ่งจะสามารถเปิดได้ถ้ามีโปรแกรม Open office

ตัวอย่างหน้าจอของโปรแกรม Open office เมื่อเปิดไฟล์ odt จะเป็นดังนี้ คลิกเพื่อดูตัวอย่าง

หลังจากที่เปิดไฟล์ odt ด้วยโปรแกรม Open office ได้แล้ว สามารถเซฟไฟล์เป็น Microsoft word หรือ PDF ได้ด้วยคำสั่งของโปรแกรม

การแปลงเป็นไฟล์ Microsoft word (.doc) ทำได้โดยการเลือกเมนู File และ Save As
จากนั้นที่ Save as type: เลือก Microsoft Word 97/2000/XP (.doc)(*.doc) ดังรูปตัวอย่างนี้ คลิกเพื่อดูตัวอย่าง

การแปลงเป็นไฟล์ pdf ทำได้โดยการเลือกเมนู File และ Export as PDF…

CRI wiki สามารถแสดงเอกสารแบบ presentation ผ่านหน้าเว็บบราวเซอร์ได้ โดยไม่ต้องมีซอฟท์แวร์อื่นๆเพิ่มเติม

วิธีการทำให้หน้าเว็บมีการแสดงแบบ presentation ทำได้โดยใส่คำสั่งด้านล่างนี้ไว้ที่ด้านบนสุดของหน้า

  ~~SLIDESHOW~~

จะมีไอคอน slideshow แสดงดังนี้

เมื่อทำการคลิก หน้าเว็บจะเปลี่ยนเข้าสู่โหมด presentation ดังตัวอย่างในรูปนี้ คลิกเพื่อดูตัวอย่าง

ซึ่งจะเป็นการแสดงแบบเต็มหน้าต่างของโปรแกรม หากต้องการให้แสดงแบบเต็มหน้าจอให้กดปุ่ม F11
และเมื่อต้องการให้กลับจากการแสดงแบบเต็มหน้าจอ ให้กดปุ่ม F11 อีกครั้ง

CRI wiki สามารถแสดงวีดีโอจาก Youtube ภายในหน้าเว็บได้ดังตัวอย่างนี้

วิธีใช้

{{youtube>คำสั่ง:รหัสวีดีโอ|คำอธิบาย}}

หากต้องการแสดง link ไปยังวีดีโอจาก Youtube ให้ใช้คำสั่ง link เช่น {{youtube>link:-_Fs8oIdD7o|Look up in the sky}} จะได้ผลลัพธ์ดังนี้

หากต้องการแสดงวีดีโอขนาดเล็ก ให้ใช้คำสั่ง small เช่น {{youtube>small:-_Fs8oIdD7o}} จะได้ผลลัพธ์ดังนี้

หากต้องการแสดงวีดีโอขนาดใหญ่ ให้ใช้คำสั่ง large เช่น {{youtube>large:-_Fs8oIdD7o}} จะได้ผลลัพธ์ดังนี้

วิธีแทรกวีดีโอ (อีกวิธี)

{{http://www.youtube.com/v/gKg_QtlmZfc?.swf?400×333}}