카페엔넷 OpenAPI:: OFCJS(OpenFlashchart with Javascript) / Home / OFCJS / Sample

Cafen.net OpenAPI

Friendly Used by

	IE < 6.0, IE 5.5
	FireFox
	Google Chrome
	Safari
	Flock
	Opera

Samples

- rainEditor

- rainMap

- rainGraph

- openAPI Search

References

- rainEditor

- rainMap

- rainGraph

- openAPI Search

The Last Tails

Visitors Statistics

Site | Page

openAPI Use Statistics

Editor | Map | Others

OFCJS(OpenFlashchart with Javascript)

http://openapi.cafen.net/ofcjs/sample/

_ Home _ OFCJS _ Sample

Install files & The Code

Gallery - Width and Height

Both width and height are measured in pixels, example one is 400px wide by 200px high.

<script type="text/javascript">
	
var max = 20;
var tmp = [];
for(var i=0; i<9; i++ ) 
  tmp.push(rand(0,max));

var g = new graph(400, 200);
g.set_data( tmp );
g.set_x_labels( tmp );
g.title( 'Size Example', '{font-size: 15px}' );
g.render('flashcontent0');

</script>

Gallery - Data

Add different data to the graph.

<script type="text/javascript">
	
var data_1 = [];
var data_2 = [];
var data_3 = [];
for(var i=0; i<12; i++ ) {
  data_1.push(rand(14,19));
  data_2.push(rand(8,13));
  data_3.push(rand(1,7));
}

var g = new graph(450,300);
g.title( 'Many data lines', '{font-size: 20px; color: #736AFF}' );

// we add 3 sets of data:
g.set_data(data_1 );
g.set_data(data_2 );
g.set_data(data_3 );

g.line( 2, '0x9933CC', 'Page views', 10 );
g.line_dot( 3, 5, '0xCC3399', 'Downloads', 10);    // <-- 3px thick + dots
g.line_hollow( 2, 4, '0x80a033','Bounces', 10);

g.set_x_labels( ['January','February','March','April','May','June',
	'July','August','Spetember','October','November','December' ] );
g.set_x_label_style( 10, '0x000000', 0, 2 );

g.set_y_max( 20 );
g.y_label_steps( 4 );
g.set_y_legend( 'Open Flash Chart', 12, '#736AFF' );
g.render('flashcontent1');

</script>

Gallery - Bar Chart

<script type="text/javascript">

var tmp_bar = new bar_outline( 50, '#9933CC', '#8010A0');
tmp_bar.key( 'Page views', 10 );
var data = [];
for( var i=0; i<9; i++ ) {
  tmp_bar.data.push(rand(5,9));
}
g = new graph(450,300);
g.title( 'Bar Chart', '{font-size: 20px;}' );
g.data_sets.push(tmp_bar);
g.set_x_labels(['January','February','March','April',
	'May','June','July','August','September']);
g.set_x_label_style( 10, '#9933CC', 0, 2 );
g.set_x_axis_steps( 2 );
g.set_y_max( 10 );
g.y_label_steps( 4 );
g.set_y_legend( 'Open Flash Chart', 12, '#736AFF' );
g.render('flashcontent2');

</script>

Gallery - Bar Chart 2

Add different data to the graph.

<script type="text/javascript">
var bar_1 = new bar( 50, '#0066CC' );
bar_1.key( 'Me', 10 );

var bar_2 = new bar( 50, '#9933CC' );
bar_2.key( 'You', 10 );

var bar_3 = new bar( 50, '#639F45' );
bar_3.key( 'Them', 10 );

for(var i=0; i<9; i++ ) {
  bar_1.data.push(rand(2,5));
  bar_2.data.push(rand(5,9));
  bar_3.data.push(rand(2,9));
}

// create the chart:
var g = new graph(450,300);
g.title( 'Bar Chart', '{font-size: 26px;}' );

// add the 3 bar charts to it:
g.data_sets.push(bar_1);
g.data_sets.push(bar_2);
g.data_sets.push(bar_3);

//
g.set_x_labels(['January','February','March','April',
	'May','June','July','August','September']);
