VASmalltalk – MSKRaphaelExtension 0.4

I know that there is an additional graph library available to offer enhanced figures to be used within Raphael – but actually the usage seems to be not really intuitive and the documentation is very limited (from my limited point of view). Reading the forum about raphael seems to show, that lots of beginners seem to have problems with that additional library.

I corrected the Raphael library from Sebastian Heidbrik and published a new version of this library to vastgoodies.

In addition to this I published MSKRaphaelExtension to vastgoodies to have additional figures available. As a start I created a pie slice object, from which a pie chart can be build. My pie slices elements (the one I needed for my demo) have different values and different filling colors – other from that they all share the same attributes (stroke …).

| colorStringArray elements |
"we define different colors for each element"		
colorStringArray := OrderedCollection new.
colorStringArray
  add: ('#',(18 printStringRadix: 16 padTo: 2),
              (18 printStringRadix: 16 padTo: 2), 
              (18 printStringRadix: 16 padTo: 2));
  add: ('#',(215 printStringRadix: 16 padTo: 2),
              (31 printStringRadix: 16 padTo: 2),
              (31 printStringRadix: 16 padTo: 2));
  add: ('#',(120 printStringRadix: 16 padTo: 2),
              (188 printStringRadix: 16 padTo: 2),
              (27 printStringRadix: 16 padTo: 2));
  add: ('#',(244 printStringRadix: 16 padTo: 2),
              (169 printStringRadix: 16 padTo: 2),
              (0 printStringRadix: 16 padTo: 2));
  add: ('#',(190 printStringRadix: 16 padTo: 2),
              (49 printStringRadix: 16 padTo: 2),
              (118 printStringRadix: 16 padTo: 2)).

"helper method from the new class to get figure elements, which can be added
to the raphael view/canvas"
elements := MSKPieSliceElement
  fromValues: #( 34.6 34.5 12.1 6.7 5.6) 
  colors: colorStringArray 
  start: 0.0 
  end: 180.0 
  options: [ :eachMSKPieSliceElement |
    eachMSKPieSliceElement 
      innerRadius: 67 ;
      outerRadius: 134 ;
      strokeWidth: 2;
      stroke: 'white' ;
      center: 100@100 
  ]
elements do: [ :eachElement | xyz addFigure: eachElement ]

which returns elements suitable to produce the following picture

Now to show the effect of innerRadius two additional pictures with iR = 20 and iR = 0 we get additional pictures:

and

Now we are not very far away from a full circle presentation (by changing “end: 180.0″ to “end: 360.0″):

About these ads
This entry was posted in Smalltalk and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s