Open Flash Chart And Perl

Open Flash Chart and Perl

Open Flash Chart and Perl - YAPC::EU August 2008 - Copenhagen

Open Flash Chart and PerlYAPC::EU 2008

Josh McAdams

Why chart data?


Why chart data?


Charting Options in Perl


• GD::Graph• Chart• Google::Chart• SWF::Chart• Chart::OFC• ... and many more I’m sure

Open Flash Chart Samples


Lifecycle of a Chart Request


Adding a Chart to a Page


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="450" height="300" id="graph-2" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie"

value="open-flash-chart.swf?width=450&height=300&data=data.txt" /><param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" /><embed src="open-flash-chart.swf?width=450&height=300&data=data.txt"

quality="high" bgcolor="#FFFFFF" width="450" height="300" name="open-flash-chart" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0

http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0

http://www.macromedia.com/go/getflashplayer

http://www.macromedia.com/go/getflashplayer

Data File Format


&title=World Population,{ font-size: 25px }&&pie=80,#000000,{font-size: 12px; color: #404040;}&&pie_labels=China,India,US,Indonesia,Other&&colours=#FF0000,#0000FF,#00FF00,#FFFF00,#FFA500,#A020F0,#000000&&values=1325507000,1136665600,304858000,231627000,3904195400&

Creating Chart Data With Perl


Chart::OFC::Pie->new( title => 'World Population', dataset => Chart::OFC::Dataset->new(

values => [ 1_325_507_000, 1_136_665_600, 304_858_000, 231_627_000, 3_904_195_400

] ),

label_style => 'font-size: 12px; color: #404040;', labels =>

[qw( China India US Indonesia Other)],)->as_ofc_data();

Chart::OFC Object Model






Example Charts on OFC Site


•Data Lines•Bar Chart•Bar Chart 2•3D Bar Chart•Glass Bar Chart•Fade Bar Chart•Sketch Bars•Area Chart•Area Chart - 2•Bars + Lines•Pie Chart•Pie Chart Links•Scatter Chart•Mixed Scatter•High Low Close•Candle

Example - Data Lines




6 my ( @data1, @data2, @data3 ); 7 8 for ( 1 .. 12 ) { 9 push @data3, 1 + int( rand(7) ); 10 push @data2, 8 + int( rand(6) ); 11 push @data1, 14 + int( rand(6) ); 12 }