// set the X axis to show every 2nd label:
g.set_x_label_style( 10, '#9933CC', 0, 2 );
// and tick every second value:
g.set_x_axis_steps( 2 );
//

g.set_y_max( 10 );
g.y_label_steps( 2 );
g.set_y_legend( 'Open Flash Chart', 12, '0x736AFF' );
g.render('flashcontent3');

</script>

Gallery - Bar Chart 3D

We at Open flash Chart always strive to make things easy for ourselves. So 3D bar charts have exactly the same parameters as the bar object. The 3D effect is created by shifting the bar colour towards white (#FFFFFF) by about 10%, these two colours are then blended to make the bars look 3D.

<script type="text/javascript">
var bar_red = new bar_3d( 75, '#D54C78' );
bar_red.key( '2006', 10 );

// add random height bars:
for(var i=0; i<10; i++ )
 bar_red.data.push(rand(2,5));

//
// create a 2nd set of bars:
//
var bar_blue = new bar_3d( 75, '#3334AD' );
bar_blue.key( '2007', 10 );

// add random height bars:
for(var i=0; i<10; i++ )
  bar_blue.data.push(rand(5,9));

// create the graph object:
var g = new graph(600, 260);
g.title( '3D Bar Chart', '{' +
	'font-size:20px; color: #FFFFFF; margin: 5px; background-color: #505050; '  +
	'padding:5px; padding-left: 20px; padding-right: 20px;}' );

//g.set_data( $data_1 );
//g.bar_3D( 75, '#D54C78', '2006', 10 );

//g.set_data( $data_2 );
//g.bar_3D( 75, '#3334AD', '2007', 10 );

g.data_sets.push(bar_red);
g.data_sets.push(bar_blue);

g.set_x_axis_3d( 12 );
g.x_axis_colour( '#909090', '#ADB5C7' );
g.y_axis_colour( '#909090', '#ADB5C7' );

g.set_x_labels( ['January','February','March','April',
	'May','June','July','August','September','October' ] );
g.set_y_max( 10 );
g.y_label_steps( 5 );
g.set_y_legend( 'Open Flash Chart', 12, '#736AFF' );

g.render('flashcontent4');
</script>

Gallery - Bar Chart Glass

We at Open flash Chart always strive to make things easy for ourselves. So glass bars have almost the same parameters as the bar method. The glass effect is created by drawing a semi-transparent white overlay ontop of the rounded bar.

<script type="text/javascript">
var bar_1 = new bar_glass( 55, '#D54C78', '#C31812' );
bar_1.key( '2006', 10 );

// add 10 bars with random heights
for(var i=0; i<10; i++ )
  bar_1.data.push(rand(2,5));

//
// create a 2nd set of bars:
//
var bar_2 = new bar_glass( 55, '#5E83BF', '#424581' );
bar_2.key( '2007', 10 );

// make 10 bars of random heights
for(var i=0; i<10; i++ )
  bar_2.data.push(rand(-5,9));

//
// create the chart:
//
var g = new graph(600, 260);
g.title( 'Glass Bars', '{font-size:20px; color: #bcd6ff; '+
	'margin:10px; background-color: #5E83BF; padding: 5px 15px 5px 15px;}' );

// add both sets of bars:
g.data_sets.push(bar_1);
g.data_sets.push(bar_2);

// label the X axis (10 labels for 10 bars):
g.set_x_labels( [ 'January','February','March','April','May',
	'June','July','August','September','October' ] );

// colour the chart to make it pretty:
g.x_axis_colour( '#909090', '#D2D2FB' );
g.y_axis_colour( '#909090', '#D2D2FB' );

g.set_y_min( -5 );
g.set_y_max( 10 );
g.y_label_steps( 6 );
g.set_y_legend( 'Open Flash Chart', 12, '#736AFF' );
g.render('flashcontent5');

</script>

Gallery - Bar Chart Fade

We at Open flash Chart always strive to make things easy for ourselves. So the fade bar charts have exactly the same parameters as the bar method.

<script type="text/javascript">
var bar_red = new bar_fade( 55, '#C31812' );
bar_red.key( '2006', 10 );

for(var i=0; i<10; i++ )
  bar_red.data.push(rand(2,5));


var bar_blue = new bar_fade( 55, '#424581' );
bar_blue.key( '2007', 10 );

for(var i=0; i<10; i++ )
  bar_blue.data.push(rand(5,9));
  
var g = new graph(500, 260);
g.title( 'Fade Bars', '{font-size:20px; color: #bcd6ff; '+
	+'margin:10px; background-color: #5E83BF; padding: 5px 15px 5px 15px;}' );
g.bg_colour = '#FDFDFD';

g.data_sets.push(bar_red);
g.data_sets.push(bar_blue);

g.x_axis_colour( '#909090', '#D2D2FB' );
g.y_axis_colour( '#909090', '#D2D2FB' );

g.set_x_labels( ['January','February','March','April','May',
	'June','July','August','September','October' ] );
g.set_x_label_style( 11, '#000000', 2 );

g.set_y_max( 10 );
g.y_label_steps( 5 );
g.set_y_legend( 'Open Flash Chart', 12, '#736AFF' );

g.render('flashcontent6');

</script>

Gallery - Bar Chart Sketch

<script type="text/javascript">
var tmp_bar = new bar_sketch( 55, 6, '#d070ac', '#000000' );
tmp_bar.key( '2006', 10 );

for(var i=0; i<10; i++ )
  tmp_bar.data.push(rand(2,9));

var g = new graph(500, 260);
g.title( 'Sketch', '{font-size:20px; color: #ffffff; '+
	'margin:10px; background-color: #d070ac; padding: 5px 15px 5px 15px;}' );
g.bg_colour = '#FDFDFD';

//
// add the bar object to the graph
//
g.data_sets.push(tmp_bar);

g.x_axis_colour( '#e0e0e0', '#e0e0e0' );
g.set_x_tick_size( 9 );
g.y_axis_colour( '#e0e0e0', '#e0e0e0' );

g.set_x_labels( ['January','February','March','April','May',
	'June','July','August','September','October' ] );
g.set_x_label_style( 11, '#303030', 2 );
g.set_y_label_style( 11, '#303030', 2 );

g.set_y_max( 10 );
g.y_label_steps( 5 );
g.render('flashcontent7');
</script>

Gallery - Area

Area charts. These are almost identical to line charts.

<script type="text/javascript">
var data = [];
var labels = [];

for(var i=0; i<6.2; i+=0.2 ){
  var tmp = Math.sin(i) * 1.9;

  data.push(tmp);

  // just show to two decimal places
  // in our labels:
  labels.push(tmp.toFixed(2));
}


var g = new graph(500, 300);
g.title( 'Area Chart', '{font-size: 26px;}' );

g.set_data( data );

// width: 2px, dots: 3px, area alpha: 25% ...
g.area_hollow( 2, 3, 25, '#CC3399' );

g.set_x_labels( labels );
g.set_x_label_style( 10, '#9933CC', 2, 2 );
g.set_x_axis_steps( 2 );

g.set_y_min( -2 );
g.set_y_max( 2 );

g.y_label_steps( 4 );
g.set_y_legend( 'Open Flash Chart', 12, '#736AFF' );

g.render('flashcontent8');

</script>

Gallery - Area 2

<script type="text/javascript">

</script>

Gallery - Data

Add different data to the graph.

<script type="text/javascript">
var data = [];
var labels = [];

for(var i=0; i<16; i++ )
{
  data.push(i*i);
  labels.push(i);
}


var g = new graph(500, 300);
g.title( 'Area Chart 2', '{font-size: 26px;}' );

g.set_data( data );

//
// LOOK:
//
// width: 2px, dots: 3px, area alpha: 25% ...
g.area_hollow( 2, 3, 25, '#C11B01', 'Squared', 12, '#8E560F' );
//
//

g.set_x_labels( labels );
g.set_x_label_style( 10, '#000000', 0, 2 );
g.set_x_axis_steps( 2 );
g.set_x_legend( 'X squared', 12, '#C11B01' );

g.set_y_min( 0 );
g.set_y_max( 225 );

g.y_label_steps( 15 );
g.set_y_legend( 'Value', 12, '#C11B01' );

g.render('flashcontent9');

</script>

Gallery - Bar + Line Chart

Mix bars and lines on one chart.

<script type="text/javascript">
var data_1 = [];
var data_2 = [];
var data_3 = [];
for( var i=0; i<9; i++ )
{
  data_1.push(rand(2,5));
  data_2.push(rand(4,7));
  data_3.push(rand(5,9));
}

var g = new graph(500, 300);

g.title( 'Mixed Line and Bar Charts', '{font-size: 35px; color: #800000}' );

g.set_data( data_1 );
g.bar( 50, '#9933CC', 'Purple Bar', 10 );

g.set_data( data_2 );
g.bar( 50, '#339966', 'Green Bar', 10 );

g.set_data( data_3 );
g.line_dot( 3, 5, '#CC3399', 'Line', 10 );    // <-- 3px thick + dots

g.set_x_labels( [ 'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep' ] );
g.set_y_max( 10 );
g.y_label_steps( 2 );
g.set_y_legend( 'Your legend here!', 12, '#736AFF' );

g.render('flashcontent10');

</script>

Gallery - Pie Chart

<script type="text/javascript">
var data = [];
for(var i=0; i<5; i++ )
{
  data.push(rand(5,15));
}

var g = new graph(300, 300);

//
// PIE chart, 60% alpha
//
g.pie(60,'#505050','{font-size: 12px; color: #404040;');
//
// pass in two arrays, one of data, the other data labels
//
g.pie_values( data, ['IE','Firefox','Opera','Wii','Other'] );
//
// Colours for each slice, in this case some of the colours
// will be re-used (3 colurs for 5 slices means the last two
// slices will have colours colour[0] and colour[1]):
//
g.pie_slice_colours( ['#d01f3c','#356aa0','#C79810'] );

g.set_tool_tip( '#val#%' );

g.title( 'Pie Chart', '{font-size:18px; color: #d01f3c}' );

g.render('flashcontent11');

</script>

Gallery - Pie Chart Links

<script type="text/javascript">
var data = [];
var links = [];
for( var i=0; i<5; i++ )
{
    var val = rand(5,15);
    data.push(val);
    links.push("javascript:alert("+val+");");
}

var g = new graph(300, 300);

g.bg = '#E4F0DB';
g.pie(60,'#E4F0DB','{display:none;}',false,1);
//
// pass in two arrays, one of data, the other data labels
//
g.pie_values( data, ['IE','Firefox','Opera','Wii','Other','Slashdot'], links );
//
// Colours for each slice, in this case some of the colours
// will be re-used (3 colurs for 5 slices means the last two
// slices will have colours colour[0] and colour[1]):
//
g.pie_slice_colours( ['#d01f3c','#356aa0','#C79810'] );
g.set_tool_tip( 'Label: #x_label#<br>Value: #val#%&' );

g.title( 'Pie Chart', '{font-size:18px; color: #d01f3c}' );

g.render('flashcontent12');
</script>

Gallery - Scatter Chart

<script type="text/javascript">
var a = [];
var labels = [];

a.push(new point(-5,-5,10));
a.push(new point(0,0,5));
a.push(new point(0,1,15));
a.push(new point(0,-1,15));
a.push(new point(1,1,15));
a.push(new point(2,2,4));
a.push(new point(5,5,12));
a.push(new point(5,-5,9));
a.push(new point(-5,5,5));
a.push(new point(0.5,1,15));
//
// ----
//
var g = new graph(500, 300);
g.title( 'Scatter Chart', '{font-size: 26px;}' );

//
// LOOK:
//
g.scatter( a, 3, '#736AFF', 'My Dots', 12 );
//
//
g.set_tool_tip( 'x:#x_label#<br>y:#val#' );
//
//

g.set_x_offset( false );

g.set_y_label_style( 10, '#9933CC' );
g.y_label_steps(10);

g.set_x_label_style( 10, '#9933CC' );

g.set_x_legend( '����,�ѱ�' );

g.set_y_min( -5 );
g.set_y_max( 5 );
g.set_x_min( -5 );
g.set_x_max( 5 );

g.render('flashcontent13');
</script>

Gallery - Scatter Chart

<script type="text/javascript">
var a = [];
var b = [];
var c = [];

a.push(new point(-0.5,-0.5,5));
a.push(new point(0.5,0.5,5));
a.push(new point(0,0,5));

b.push(new point(-3,3,5));
b.push(new point(0,3,5));
b.push(new point(3,3,5));

var tmp = -4;
for(var i=-5; i<6; i++ )
{
    c.push(tmp);
    tmp += 0.2;
}
//
// ----
//
var g = new graph(500, 300);
g.title( 'Mixed Scatter and Line', '{font-size: 23px;}' );

//
// LOOK:
//
g.scatter( a, 3, '#736AFF', 'Dot A', 12 );
g.scatter( b, 3, '#6AFF73', 'Dot B', 12 );

g.set_data( c ); 
g.line_hollow( 2, 4, '0x80a033', 'Line', 10 );
//
//
g.set_tool_tip( 'x:#x_label#<br>y:#val#' );
//
//

g.set_x_offset( false );

g.set_y_label_style( 10, '#9933CC' );
g.y_label_steps(10);

g.set_x_label_style( 10, '#9933CC' );

g.set_x_legend( 'I is, like, mixin it up.' );

g.set_y_min( -5 );
g.set_y_max( 5 );
g.set_x_min( -5 );
g.set_x_max( 5 );

g.render('flashcontent14');

</script>

Gallery - High Low Close

<script type="text/javascript">
var a = [];
var labels = [];

a.push(new hlc(48,40,42));
labels.push('Mon');
a.push(new hlc(30,28,28));
labels.push('Tue');
a.push(new hlc(20,10,15));
labels.push('Wed');
a.push(new hlc(50,30,35));
labels.push('Thu');
a.push(new hlc(58,30,50));
labels.push('Fri');
a.push(new hlc(62,33,45));
labels.push('Sat');
a.push(new hlc(30,20,25));
labels.push('Sun');
//
// ----
//
var g = new graph(500, 300);
g.title( 'candle', '{font-size: 26px;}' );

//
// LOOK:
//
g.hlc( a, 60, 2, '#F50505', 'My Company', 12 );
//
//
g.set_tool_tip( '#x_label#<br>Close: #close#<br>High: #high#<br>Low: #low#' );
//
//

g.set_x_labels( labels );
g.set_x_label_style( 10, '#000000', 0, 1 );
g.set_x_legend( 'Week 1', 12, '#C11B01' );

g.set_y_min( 0 );
g.set_y_max( 70 );

g.y_label_steps( 10 );
g.set_y_legend( 'Value', 12, '#C11B01' );

g.render('flashcontent15');

</script>

Gallery - Candle

<script type="text/javascript">
var a = [];
var b = [];
var labels = [];

a.push(new candle(10,8,6,4));
b.push(new candle(10,8,6,4));
labels.push('Mon');
a.push(new candle(20,15,10,5));
b.push(new candle(20,10,15,5));
labels.push('Tue');
a.push(new candle(20,15,10,5));
b.push(new candle(28,24,18,16));
labels.push('Wed');
a.push(new candle(20,10,15,5));
b.push(new candle(10,6,9,4));
labels.push('Thu');
a.push(new candle(30,5,27,2));
b.push(new candle(5,4,2,1));
labels.push('Fri');

//
// ----
//
var g = new graph(500, 300);
g.title( 'candle', '{font-size: 26px;}' );

//g.set_data( data );

//
// LOOK:
//
g.candle( a, 60, 2, '#C11B01', 'My Company', 12 );
g.candle( b, 60, 2, '#B0C101', 'Your Company', 12 );
//
//
g.set_tool_tip( '#x_legend#<br>High: #high#<br>Open: #open#<br>Close: #close#<br>Low: #low#' );
//
//

g.set_x_labels( labels );
g.set_x_label_style( 10, '#000000', 0, 1 );
g.set_x_legend( 'Week 1', 12, '#C11B01' );

g.set_y_min( 0 );
g.set_y_max( 30 );

g.y_label_steps( 10 );
g.set_y_legend( 'Value', 12, '#C11B01' );


g.render('flashcontent16');
</script>

rainTails by Page