Degrafa Graph


By jack Herrington - Posted on 01 May 2008

Here is an example bouncy graph that I built using Degrafa. It was a pretty fun little experiment

The code for the Degrafa graph is shown below:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <dg:Surface xmlns:dg="com.degrafa.*" xmlns:geometry="com.degrafa.geometry.*" xmlns:paint="com.degrafa.paint.*"
  3. xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="updateData();">
  4. <mx:Script>
  5. <![CDATA[
  6. import mx.effects.Effect;
  7.  
  8. [Bindable]
  9. public var dataChangeEffect:Effect = null;
  10.  
  11. private var _data:Array = [];
  12.  
  13. private var _scale:Number = 1;
  14.  
  15. public function get scale() : Number {
  16. return _scale;
  17. }
  18.  
  19. public function set scale( newScale:Number ) : void {
  20. _scale = newScale;
  21. updateData();
  22. }
  23.  
  24. public function get data() : Array {
  25. return _data;
  26. }
  27.  
  28. public function set data( newData:Array ) : void {
  29. _data = newData;
  30. if ( initialized )
  31. updateData();
  32. if ( dataChangeEffect != null )
  33. dataChangeEffect.play([this]);
  34. }
  35.  
  36. private function updateData() : void {
  37. var min:Number = Number.MAX_VALUE
  38. var max:Number = Number.MIN_VALUE;
  39.  
  40. for each ( var dp1:Number in _data ) {
  41. min = Math.min( dp1, min );
  42. max = Math.max( dp1, max );
  43. }
  44.  
  45. var ybase:Number = min - ( ( max - min ) * 0.2 );
  46. var yrange:Number = ( max - min ) * 1.4;
  47. var yscale:Number = height / yrange;
  48. var xscale:Number = width / ( _data.length - 1 );
  49.  
  50. var points:Array = [];
  51. points.push( new Point( 0, height ) );
  52. var curx:Number = 0;
  53. for each ( var dp2:Number in _data ) {
  54. points.push( new Point( curx, height - ( ( ( dp2 - ybase ) * yscale ) * _scale ) ) );
  55. curx += xscale;
  56. }
  57. points.push( new Point( width, height ) );
  58. points.push( new Point( 0, height ) );
  59. chartPoly.points = points;
  60. }
  61. ]]>
  62. </mx:Script>
  63. <dg:fills>
  64. <paint:LinearGradientFill id="backfill" angle="90">
  65. <paint:GradientStop color="#000066" />
  66. <paint:GradientStop color="black" />
  67. </paint:LinearGradientFill>
  68. <paint:SolidFill id="solidblack" color="black" />
  69. </dg:fills>
  70. <dg:strokes>
  71. <paint:SolidStroke id="axis" color="#cccccc" weight="2" />
  72. <paint:SolidStroke id="chartstroke" color="#666666" weight="2" />
  73. </dg:strokes>
  74. <dg:graphicsData>
  75. <dg:GeometryGroup>
  76. <geometry:RegularRectangle width="400" height="300" fill="{solidblack}" />
  77. <geometry:Polygon id="chartPoly" fill="{backfill}" stroke="{chartstroke}" />
  78. <geometry:VerticalLine y="0" y1="{height}" stroke="{axis}" />
  79. <geometry:HorizontalLine y="{height}" x="0" x1="{width}" stroke="{axis}" />
  80. </dg:GeometryGroup>
  81. </dg:graphicsData>
  82. </dg:Surface>
Tags