JuanC

Now that Blend 3 + Sketchflow RC has been released, we thought it would be a good idea to write a post on how to integrate charts into your prototype, some of the manual steps described here will be fixed in future Chart FX for WPF builds by providing design time assemblies for Blend 3. Once you have created a WPF Sketchflow Prototype application, you have to Add a reference to our assemblies In the projects tab add a reference to the PrototypeScreens project to ChartFX.WPF.dll Create a chart In the assets window, expand the Controls\All item and select Chart, note that because the WPF toolkit also includes a chart class you have to be careful of which one you select. Our icon is a blue and green pie. As soon as you drop a chart in your screen, you will quickly notice that the default chart look does not go well with the squiggly style used in Sketchflow. Luckily, we borrowed a great piece of code that Robby Ingebretsen wrote called HandDrawnShapes and extended it to create a style for our chart that looks as if it was hand drawn, to use this style you have to add a reference to ChartFX.WPF.Motifs.HandDrawn.dll (same way as our core assembly), then you need to add an extra namespace to the top-level UserControl tag in the XAML [color= red]xmlns:cfxhanddrawn[/color][color= blue]=[/color]"[color= blue]http://schemas.softwarefx.com/chartfx/wpf/80/ext/handdrawn[/color]" And set the Chart style property to use the handdrawn style [color= blue]<[/color][color= #a31515]cfx:Chart [/color][color= red]Style[/color][color= blue]=[/color]"[color= blue]{x:Static cfxhanddrawn:HandDrawn.Style}[/color]" [color= red]Margin[/color][color= blue]=[/color]"[color= blue]8,8,118,147[/color]"[color= blue]/>[/color] We got closer but clearly there is too much color, the font does not match and the outside chart border is not squiggly, although we could change properties in the chart to customize its appearance, we will get a more reusable result if we try to create a global style with these changes in the global resource dictionary so that all charts inherit these changes. To do this we will modify our app.xaml to create a style for charts that uses some of the handdrawn work but also integrates better with the sketch style used in your prototypes [color= blue]<[/color][color= #a31515]Style [/color][color= red]TargetType[/color][color= blue]=[/color]"[color= blue]{x:Type cfx:Chart}[/color]"[color= blue]> <[/color][color= #a31515]Setter [/color][color= red]Property[/color][color= blue]=[/color]"[color= blue]Template[/color]" [color= red]Value[/color][color= blue]=[/color]"[color= blue]{x:Static cfxmotifs:Simple.ChartTemplate}[/color]"[color= blue]/> <[/color][color= #a31515]Setter [/color][color= red]Property[/color][color= blue]=[/color]"[color= blue]GalleryTemplates[/color]" [color= red]Value[/color][color= blue]=[/color]"[color= blue]{x:Static cfxhanddrawn:HandDrawn.GalleryTemplates}[/color]"[color= blue]/> <[/color][color= #a31515]Setter [/color][color= red]Property[/color][color= blue]=[/color]"[color= blue]MarkerTemplates[/color]" [color= red]Value[/color][color= blue]=[/color]"[color= blue]{x:Static cfxhanddrawn:HandDrawn.MarkerTemplates}[/color]"[color= blue]/> <[/color][color= #a31515]Setter [/color][color= red]Property[/color][color= blue]=[/color]"[color= blue]MergeResources[/color]" [color= red]Value[/color][color= blue]=[/color]"[color= blue]{x:Static cfxhanddrawn:HandDrawn.MergeResources}[/color]"[color= blue]/> <[/color][color= #a31515]Setter [/color][color= red]Property[/color][color= blue]=[/color]"[color= blue]Border[/color]" [color= red]Value[/color][color= blue]=[/color]"[color= blue]{StaticResource BorderSketch}[/color]"[color= blue]/> <[/color][color= #a31515]Setter [/color][color= red]Property[/color][color= blue]=[/color]"[color= blue]Palette[/color]" [color= red]Value[/color][color= blue]=[/color]"[color= blue]{StaticResource SketchPalette}[/color]"[color= blue]/> <[/color][color= #a31515]Setter [/color][color= red]Property[/color][color= blue]=[/color]"[color= blue]FontFamily[/color]" [color= red]Value[/color][color= blue]=[/color]"[color= blue]{DynamicResource FontFamily-Sketch}[/color]"[color= blue]/> <[/color][color= #a31515]Setter [/color][color= red]Property[/color][color= blue]=[/color]"[color= blue]FontSize[/color]" [color= red]Value[/color][color= blue]=[/color]"[color= blue]{DynamicResource SizeDouble-Sketch}[/color]"[color= blue]/></[/color][color= #a31515]Style[/color][color= blue]>[/color] For the first four properties we are simply using static properties defined in our handdrawn and simple templates, note that we are cheating on MergeResources because this property was recently added to the HandDrawn class so you might have to download our most recent hotfix. For the next two properties (Border and Palette) we are creating local copies, the border will use Sketchflow objects so that its appearance matches more the other sketchflow elements, the palette is basically a color palette where all backgrounds are transparent and all foregrounds and borders match the color used in the prototypes. The last 2 properties (FontFamily and FontSize) will use dynamic resources defined in SketchStyles.xaml Although the final product certainly looks simple which is key to reinforce the fact that this is a prototype and not fixate on visual attributes, you have a fully fledged charting engine that you can later customize the fit the look of your WPF application. JuanC

We did add support for this before releasing, the property you want to use is an attached property in the StackPanePanel class called Proportion. In code it would be something like this StackPanePanel.SetProportion(pane1, 7); The value uses as proportion works similar to the start sizing in a WPF grid. We will add up all the proportion value for the panes (default is 1) and then use each pane's proportion to calculate the percent of space it should use. I apologize for the confusion. The feature is already supported. JuanC

Is this chart visible on your window/page when you export it? Can you send a small sample app that reproduces this problem? JuanC

Currently we do not support this functionality. We have been working on this so we should be able to upload a hotfix soon with support for this. Note that for panes to have different heights you will have to make sure they have different Y axes. Regards, JuanC

A multi pane chart normally has more than 1 series, you can decide on which pane each series is plotted and each series can have a different gallery. Note that not all galleries are mixable. If this does not help please post a bitmap of the chart you are trying to accomplish. JuanC

If you drop a chart from the toolbox, VS should add the following line to your licenses.licx file ChartFX.WPF.Chart, ChartFX.WPF, Version=8.0.NNNN.MMMM, Culture=neutral, PublicKeyToken=a1878e2052c08dce Also note that when you compile a project that has license info, your output window should look like this C:\Program Files\Microsoft SDKs\Windows\v6.0A\bin\LC.exe /target:ProjectName.exe ...C:\Windows\Microsoft.NET\Framework\v3.5\Csc.exe /noconfig ... Regards, JuanC

This is a simplified sample where we turn on the flag in the window/page constructor and turn it off when the window/page is unloaded <TabControl> <TabItem Header="Chart"> <cfx:Chart x:Name="chart1"/> </TabItem> <TabItem Header="Other"> <cfx:Chart x:Name="chart2" Gallery="Pie"/> </TabItem></TabControl>public TabPage (){ InitializeComponent(); chart1.AdvancedSettings |= ChartSettings.KeepVisualsOnUnload; chart2.AdvancedSettings |= ChartSettings.KeepVisualsOnUnload; this.Unloaded += new RoutedEventHandler(OnPageUnloaded);} void OnPageUnloaded (object sender, RoutedEventArgs e){ chart1.AdvancedSettings &= ~ChartSettings.KeepVisualsOnUnload; chart2.AdvancedSettings &= ~ChartSettings.KeepVisualsOnUnload;}In your case, you would want to turn off the flag when the tab is being closed removed for good, I would recommend you attach to the Chart's Unloaded event and add a breakpoint there as well as the line of code where you turn off the flag. If turning off the flag occurs before the last Unloaded event it means resources will be disposed properly. Regards, JuanC

Please note that hotfixes do not go through the same level of testing as service packs. Because of this you should only download a hotfix if you are experiencing a specific issue or need a new feature implemented in it. Also note that we use an ActiveX control that needs acces to modify your files so you must run IE as an administrator if you have UAC enabled in Vista or Windows 7. You can download our most recent hotfix here. Regards, JuanC

XBAPs are deployed using ClickOnce and default to run in a sandbox, because of this you might encounter certain problems when trying to use Chart FX for WPF in them. Running in full trust will take care of all the Chart FX related issues so if you already needed full trust in your application then integrating charts should not be an issue, please note that you should make sure not only that you can run the application in your local machine but also that it can be run from other machines. A full trust XBAP will run fine when deployed from the local zone but needs to be signed when deploying from the web. You can read more about this here and here. If running in full trust is not an option and you try to use our chart control you will receive a Security exception related to Reflection, we have fixed this issue in build 3467, unfortunately even if you use a newer build you will then receive another security exception when parsing our default XAML, the reason for this is that we use BitmapEffects in our some of our templates including Glass which is our default. Note that even though we expose a property called UseEffects that allow you to hide these effects, setting this property to false will not fix the exception as the effects are still in the XAML although they will be not be applied and just trying to load the XAML causes the exception. To overcome this problem you must change the references in your application to use the ChartFX.XBAP.* assemblies, these assemblies do not contain any bitmap effects so you can still use our default Glass style, because we use the same namespaces and type names, there is no need to change any code but you must also change the reference in licenses.licx To summarize if you are building WPF browser applications you must use ChartFX.XBAP build 3467 or later in order to work in low-trust using the Internet or Intranet zones. JuanC

Please make sure you use KeepVisualsOnUnload with caution as it might cause memory leaks, our recommendation would be to use it only if you can perceive/measure a performance difference. Note that build 3460 should have fixed the binding issue even if you do not use this flag. Regards, JuanC

If you are using Visual Studio 2010 Beta 1 and Chart FX for WPF to create your WPF applications you have probably found that you have no design time experience, i.e. if you click on the chart at design time you will not get our wizard. Unfortunately Beta 1 does not pickup the Design time assemblies we ship for Visual Studio 2008 because they reference older versions of the Microsoft.Windows.Design.* assemblies. We expect this will be fixed on future Visual Studio builds so that we can ship multiple design time dlls and each Visual Studio will load the appropriate version. In the meantime we have been building VS2010 compatible assemblies although they are not shipped with our installer, if you are using VS2010 and want to use our design time functionality you must do this Install our most recent hotfix Send an email to support at softwarefx dot com to request the VS2010 design time assemblies If you have a Design subdirectory underneath the folder where ChartFX was installed, rename this folder and copy all files to its parent directory Overwrite ChartFX.WPF.Design.dll and ChartFX.WPF.Design.VisualStudio.dll with the VS2010 compatible assemblies (keep a backup copy if you think you might want to switch back to VS 2008) If you are starting a new project you will not get our component in the toolbox or in the WPF tab in the Choose Items dialog, but you can browse for the ChartFX.WPF.dll assembly. Note that VisualStudio 2010 Beta 1 seems to ignore the ToolboxBrowsable attribute so it will suggest a bunch of classes that you will not need in your toolbox, make sure you uncheck all classes but Chart. JuanC

When a chart is Unloaded we clean up a lot of things to avoid leaks, one of those things was disconnecting from data change events and we were not properly connecting them back when the chart was reloaded (because the data is not reread). We have fixed this on any build marked 3457 or greater. If moving a chart from containers is a common occurrence in your app you might also want to consider turning on a flag called "KeepVisualsOnUnload" using the Chart.AdvancedSettings property. When this flag is on we will not do the cleanup as this flag is a hint that the chart will be reloaded shortly so it might improve your performance. Please note that in builds previous to 3457 we were disconnecting from collection events even if this flag was on so you still need to download an update even if you decide to use this flag. Also note that if you use this flag you must turn it off on the chart's parent Unloaded event to avoid memory leaks. One more thing, there is still an issue when the chart is Unloaded/Reloaded where binding will stop on a per-object level, i.e. when you pass a collection of objects that implement INotifyPropertyChange. We are working on a fix for this issue. Regards, JuanC

Please send the test app to wpf at softwarefx dot com and we will take a look at it. JuanC

Chart FX for WPF uses the title class in several places including Chart.Titles, Axis.Title, LegendBox.Titles and CustomGridLine.Title; in most of these scenarios there are cases where the title needs to be drawn vertically. For example the following XAML generates a chart with 4 titles each docked in a different position [color= blue]<[/color][color= #a31515]cfx[/color][color= blue]:[/color][color= #a31515]Chart.Titles[/color][color= blue]> <[/color][color= #a31515]cfx[/color][color= blue]:[/color][color= #a31515]Title [/color][color= red]DockPanel.Dock[/color][color= blue]="Top">[/color][color= #a31515]Top[/color][color= blue]</[/color][color= #a31515]cfx[/color][color= blue]:[/color][color= #a31515]Title[/color][color= blue]> <[/color][color= #a31515]cfx[/color][color= blue]:[/color][color= #a31515]Title [/color][color= red]DockPanel.Dock[/color][color= blue]="Left">[/color][color= #a31515]Left[/color][color= blue]</[/color][color= #a31515]cfx[/color][color= blue]:[/color][color= #a31515]Title[/color][color= blue]> <[/color][color= #a31515]cfx[/color][color= blue]:[/color][color= #a31515]Title [/color][color= red]DockPanel.Dock[/color][color= blue]="Right">[/color][color= #a31515]Right[/color][color= blue]</[/color][color= #a31515]cfx[/color][color= blue]:[/color][color= #a31515]Title[/color][color= blue]> <[/color][color= #a31515]cfx[/color][color= blue]:[/color][color= #a31515]Title [/color][color= red]DockPanel.Dock[/color][color= blue]="Bottom">[/color][color= #a31515]Bottom[/color][color= blue]</[/color][color= #a31515]cfx[/color][color= blue]:[/color][color= #a31515]Title[/color][color= blue]> </[/color][color= #a31515]cfx[/color][color= blue]:[/color][color= #a31515]Chart.Titles[/color][color= blue]>[/color] Which results in a chart like this Note that we rotate the titles on the right side 90 degrees clockwise while the title on the left side is rotated 90 degrees counterclockwise. You can control this using the RotateVerticalMode property, in the following picture we will set the left title RotateVerticalMode to None which might be suitable for short titles, you can also force a specific rotation by using Clockwise or CounterClockwise. We are using Counterclockwise for the right title. Can we use this feature to draw vertical titles where the letters are not rotated? I am glad you asked, setting the RotateVerticalMode to None is useful if we

Thank you for providing (offline) a sample app that duplicates this issue. Please download our current build that should fix this issue (issue was fixed on build 3453), it will also allow you to initialize the chart as zoomed (Mode="Zoomed") Regards, JuanC

Styling a WPF application so that it looks similar to Expression Blend seems to be a common scenario, you can even download a couple of open-source projects from Codeplex called

The licensing framework in .NET does not read the license from DLLs, only from executables. In your case you have to make sure Project1 (your application) contains the Chart FX license info. One way of doing this would be to create a dummy Window in Project1 (this window does not have to be shown) where you drop a chart. This will force VS to setup licenses.licx in Project1. Alternatively you can do it manually by adding a licenses.licx file with Chart FX info (and any other licensed component you might be using) and making sure the build options are similar to Project2. Note that is not really that you need to reference ChartFX.WPF in Project1, all you need is for the license info to be embedded in it. The path of least resistance is just to drop a chart but you could manually setup the license without the reference. Again note that the license in Project2 will never be used. JuanC

Chart FX for WPF uses the built-in licensing support in .NET, this means the following - At design time, when you drop a chart using the toolbox, VS will add a line into licenses.licx that references our assembly - When building, VS will embed a license string into your executable as a resource - At runtime we invoke LicenseManager.Validate in our constructor which will give us access to the embedded string - Unfortunately .NET needs reflection permission to get this resource, you can verify this by creating a dummy XBAP, add a chart and leave the default Internet zone. It results in the following exception System.Windows.Markup.XamlParseException: Cannot create instance of 'Chart' defined in assembly 'ChartFX.WPF, Version=8.0.3150.0, Culture=neutral, PublicKeyToken=a1878e2052c08dce'. The type of the first permission that failed was: System.Security.Permissions.ReflectionPermission at System.RuntimeTypeHandle.CreateInstance(RuntimeType type, Boolean publicOnly, Boolean noCheck, Boolean& canBeCached, RuntimeMethodHandle& ctor, Boolean& bNeedSecurityCheck) at System.RuntimeType.CreateInstanceSlow(Boolean publicOnly, Boolean fillCache) at System.RuntimeType.CreateInstanceImpl(Boolean publicOnly, Boolean skipVisibilityChecks, Boolean fillCache) at System.Activator.CreateInstance(Type type, Boolean nonPublic) at System.RuntimeType.CreateInstanceImpl(BindingFlags bindingAttr, Binder binder, Object[] args, CultureInfo culture, Object[] activationAttributes) at System.Activator.CreateInstance(Type type, BindingFlags bindingAttr, Binder binder, Object[] args, CultureInfo culture, Object[] activationAttributes) at System.Activator.CreateInstance(Type type, Object[] args) at System.SecurityUtils.SecureCreateInstance(Type type, Object[] args) at System.ComponentModel.LicenseManager.ValidateInternalRecursive(LicenseContext context, Type type, Object instance, Boolean allowExceptions, License& license, String& licenseKey) at System.ComponentModel.LicenseManager.ValidateInternal(Type type, Object instance, Boolean allowExceptions, License& license) at System.ComponentModel.LicenseManager.Validate(Type type, Object instance) at ChartFX.WPF.Chart.Init() at ChartFX.WPF.Chart..ctor() You have a couple of options 1) Setting your app to run with FullTrust or create a Custom zone where you add Reflection to the permissions in the Internet zone (FileDialog, IsolatedStorage, Security, UI, Media and WebBrowser) 2) If this is not possible you can contact us and we can provide a license string you can use with the static Chart.SetLicenseString method. If you are already using method 2, you might need to contact us again for an updated license string, as the one you are using might have an expiration period. If you were developing a full trust app (method 1) that used to work, it might be that VS is using a cached license resource, try copying the contents of licenses.licx to a separate file, compile your app, then repaste the string and recompile again. Creating a brand new full trust XBAP might help us know if in fact you are experiencing a problems with VS caching the old license. Regards, JuanC

