OFCJS (Open Flash Chart)

HTC for OFCJS
- (Open Flash Chart for Javascript)

--------------------------------------------------------------------------------

- Install files & The Code

오픈플레쉬 차트 서비스를 위해서는 몇가지 파일이 필요합니다.
1. [ bindings.xml ]- FireFox 용 HTC binding file
2. [ moz-behaviors.xml ] - FireFox 용 HTC behaviors
3. [ ofcjs.htc ]- 오픈 플레쉬 차트 HTC 파일
4. 당 서비스는 비상업용 사이트에서는 이용가능하나 상업용 사이트는 사용을 불허합니다.


<script type="text/javascript" src="http://chart.cafen.net/JS/swfobject.js"></script>
<script type="text/javascript" charset="utf-8" src="http://chart.cafen.net/JS/rainOpenSWFChart.js"></script>

<style>
.charthtc {
    behavior: url(css/ofcjs.gif);
    -moz-binding: url(css/bindings.xml#ofcjs.htc);
}
</style>

---

- [ Charts ] - Data

 

<div class="charthtc" style="width:680px;height:200px">
<c_title text='Many data lines' cstyle='{font-size: 20px; color: #736AFF}'></c_title>
<c_data data='15,18,14,14,14,16,19,14,15,18,15,14'></c_data>
<c_data data='9,9,12,9,10,10,12,8,13,11,13,11'></c_data>
<c_data data='6,1,7,1,2,1,4,2,2,7,2,4'></c_data>
<c_line text='Page views' color='#9933CC' size=10 width=2></c_line>
<c_linedot text='Downloads' color='#CC3399' size=10 width=3 dotsize=5></c_linedot>
<c_linehollow text='Bounces' color='#80a033' size=10 width=2 dotsize=4></c_linehollow>
</div>

---

- [ Charts ] - Bar Chart

 

<div class="charthtc" style="width:680px;height:200px">
<c_title text='Bar Chart' cstyle='{font-size: 20px;}'></c_title>
<c_data data='5,8,6,5,9,7,5,9,9'></c_data>
<c_barfilled text='Page views' alpha=50 color='#9933CC' outline='#8010A0' size=10></c_barfilled>
<c_xlabels data='January,February,March,April,May,June,July,August,September'></c_xlabels>
<c_xaxissteps data=2></c_xaxissteps>
<c_xlabelstyle size=10 color=#9933CC' orientation=0 step=2></c_xlabelstyle>
<c_ymax data=10></c_ymax>
<c_ylabelsteps data=4></c_ylabelsteps>
<c_ylegend text='Open Flash Chart' size=12 color='#736AFF'></c_ylegend>
</div>

---

- [ Charts ] - Bar Chart 2

 

<div class="charthtc" style="width:680px;height:200px">
<c_title text='Bar Chart' cstyle='{font-size: 20px; color: #736AFF}'></c_title>
<c_data data='3,3,2,2,3,3,4,2,3'></c_data>
<c_data data='6,6,6,7,6,8,8,8,9'></c_data>
<c_data data='4,3,3,2,7,6,3,9,8'></c_data>
<c_bar text='Me' alpha=50 color='#0066CC' size=10></c_bar>
<c_bar text='You' alpha=50 color='#9933CC' size=10></c_bar>
<c_bar text='Them' alpha=50 color='#639F45' size=10></c_bar>
<c_xlabels data='January,February,March,April,May,June,July,August,September'></c_xlabels>
<c_xlabelstyle size=10 color=#9933CC' orientation=0 step=2></c_xlabelstyle>
<c_xaxissteps data=2></c_xaxissteps>
<c_ymax data=10></c_ymax>
<c_ylabelsteps data=2></c_ylabelsteps>
<c_ylegend text='Open Flash Chart' size=12 color='#736AFF' ></c_ylegend>
</div>

---

- [ Charts ] - Bar Chart Glass

 
<div class="charthtc" style="width:680px;height:200px">
<c_title text='Glass Bars' cstyle='{font-size:20px; color: #bcd6ff; margin:10px;
background-color: #5E83BF; padding: 5px 15px 5px 15px;}'></c_title>
<c_data data='5,5,3,2,4,2,3,3,4,3'></c_data>
<c_data data='-5,7,-2,9,-1,8,-3,4,6,7'></c_data>
<c_barglass alpha='75' color='#D54C78' text='2006' size=10></c_barglass>
<c_barglass alpha='75' color='#3334AD' text='2007' size=10></c_barglass>
<c_xaxiscolour data='#909090' grid='#ADB5C7'></c_xaxiscolour>
<c_yaxiscolour data='#909090' grid='#ADB5C7'></c_yaxiscolour>
<c_xlabels data='January,February,March,April,May,June,July,August,September,October'></c_xlabels>
<c_ymin data=-5></c_ymin>
<c_ymax data=10></c_ymax>
<c_ylabelsteps data=6></c_ylabelsteps>
<c_ylegend text='Open Flash Chart' size=12 color='#736AFF' ></c_ylegend>
</div>

---

- [ Charts ] - Bar Chart 3D

 

<div class="charthtc" style="width:680px;height:200px">
<c_title text='3D Bar Chart' cstyle='{font-size:20px; color: #FFFFFF; margin: 5px;
    background-color: #505050; padding:5px; padding-left: 20px; padding-right: 20px;}'></c_title>
<c_data data='3,3,2,5,5,5,4,4,5,2'></c_data>
<c_data data='9,5,7,5,8,9,8,5,9,7'></c_data>
<c_xaxis3d data='12'></c_xaxis3d>
<c_bar3d alpha='75' color='#D54C78' text='2006' size=10></c_bar3d>
<c_bar3d alpha='75' color='#3334AD' text='2007' size=10></c_bar3d>
<c_xaxiscolour data='#909090' grid='#ADB5C7'></c_xaxiscolour>
<c_yaxiscolour data='#909090' grid='#ADB5C7'></c_yaxiscolour>
<c_xlabels data='January,February,March,April,May,June,July,August,September,October'></c_xlabels>
<c_ymax data=10></c_ymax>
<c_ylabelsteps data=5></c_ylabelsteps>
<c_ylegend text='Open Flash Chart' size=12 color='#736AFF' ></c_ylegend>
</div>

---

- [ Charts ] - Bar Chart Sketch

 
<div class="charthtc" style="width:680px;height:200px">
<c_title text='Bar Chart Sketch' cstyle='{font-size:20px; color: #FFFFFF; margin: 5px;
    background-color: #505050; padding:5px; padding-left: 20px; padding-right: 20px;}'></c_title>
<c_data data='4,3,2,3,5,4,4,4,2,5'></c_data>
<c_data data='7,5,9,5,7,9,5,9,9,9'></c_data>
<c_barsketch alpha='75' offset=6 color='#D54C78' text='2006' size=10></c_barsketch>
<c_barsketch alpha='75' offset=6 color='#3334AD' text='2007' size=10></c_barsketch>
<c_xaxiscolour data='#909090' grid='#ADB5C7'></c_xaxiscolour>
<c_yaxiscolour data='#909090' grid='#ADB5C7'></c_yaxiscolour>
<c_xlabels data='January,February,March,April,May,June,July,August,September,October'></c_xlabels>
<c_xlabelstyle size=10 color=#9933CC' orientation=2></c_xlabelstyle>
<c_ymax data=10></c_ymax>
<c_ylabelsteps data=5></c_ylabelsteps>
<c_ylegend text='Open Flash Chart' size=12 color='#736AFF' ></c_ylegend>
</div>

---

- [ Charts ] - Area

 

<div class="charthtc" style="width:680px;height:200px">
<c_title text='Area Chart' cstyle='{font-size:20px; color: #FFFFFF; margin: 5px;
    background-color: #505050; padding:5px; padding-left: 20px; padding-right: 20px;}'></c_title>
<c_data data='0,0.377471728511,0.739894850386,1.07282069945,1.36297657271,1.59879487114,1.77087426334,1.87235448698,1.89918984578,1.85031049867,1.72766511097,1.53614316726,1.28338004305,0.979452606461,0.636477485296,0.268128015314,-0.110910872512,-0.485528093851,-0.84078884226,-1.16252999279,-1.43792474109,-1.65599396759,-1.80804394039,-1.8880129069,-1.89271275679,-1.82195612186,-1.67856384587,-1.46825252636,-1.19940661196,-0.882744140886,-0.530889446578'></c_data>
<c_areahollow width=2 alpha=25 dotsize='3' color='#CC3399' text='2006' size=10 fillcolor=#773399></c_areahollow>
<c_xaxiscolour data='#909090' grid='#ADB5C7'></c_xaxiscolour>
<c_yaxiscolour data='#909090' grid='#ADB5C7'></c_yaxiscolour>
<c_xlabels data='0.00,0.38,0.74,1.07,1.36,1.60,1.77,1.87,1.90,1.85,1.73,1.54,1.28,0.98,0.64,0.27,-0.11,-0.49,-0.84,-1.16,-1.44,-1.66,-1.81,-1.89,-1.89,-1.82,-1.68,-1.47,-1.20,-0.88,-0.53'></c_xlabels>
<c_xlabelstyle size=10 color=#9933CC' orientation=2></c_xlabelstyle>
<c_ymin data=-2></c_ymin>
<c_ymax data=2></c_ymax>
<c_ylabelsteps data=5></c_ylabelsteps>
<c_ylegend text='Open Flash Chart' size=12 color='#736AFF' ></c_ylegend>
</div>

---

- [ Charts ] - Bar + Line Chart

 
<div class="charthtc" style="width:680px;height:200px">
<c_title text='Many data lines' cstyle='{font-size: 20px; color: #736AFF}'></c_title>
<c_data data='16,19,16,19,16,17,18,16,17,17'></c_data>
<c_data data='10,11,8,11,13,13,12,12,10,9'></c_data>
<c_data data='7,1,7,4,5,1,4,1,7,6'></c_data>
<c_bar text='Page views' color='#9933CC' size=10 width=2></c_bar>
<c_bar text='Downloads' color='#CC3399' size=10 width=3></c_bar>
<c_linedot text='Bounces' color='#80a033' size=10 width=2 dotsize=4></c_linedot>
<c_xlabels data='January,February,March,April,May,June,July,August,September,October'></c_xlabels>
<c_xlabelstyle size=10 color=#9933CC' orientation=2></c_xlabelstyle>
</div>

---

- [ Charts ] - Pie Chart

 

<div class="charthtc" style="width:300px;height:200px">
<c_pie alpha=60 color='#505050' gradient=true cstyle='{font-size: 12px; color: #404040;}' ></c_pie>
<c_pievalues data='10,12,7,9,10' text='IE,Firefox,Opera,Wii,Other'></c_pievalues>
<c_pieslicecolours data='#d01f3c,#356aa0,#C79810'></c_pieslicecolours>
<c_tooltip data='#val#%'></c_tooltip>
</div>

<div class="charthtc" style="width:300px;height:200px">
<c_pie alpha=60 color='#505050' gradient=false cstyle='{font-size: 12px; color: #404040;}' ></c_pie>
<c_pievalues data='10,12,7,9,10' text='IE,Firefox,Opera,Wii,Other'></c_pievalues>
<c_pieslicecolours data='#d01f3c,#356aa0,#C79810'></c_pieslicecolours>
<c_tooltip data='#val#%'></c_tooltip>
</div>

---

- [ Charts ] - Scatter Chart

 

<div class="charthtc" style="width:680px;height:200px">
<c_title text='Scatter Chart' cstyle='{font-size: 20px; color: #736AFF}'></c_title>
<c_value x='15' y='9' size='18'></c_value>
<c_value x='11' y='19' size='6'></c_value>
<c_value x='9' y='13' size='11'></c_value>
<c_value x='20' y='4' size='11'></c_value>
<c_value x='12' y='18' size='12'></c_value>
<c_value x='15' y='16' size='9'></c_value>
<c_value x='8' y='5' size='15'></c_value>
<c_value x='6' y='3' size='20'></c_value>
<c_value x='14' y='8' size='8'></c_value>
<c_value x='5' y='8' size='9'></c_value>
<c_value x='15' y='7' size='6'></c_value>
<c_value x='18' y='6' size='5'></c_value>
<c_value x='18' y='4' size='4'></c_value>
<c_value x='20' y='15' size='18'></c_value>
<c_value x='15' y='2' size='3'></c_value>
<c_scatter text='Downloads' color='#CC3399' size=10 width=2></c_scatter>
<c_value x='18' y='8' size='17'></c_value>
<c_value x='10' y='13' size='16'></c_value>
<c_value x='4' y='2' size='19'></c_value>
<c_value x='7' y='3' size='4'></c_value>
<c_value x='5' y='1' size='19'></c_value>
<c_value x='12' y='14' size='16'></c_value>
<c_value x='11' y='15' size='8'></c_value>
<c_value x='16' y='8' size='5'></c_value>
<c_value x='3' y='16' size='11'></c_value>
<c_value x='16' y='13' size='10'></c_value>
<c_value x='1' y='19' size='19'></c_value>
<c_value x='11' y='18' size='19'></c_value>
<c_value x='17' y='0' size='11'></c_value>
<c_value x='5' y='18' size='14'></c_value>
<c_value x='1' y='19' size='15'></c_value>
<c_scatter text='Uploads' color='#80a033' size=10 width=2></c_scatter>
<c_xmin data=0></c_xmin>
<c_xmax data=20></c_xmax>
<c_ymin data=0></c_ymin>
<c_ymax data=20></c_ymax>
<c_xlegend data='Open Flash Chart' color=#464646 size=16></c_xlegend>
</div>

invalid-file