The official Fatica Labs Blog! RSS 2.0
# Tuesday, May 17, 2011

This post dig a little more into this blog post code about working with and customizing Dynamic Data Display charting. Since the default bar chart implementation does not work, it’s easy to create our own by simply deriving one chart from PointGraphBase.


public class BarChart : PointsGraphBase

Then we define the classical bounch of dependencies properties which code is not so fancy to see: Thickness, Stroke and fill brush, and so on. The core function we must implement is OnRenderCore. Let’s see how:

protected override void OnRenderCore(System.Windows.Media.DrawingContext dc, RenderState state)
           if (DataSource == null) return;
           var transform = Plotter2D.Viewport.Transform;

           DataRect bounds = DataRect.Empty;
           using (IPointEnumerator enumerator = DataSource.GetEnumerator(GetContext()))
               Point point = new Point();
               while (enumerator.MoveNext())
                   enumerator.GetCurrent(ref point);

                   Point zero = new Point(point.X, 0);
                   Point screenPoint = point.DataToScreen(transform);
                   Point screenZero = zero.DataToScreen(transform);

                   double height = screenPoint.Y - screenZero.Y;

                   if (height >= 0)
                       dc.DrawRectangle(Fill, new Pen(Stroke, StrokeThickness)
, new Rect(screenPoint.X - BarWidth / 2, screenZero.Y, BarWidth, height));
                       dc.DrawRectangle(Fill, new Pen(Stroke, StrokeThickness), 
new Rect(screenPoint.X - BarWidth / 2, screenPoint.Y, BarWidth, -height));

                   bounds = DataRect.Union(bounds, point);

           Viewport2D.SetContentBounds(this, bounds);
So nothing really special, just some key point:
  • ApplyMapping is the function who map the model coordinates into the graphical X-Y coordinates.
  • DataToScreen/ScreenToData are the (extension) method who maps from world coordinates to screen coordinates.
The other code is just drawing the rectangles for each point at a certain bar width, and we obtain this:



As you can probably see, line are anti-aliased even if we specified SnapToDevicePixels. This is due to the fact that SnapToDevicePixels does not work when we manually draw onto a DrawingContext. If we want to remove this we need to follow these instructions and create some GudelineSet to force WPF align to physical bytes.

Tuesday, May 17, 2011 9:50:48 PM (GMT Daylight Time, UTC+01:00)  #    Comments [1] - Trackback
Charting | D3 | WPF
Tracked by:
"" ( [Pingback]

Monday, November 28, 2011 1:54:15 PM (GMT Standard Time, UTC+00:00)
Thank you very much for this helpful post. It was of great value for my work :-)
All comments require the approval of the site owner before being displayed.
Please login with either your OpenID above, or your details below.
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, b, strike, strong) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):

Live Comment Preview
My Stack Overflow

Send mail to the author(s) E-mail

profile for Felice Pollano at Stack Overflow, Q&A for professional and enthusiast programmers
About the author/Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2019
Felice Pollano
Sign In
Total Posts: 157
This Year: 0
This Month: 0
This Week: 0
Comments: 128
This blog visits
All Content © 2019, Felice Pollano
DasBlog theme 'Business' created by Christoph De Baene (delarou) and modified by Felice Pollano