14 my $chart = Chart::OFC::Grid->new( 15 title => 'Many data lines', 16 title_style =>

'{font-size: 20px; color: #736AFF}', 17 datasets => [



14 my $chart = Chart::OFC::Grid->new( 15 title => 'Many data lines', 16 title_style =>

'{font-size: 20px; color: #736AFF}', 17 datasets => [





18 Chart::OFC::Dataset::Line->new( 19 values => \@data1, 20 width => 2, 21 color => '#9933CC', 22 label => 'Page Views', 23 text_size => 10, 24 ),





25 Chart::OFC::Dataset::LineWithDots->new( 26 values => \@data2, 27 solid_dots => 1, 28 width => 3, 29 color => '#CC3399', 30 label => 'Downloads', 31 text_size => 10, 32 dot_size => 5, 33 ),





34 Chart::OFC::Dataset::LineWithDots->new( 35 values => \@data3, 36 solid_dots => 0, 37 width => 2, 38 color => '#80a033', 39 label => 'Bounces', 40 text_size => 10, 41 dot_size => 4, 42 ), 43 ],





44 x_axis => Chart::OFC::XAxis->new( 45 labels => [ 46 qw(January February March 47 April May June 48 July August September 49 October November December) 50 ], 51 axis_label => '', 52 orientation => 'horizontal', 53 label_steps => 2, 54 ),





55 y_axis => Chart::OFC::YAxis->new( 56 axis_label => Chart::OFC::AxisLabel->new( 57 label => 'Open Flash Chart', 58 text_size => 12, 59 text_color => '#736AFF', 60 ), 61 min => 0, 62 max => 20, 63 label_steps => 5, 64 ),



Example - Bar Chart


Example - Bar Chart


6 my $chart = Chart::OFC::Grid->new( 7 title => 'Bar Chart', 8 title_style => '{font-size: 20px;}',

Example - Bar Chart


Example - Bar Chart


9 datasets => [ 10 Chart::OFC::Dataset::OutlinedBar->new( 11 label => 'Page Views', 12 fill_color => '#9933CC', 13 outline_color => '#8010A0', 14 opacity => 50, 15 values =>

[ map { 5 + int( rand(4) ) } ( 1 .. 9 ) ], 16 ) 17 ],

Example - Bar Chart


Example - Bar Chart


18 x_axis => Chart::OFC::XAxis->new( 19 labels => [ 20 qw(January February March 21 April May June 22 July August Spetember) 23 ], 24 axis_label => '', 25 orientation => 'horizontal', 26 label_steps => 2, 27 text_color => '#9933CC', 28 ), 29 y_axis => Chart::OFC::YAxis->new( 30 axis_label => Chart::OFC::AxisLabel->new( 31 label => 'Open Flash Chart', 32 text_size => 12, 33 text_color => '#736AFF', 34 ), 35 min => 0, 36 max => 10, 37 label_steps => 2, 38 ),

Example - Bar Chart


Example - Bar Chart Two




9 datasets => [ 10 Chart::OFC::Dataset::Bar->new( 11 label => 'Me', 12 fill_color => '#0066CC', 13 opacity => 50, 14 text_size => 10, 15 values => [ map { 2 + int( rand(3) ) } ( 1 .. 9 ) ], 16 ), 17 Chart::OFC::Dataset::Bar->new( 18 label => 'You', 19 fill_color => '#9933CC', 20 opacity => 50, 21 text_size => 10, 22 values => [ map { 5 + int( rand(4) ) } ( 1 .. 9 ) ], 23 ), 24 Chart::OFC::Dataset::Bar->new( 25 label => 'Them', 26 fill_color => '#639F45', 27 opacity => 50, 28 text_size => 10, 29 values => [ map { 2 + int( rand(7) ) } ( 1 .. 9 ) ], 30 ), 31 ],



Example - 3D Bar Chart




10 datasets => [ 11 Chart::OFC::Dataset::3DBar->new( 12 label => 2006, 13 fill_color => '#D54C78', 14 values => [ map { 2 + int( rand(4) ) } ( 1 .. 10 ) ], 15 ), 16 Chart::OFC::Dataset::3DBar->new( 17 label => 2007, 18 fill_color => '#3334AD', 19 values => [ map { 5 + int( rand(5) ) } ( 1 .. 10 ) ], 20 ), 21 ],





22 x_axis => Chart::OFC::XAxis->new( 23 labels => [ 24 qw(January February March 25 April May June 26 July August Spetember 27 October) 28 ], 29 axis_label => '', 30 orientation => 'horizontal', 31 label_steps => 2, 32 text_color => '#000000', 33 three_d_height => 12, 34 axis_color => '#909090', 35 grid_color => '#ADB5C7', 36 ),



Example - Glass Bar Chart




11 Chart::OFC::Dataset::GlassBar->new( 12 opacity => 55, 13 label => 2006, 14 fill_color => '#D54C78', 15 outline_color => '#C31812', 16 values =>

[ map { 2 + int( rand(4) ) } ( 1 .. 10 ) ], 17 ),



Example - Fade Bar Chart




12 Chart::OFC::Dataset::FadeBar->new( 13 opacity => 55, 14 label => 2006, 15 fill_color => '#C31812', 16 values => [ map { 2 + int( rand(4) ) } ( 1 .. 10 ) ], 17 ), 18 Chart::OFC::Dataset::FadeBar->new( 19 opacity => 55, 20 label => 2007, 21 fill_color => '#424581', 22 values => [ map { 5 + int( rand(5) ) } ( 1 .. 10 ) ], 23 ), 24 ],



Example - Sketch Bar Chart




12 datasets => [ 13 Chart::OFC::Dataset::SketchBar->new( 14 opacity => 55, 15 label => 2006, 16 fill_color => '#D070AC', 17 outline_color => '#000000', 18 randomness => 6, 19 values =>

[ map { 2 + int( rand(8) ) } ( 1 .. 10 ) ], 20 ), 21 ],



Example - Area Chart




7 my ( @data, @labels ); 8 for ( my $i = 0 ; $i < 6.2 ; $i += 0.2 ) { 9 my $val = sin($i) * 1.9; 10 push @data, $val; 11 push @labels, sprintf( "%.2f", $val ); 12 }



17 datasets => [ 18 Chart::OFC::Dataset::Area->new( 19 opacity => 25, 20 fill_color => '#CC3399', 21 color => '#CC3399', 22 dot_size => 3, 23 width => 2, 24 values => \@data, 25 ), 26 ],



Example - Area Chart Two


Example - Bar and Line Chart




9 datasets => [ 10 Chart::OFC::Dataset::Bar->new( 11 label => 'Purple Bar', 12 fill_color => '#9933CC', 13 opacity => 50, 14 text_size => 10, 15 values =>

[ map { 2 + int( rand(4) ) } ( 1 .. 9 ) ], 16 ),



17 Chart::OFC::Dataset::Bar->new( 18 label => 'Green Bar', 19 fill_color => '#339966', 20 opacity => 50, 21 text_size => 10, 22 values =>

[ map { 4 + int( rand(4) ) } ( 1 .. 9 ) ], 23 ),



24 Chart::OFC::Dataset::LineWithDots->new( 25 width => 3, 26 dot_size => 5, 27 color => '#CC3399', 28 label => 'Line', 29 text_size => 10, 30 solid_dots => 1, 31 values =>

[ map { 5 + int( rand(5) ) } ( 1 .. 9 ) ], 32 ), 33 ],



Example - Pie Chart


Example - Pie Chart


6 print Chart::OFC::Pie->new( 7 opacity => 60, 8 line_color => '#505050', 9 title => 'Pie Chart', 10 title_style => 'font-size:18px; color: #d01f3c;', 11 label_style => 'font-size: 12px; color: #404040;', 12 dataset => Chart::OFC::Dataset->new( 13 values => [ map { 5 + int( rand(11) ) } ( 1 .. 5 ) ], 14 ), 15 labels => [qw( IE Firefox Opera Wii Other)], 16 slice_colors => [ '#d01f3c', '#356aa0', '#C79810' ], 17 tool_tip => '#val#%25', 18 )->as_ofc_data();

Example - Pie Chart


Example - Pie Chart With Links




6 my $values = [ map { 5 + int( rand(11) ) } ( 1 .. 5 ) ]; 7 my $links = [ map { "javascript:alert('$_')" } @$values ]; 8 9 print Chart::OFC::Pie->new( 10 bg_color => '#E4F0DB', 11 opacity => 60, 12 line_color => '#E4F0DB', 13 label_style => 'display:none;', 14 title => 'Pie Chart', 15 title_style => 'font-size:18px; color: #d01f3c;', 16 dataset =>

Chart::OFC::Dataset->new( values => $values, links => $links ), 17 labels => [qw( IE Firefox Opera Wii Other)], 18 slice_colors => [ '#d01f3c', '#356aa0', '#C79810' ], 19 tool_tip => 'Label: #x_label#<br>Value: #val#%&', 20 )->as_ofc_data();



Example - Scatter Chart


Example - Scatter Chart


X

Example - Mixed Scatter Chart


Example - Mixed Scatter Chart


X

Example - High Low Close Chart


Example - High Low Close Chart


X

Example - Candle Chart


Example - Candle Chart


X

Things That Suck About OFC::Chart


• Not all of OFC• Documentation• Some bugs

Things That Rock About OFC::Chart


• Easy Coding• Easy to Read Code• Pretty Charts by Default

Things To Expect Soon In OFC::Chart


• A bug fix release• Support for OFC2

Technology

Open Flash Chart And Perl