I tested your code "as is" and it worked for me. Please note that if you use AttachWidth or AttachHeight, the dimensions of these properties are expressed in axis units, if your Y axis goes from 0 to 1 million and you use AttachHeight 2, we will ask the axis to translate 2 into pixels and that might result in a very very small rectangle. When I tested your code (using AttachWidth and AttachHeight) on a chart with 12 points and a Y axis from 0 to 100, I can see the red rectangle. Note that the same applies to AttachX and AttachY, they will be converted from axis units to pixels. Regards, JuanC

Send a repro app to wpf at softwarefx dot com and reference this thread Regards, JuanC

Note that you did NOT use the servicepack but instead you downloaded a hotfix. - Service Packs are not released often and go through more testing. - HotFixes allow you to download our most recent bits, as soon as fix an issue we might push a new hotfix. If you want/need a specific hotfix and have multiple machines to upgrade, you can press the "Download Button", this should download an exe that you can then run on as many computers as needed. Additionally, in WPF all we update are the ChartFX.WPF.*.dlls in the Bin and Bin\Design folder. You can safely copy all these file from your dev machine to your build machine. Regards, JuanC

The reason why DateTime.Ticks does not work is the same as why the following also does not work public double X2{ get { return this.DateTime.ToFileTime(); }} public double X3{ get { return this.DateTime.ToOADate(); }} In all these 3 cases you are using arbitrary functions/properties that translate between a datetime and a number and it would be impossible for us to know which one you are using. Because of this it makes more sense for us to handle dates (DateTime). JuanC

