Causeway->Home->SVG Fills & Filters->3D Pies and Lines

3D Pies and Lines


Home
  About us
  Contact info
  Vector graphics
  SVG Fills & Filters
    Barcharts
    Surface fills
    3D Pies and Lines
Products
  Price list
  CSharp translator
  Dyalog
  APL2000
Support
  CUSP
  CausewayPro
  RainPro
  Newleaf
  Helpstuf
  Leafhtm
Tutorials
Demos
  Climate Charts
  VML graphics
  SVG examples
Free Stuff
  CSS Editor
Publications
  Seminars
  Articles
Causeway Graphical Systems
Adding 3D-effect to Piecharts and LineGraphs

View this example as SVG (Adobe viewer is best)

The filter to achieve the 3D effect is considerably more complex, and does begin to slow up the rendering a little - this takes nearly a second to appear on the screen! Here is the SVG which defines the lighting for the pie sectors:

<filter id="MyFilter"> <desc>3D lighting effect suitable for pies and lines</desc> <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur"/> <feOffset in="blur" dx="8" dy="8" result="offsetBlur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="30" style="lighting-color:White" result="specOut"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="litPaint"/> </feMerge> </filter>

I will be honest here - I cribbed this one directly from the SVG documentation and changed a few things until it looked right! It does a fantastic job on line-charts too:

View this example as SVG

The highlighting on the dash-pattern as it goes around the corners is quite remarkable! To get this one to work, we need one more new property in RainPro, as there is no way to apply a 'tile' to a line ...

ch.DefineEffect 97 '#MyFilter' 
© Orange,green lines, 2 weights, 2 styles, fancy pen for both
 ch.Set('Colour' '#F1AC05,#44CC00')('nib' 4 3)
    ('lines' 'Solid,dash')('Effect' 97)

Here we applied the effect to both lines, but it can be set as a vector, in which case it will rotate the settings in the same way as the colours, nibs and so on.

Summary

Hopefully, you now have all the tools you need to make that interest-rate chart at the top of this section of the site. These capabilities are available now in RainPro, GraPL and SharpPlot. APL2000 users can have fun with the APLDraw.OCX which allows our in-built chart viewer to show gradient fills and transparency.


Back to Top

Website maintained by adrian@causeway.co.uk
Telephone: +44 (0) 1439 788413