Charts in AVALON

Charts in AVALON

• BBushmaker

  It is definitely possible. WPF (Avalon) is a great platform for doing charts. There are no existing chart controls or documentation specific to creating chart controls that I know of yet.

  I would recommend reading in the SDK specifically reading about how to do databinding, data conversion, element binding.

  Here is the databinding overview in the SDK.

  http://windowssdk.msdn.microsoft.com/library/ url=/library/en-us/wpf_conceptual/html/c707c95f-7811-401d-956e-2fffd019a211.asp frame=true

  You could do a simple bar chart just by binding the height of a rectangle to a value in xml.

  It would look something like this:

  <Rectangle Height="{Binding Path=Price}" />. Thats good if the price range translates to something that would look good in your design. However you might want to do some manipulation of the value using a converter. Try this how to in the SDK:

  http://windowssdk.msdn.microsoft.com/library/ url=/library/en-us/wpf_conceptual/html/b00aaa19-c6df-4c3b-a9fd-88a0b488df2b.asp frame=true

  Pie charts would probably require some code.

  
  

• pshashnak1

  John, you can get to a couple lines by abstraction. If you package your chart code as a custom control, anyone downloading it from Sourceforge or GotDotNet and using it in their application should need fewer (a couple maybe ) lines of code.
  
  

• Tony Long

  I should have done this a lot sooner but I've been working really hard for the last 6 months on back-end stuff, but I've finally open sourced my chart control, and written a codeproject article about it. The codeproject article can be found here:

  http://www.codeproject.com/useritems/swordfishcharts.asp

  Note that the location of the article might change after the site editors review it. If so, then you should be able to find a link to it on this page:

  http://www.codeproject.com/script/articles/list_articles.asp userid=448391
  

  
  

• IanBlackburn

  Nate, John, thanks a lot for the information you have provided.

  I’m going to read it carefully.

  Recently I’ve finished to prototype a set of functionalities (HR functionalities) using Flex. We have changed the strategy in order to build the final product using Avalon. The question I posted regarding charts in Avalon is very important for us because the charts representation is one of the most important issues in the product. Our R&D department needs to build a set of ‘tools’ to allow more functional profiles and end users to extract information and have a representation in charts format. Using Flex that war covered because there are several standards components which allow you display charts using two lines of code. Anyway, I guess doing that in Avalon will not be much difficult taking into account the explanations and examples both of you have sent.

  Thanks again for your support.

  I hope be ready, in a short time, to give support in this forum and not only asking…

  
  
  

• ziad dodin

  John, that sounds really fine.

  If you are interested in knowing the components Flex has to build child, the faster and easier way is having a look at http://flexapps.macromedia.com/flex15/chartexplorer/explorer.mxml versionCheck\.

  If you are interested in more resources, please don't hesitate in contact me.

  In this Charting Component Explorer you will find (without any installation) how the standards charts look like and the mxml code needed to build them.

  I’ll look forward to reading your open code charts libraries.

  Thanks again for your post.

  
  
  

• iceberg777

  I've done a line chart.

  I've got a Canvas that I render to. In your Xaml file you might want to set up your canvas like this so that 0,0 is a the bottom left:

  <Canvas Margin="0,0,0,0" x:Name="chartCanvas" RenderTransformOrigin="0.5,0.5" Background="sc#1, 0.997322559, 1, 0.773969054">

  <Canvas.RenderTransform>

  <TransformGroup>

  <TranslateTransform X="0" Y="0"/>

  <ScaleTransform ScaleX="1" ScaleY="-1"/>

  <SkewTransform AngleX="0" AngleY="0"/>

  <RotateTransform Angle="0"/>

  <TranslateTransform X="0" Y="0"/>

  <TranslateTransform X="0" Y="0"/>

  </TransformGroup>

  </Canvas.RenderTransform>

  </Canvas>

  You need a PointCollection of points to draw a PolyLine like this:

  Polyline polyLine = new Polyline();

  polyLine.Stroke = new SolidColorBrush(Colors.Black);

  polyLine.Points = new PointCollection(points);

  chartCanvas.Children.Add(polyLine);

  With your Y axis line labels you can get the dimensions of the label like this:

  TextBlock text = new TextBlock();

  text.Text = yValue;

  text.LayoutTransform = new RotateTransform(-90);

  text.Measure(size);

  and the Text.DesiredSize will give you it's rendered size which you can use to calculate it's position so that it is centred nicely on the line.

  You add the text like this:

  text.SetValue(Canvas.LeftProperty, xPos);

  text.SetValue(Canvas.TopProperty, yPos - text.DesiredSize.Height*.5);

  textCanvas.Children.Add(text);

  You can even save your chart to a bitmap:

  RenderTargetBitmap rtb = new RenderTargetBitmap(canvas.ActualWidth, canvas.ActualHeight, 96d, 96d, PixelFormats.Default);

  rtb.Render(canvas);

  BmpBitmapEncoder encoder = new BmpBitmapEncoder();

  encoder.Frames.Add(BitmapFrame.Create(rtb));

  FileStream fs = File.Open(@"c:\test.bmp", FileMode.Create);

  encoder.Save(fs);

  fs.Close();

  
  

• Arne

  I will probably open source my charts library when I finish it by putting it on sourceforge because I like the CVS interface (would be nice if gotdotnet.com had a CVS interface). I will post a follow-up here when I do that.

  I should mention that my examples have a mixture of xaml and C#.

  2 lines of code to use a chart in Flex sounds pretty good. I would like to make my charts library that easy to use. What are those two lines

  
  
• Charts in AVALON