We have been working on supporting XamlWriter/XamlReader as a serialization method, most of this code is also used when VS/Blend save to XAML so we have been doing it on a separate branch. You are probably already aware of this, but there are some limitations involved in serializing to XAML 1) Your data should be serializable, this means you need empty constructors, setters for your properties, etc. Note that sometimes if you have deep graphs serializing your data as XAML might get long. A quick way to test this would be to create a listbox passing the same data you are passing to the chart and using XamlWriter/XamlReader to persist into a new listbox 2) XamlWriter does not retain markup extensions so Bindings are lost. This can be quickly tested by repeating the same listbox experiment but setting ListBox.ItemTemplate with a DataTemplate that contains a binding. e.g. <DataTemplate><TextBlock Text="{Binding Path=FirstName}"/></DataTemplate> This is documented officially here and also on this blog. 3) XamlWriter will not recreate static references (same reason as before), because of this if you use ChartFX.WPF.Motifs.Basic.Style as the chart's style this will result in - The XAML will be pretty big, some of our styles include resource dictionaries that control how are galleries are painted (both 2D and 3D) as well as several control templates and data templates, all of this will be dumped in your XAML. - If you are using this XAML as a persistent method of serialization (e.g. you are saving this in a database) you will be saving a snapshow of what our style looked at the time you save it, if we fix issues in our style those changes will not be used when recreating a chart from the XAML. Sometimes this might be a good thing but some others it will not. We are considering adding a flag to the chart so that a runtime we can ignore the properties that cause the XAML to grow too big and the same time keep these statics as references instead of copies. Your feedback on this would be appreciated. Please drop a message to wpf at softwarefx dot com referencing this thread and we will provide a set of bits where we try to support XamlWriter, we have tested some charts but certainly not all properties or combination of properties so some of our more complex settings might not get saved. Also please let us know if this affects the ChartFX behavior inside VS or Blend. Regards, JuanC

The purpose of DataUnit.DoubleToDate is not to convert from Ticks to Dates but to be an opposite function to DataUnit.DateToDouble. Internally our code uses doubles so when we see a date we call DateToDouble. If you try to assign a value we've processed to a double you might need DoubleToDate. Note that most of our API returns a DataUnit (e.g. Axis.Min, Axis.Max, etc.) and we provide automatic casts between DateTime and doubles so you should not need the DataUnit static functions often. When we made this change we actually started using Ticks but because of their resolution it causes loss of precision on certain dates so internally we now divide Ticks by 10000, this still gives us millisecond accuracy without the loss of precision. Obviously this is an implementation detail that you should not code against. We'd rather leave our API agnostic of how dates are internally converted so I wonder if you can bind to the DateTime property instead of X. Regards, JuanC

If you are passing data to the chart using Chart.ItemsSource but need to pass labels manually then you will have to bind to Text because DataItem will point to your CLR object. We should have a new hotfix including support for this in a couple of days. Regards, JuanC