HI There, I have these general questions about the Charting:

1)How efficient will it be if we have 1000 lines and each line has about 100 points in one graph (30 seconds or 30 minutes)?

2)How about put 10 graph in one page?

3) Is the marker on the points changable? I mean different marker for each point in the same series, is it possible?

4) Is the points on the chart detectable by the WPF window and Mouse Pointer? I.e. if the mouse click on a point, can we get the value from that point?

5) How about the legend? Is flexible to hide or show individual lines and legends in the same chart?

6) Plot title customizable? And Axis Title? IS logarithm scale available for any log base? i.e. log 2, log e and log 3 or log 10?

7) How about tooltips for each line/bar/points?

8) Zooming in the graph?

9) Printing chart available?

10)Saving images in different format, like, jpg, png and emf(emf is best suite for us though, since it will not changing, when the scale is changed)?

11)Can we just draw some points but not connected by the lines?

12)Can we set the different color for different points in the graph on the chart?

13)For the bar or column graph can we set the different color for each bar or column in a chart? and also write some values on top of bar?

14)How about date on axis and string value on the axis (i.e the plot on fruit product quantities, apples, oranges and grapes)?

15) Can we plot datetime axis with interval like Year, Month, Week, Day?

16)Do you have box plot?

17) How about the licensing, do you need royal fee when we distribute our software?

18) If we use your software, Do you own our source code?

We are evaluating the software, the answers in these questions will affect our buying decision. Thanks Gordon

Hello Gordon

1) A single series can handle millions of data points with good performance. But a thousand different line series runs rather slow. I'd recommend providing some way to only display a subset of these charts at one time, we don't do this automatically. On my machiene, 1000 line series each with 100 points took a little less than 1 minute to load. The zooming was a bit slow, but not unresponsive.

2) 10 graphs on a single page is fine. 1000 series with 100 points each on all 10 charts will be a bit overkill though. You could have several series on each chart with at least a thousand points on them. There will be some lag with loading and resizing the window if there are too many series and points on each chart. I recommend trying this out to see how much a single page can handle.

3) There isn't a built in feature for having different markers on the same series. But you could achieve this effect by implementing a custom data point model object that has some kind of indication of what marker it should use. Then the symbol style could use a selector or converter to select which marker shape to use.

4) Yes points on the chart are detectable. You can set various selection modes on the chart series to allow points to be selected when clicked on by the mouse. Then you can look at the SelectedDataPoint property on the series to get the X and Y logical values as well as the data context which is the original data object for that point.

5) At the moment all series in the chart will be displayed in the legend. I can add a property to hide the legend item for particular series though.

6) All titles can be set. You can set the Title property of the whole chart. The Title property of individual series - this shows up in the legend. And also the Title property on ChartAxis. Yes, any log scale is available. You create an instance of the LogarithimicAxisValueConverter and set the Base property. This axis value converter instance can be used to set the ValueConverter property of the appropriate axis.

7) Yes you can add tool tips to lines, points and bars by creating a custom style and setting their tooltip property.

8) Yes, the charts have built in zooming and panning support. You need to set the ZoomMode property of the Chart control to something like ZoomMode.Both. The user can zoom using the mouse wheel or dragging the mouse to create a zoom box. Pressing the Home key will zoom back to 100%. Holding Ctrl and dragging the mouse will pan the chart if it has been zoomed. Other zoom modes can be used to limit the user to only zooming vertically or horizontally. You can also zoom programatically by setting the ActualMinimum and ActualMaximum properties of the axes.

9) We do not have a chart printer because it can be rather application specific. But like any WPF control or visual, it doesn't take to much code to write you're own printing logic. I can give you some sample code if you need it.

10) We currently don't have export-to-image helpers but this is something we can add. It is also possible to write code that creates an image from a chart control - or any other WPF Visual.

11) For this there are 2 options. You could use a ScatterSeries which is like a line series without the line - only the markers. Or you could set the LineStyle property of a LineSeries to be a custom style that sets the Visibility or Opacity or Stroke or StrokeThickness properties of the line path to make it dissapear. I recommend the second option because LineSeries have better performance optimizations compared to ScatterSeries.

12) At the moment we do not have this feature, but like your 3rd question you can achieve this effect. This feature is something that we will probably add at some stage.

13) Yes this is possible. Unlike other series, BarSeries already has support for using a different color for different bars/columns. You can set the Brushes property of the series to be a collection of brushes. Each brush will be used in turn when rendering each bar.

14) Yes DateTimes and strings are supported as axis values. For strings and other objects, they will each get their own slot on the axis. So the first string represents 0 on the axis. The next unique string is 1 on the axis and so on. For DateTimes the same approach can be used. This is fine if all the date times have the same difference in time between them. If the dates do not have the same differences between them, then you can use something like the DateTimeAxisValueConverter so the dates can be placed correctly along the axis. For example if the second point is three days after the first point, but then the third point is 8 days after the second point, the DateTimeAxisValueConverter will make sure there is a proportionately larger distance between the second and third point compared to the first and second point. This value converter is used in the same way as a logarithmic value converter I mentioned before. To plot these kinds of data, we have provided classes such as StringDouble and DateTimeDouble. A single instance of these can represent a single point on the chart. You can set the ItemsSource of the series to be a collection of these objects. Simply set the String and Double property to be the values you want to plot. The series will recognize these data objects and know how to interpret them to plot them on the chart. Alternativly, if you already have custom classes for your data points, or if you plan to implement them yourself, you can set the XBinding and YBinding properties on the series so they know which properties of your custom objects to use on which axes.

15) Yes, you can have any intervals between the data points.

16) Some people say box-plot is another name for box-and-whisker-chart, other people say it is a type of stock chart that plots open-high-low-close values. We have the stock chart (we called it CandlestickSeries), but we do not have box-and-whisker charts yet.

17) WPF Elements has NO royal fee.

18) No, we do not own your source code if you use WPF Elements in your product.

Note that a couple of the features I have mentioned here were added in the nightly builds a while ago. Make sure to install the latest nightly build which can be downloaded from here: http://www.mindscapehq.com/products/wpfelements/nightly-builds

Try out these things that I have mentioned and look through the sample code for some helpful examples. Please let me know if you have any more questions about WPF charts.

-Jason

Thanks Jason. Is #5), "set lengend for individual series" to hide in the Mar 8's Build? I still cannot find the property you mentioned.

13) The BarSeries's Brushes is a readonly property, in other words, we cannot bind it in XAML. We can accomplish it by subclass of the BarSeries, not a big deal

9) can you provide some sample code for us?

10)Save image is kind important for us though. If you can provide some sample code it would be great.

Do you have sample code for DataGrid Grouping? Gordon

Hello Gordon

5) This property was not in the Mar 8th build, I have added this now and it will be available in the next nightly build (availble at around 1200GMT - about 13 hours from when I wrote this). All data series will have an IsShownInLegend boolean property. Setting this to false will mean the series does not get displayed in the legend.

13) Making this property bindable is on our list of things to improve in a future version.

9) The following code can be used to print a Chart control (or any other WPF visual). Rather than actually printing the chart, this code will create and save an xps document onto your desktop, and then open the document using internet explorer. This is a good way for testing that the document is being built correctly. The code below the second comment can be replaced with code that actually prints the document using an XpsDocumentWriter. The code here is very basic - it scales the chart to fit within a particular size, and uses 10 pixel padding around the chart. You may want to consider spreading large charts over multiple pages, and also revising the page size that I have used here. You can play around with this code to scale and position the chart on a page however you like, and also add other visual elements to the page based on the requirements of your application. The code I have given here is in the form of an event handler in code-behind for clicking on a button. "Chart" is the Chart control to be printed. I am accessing it from xaml using its name.

private void Print_XPS_Click(object sender, RoutedEventArgs e)
{
  string path = System.IO.Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.DesktopDirectory), "chart.xps");

  Size pageSize = new Size(420, 320);
  Point printableOrigin = new Point(10, 10);
  Size printableSize = new Size(400, 300);

  FixedDocument document = new FixedDocument();

  FixedPage page = new FixedPage();
  page.Width = pageSize.Width;
  page.Height = pageSize.Height;

  // Create a visual brush that copies the visual of the chart so we can add it to a print document.
  VisualBrush chartBrush = new VisualBrush(Chart) { Stretch = Stretch.Uniform };
  chartBrush.ViewboxUnits = BrushMappingMode.Absolute;
  chartBrush.Viewbox = new Rect(0, 0, Chart.ActualWidth, Chart.ActualHeight);

  Rectangle diagramPrintTile = new Rectangle { Width = printableSize.Width, Height = printableSize.Height, Fill = chartBrush };
  FixedPage.SetLeft(diagramPrintTile, printableOrigin.X);
  FixedPage.SetTop(diagramPrintTile, printableOrigin.Y);
  page.Children.Add(diagramPrintTile);

  PageContent pageContent = new PageContent();
  ((IAddChild)pageContent).AddChild(page);
  document.Pages.Add(pageContent);

  // Print the document using and Xps document writer
  Package package = Package.Open(path, System.IO.FileMode.Create, FileAccess.ReadWrite);
  XpsDocument xpsDocument = new XpsDocument(package);
  XpsDocumentWriter writer = XpsDocument.CreateXpsDocumentWriter(xpsDocument);
  writer.Write(document);
  package.Close();

  package = Package.Open(path, System.IO.FileMode.Create, FileAccess.ReadWrite);
  xpsDocument = new XpsDocument(package);
  writer = XpsDocument.CreateXpsDocumentWriter(xpsDocument);
  writer.Write(document);
  package.Close();

  System.Diagnostics.Process.Start(@"c:\program files\internet explorer\iexplore.exe", path);
}

10) Here is some sample code for saving a Chart control (or any WPF visual) to png. The image that this creates is the same size as the chart rendered on the screen. You'll notice that I am actually exporting a Grid to png, not the chart itself. This is the easiest way to give the image a white background rather than transparent by default. The background of the grid is white, and the grid contains the chart being rendered. My grid is set up in xaml and named "Grid". Again this code is the event handler in code-behind for clicking a button.

private void Png_Click(object sender, RoutedEventArgs e)
{
  string path = System.IO.Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.DesktopDirectory), "chart.png");
  using (Stream stream = File.Create(path))
  {
    int dpi = 96;
    RenderTargetBitmap rtb = new RenderTargetBitmap((int)Grid.ActualWidth, (int)Grid.ActualHeight, dpi, dpi, PixelFormats.Pbgra32);
    rtb.Render(Grid);

    BitmapEncoder encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(rtb));
    encoder.Save(stream);
  }
}

To enable the grouping UI of a DataGrid, you simply set the IsGroupingPanelVisible property to true. To perform grouping programatically, you can add DataGridColumn instances to the GroupedColumns collection property.

Let me know if you have more questions.

-Jason

Hi Jason, I tried to modify the LineChartDemo to get the selected data point as following but without any luck. I did set the Chart and Series' SelectionMode="Single"

1) First I tried to add it to class LineChartDemo as:

    this.Chart.Series[0].SelectedDataPointChanged += new EventHandler<SelectedDataPointChangedEventArgs>(LineChartDemo_SelectedDataPointChanged);
 void LineChartDemo_SelectedDataPointChanged(object sender, SelectedDataPointChangedEventArgs e)
    {
        throw new NotImplementedException();
    }

the event doesnot get called.

2) I tried mouse down event:

this.Chart.MouseDown += new MouseButtonEventHandler(LineChartDemo_MouseDown);
void LineChartDemo_MouseDown(object sender, MouseButtonEventArgs e)
{

    DataPoint theOne = null;
    foreach(var seriesI in this.Chart.Series)
    {
        DataPoint x = seriesI.SelectedDataPoint;
        if (x != null)
        {
            theOne = x;
            break;
        }
    }
}

x is always null.

3) I tried to change the TrackingEvent class and do the same thing as:

this._chart.ChartMouseLeftButtonDown += new EventHandler<ChartMouseEventArgs>(_chart_ChartMouseLeftButtonDown);
  this._chart.Series[0].SelectedDataPointChanged += new EventHandler<SelectedDataPointChangedEventArgs>(
TrackingElement_SelectedDataPointChanged);

same results as in #1) and #2). Why this is so hard to get it going?

4)How do I get the series when mouseover that series, I tried to change the MouseMove Event in TrackingElement class and hopefulling get the series the mouse is over. Because I just need to show the tooltips on that series, not others.

5) When set the series's ToolTips = "My Tooltips", it will not show at all. Why?

Hello Gordon

1) Sorry I forgot to mention that data points can only be selected if they are styled with a symbol. Only then can the user actually click on them with the mouse. The LineChartDemo doesn't have symbols on the data points. I have attached a small sample that applies a style to the data points of the blue and red series. The data points appear as small round circles. When clicking on one of these, the SelectedDataPointChanged event will be raised which will throw the NotImplementedException in the code-behind handler. To run the sample, make sure to include a reference to your copy of the Mindscape.WpfElements.dll. If you do not want the data points to be visible in this way, you could give the circles a transparent background, this will still allow them to be selected, but won't be visible to the user.

4) If you want to use the TrackingElement to get a tooltip effect, you could modify the AddElements and UpdateElements methods to only display one element. The element that gets displayed could be based on which series' y value is closest to the mouse. You could also include logic to only display the element if the distance between the y value and the mouse is within a certain number of pixels. Let me know if you need help with this if this is what you want to do.

5) Sorry for the confusion here. At the moment the Tooltip property isn't used on series. The Tooltip property is there because it is inherited from the Control class. Series extend the Control class simply to allow bindings to work in xaml. You can still set tooltips easily though. You can create a custom style to be applied to the line of the series. In the custom style you can use a Setter to set the ToolTip property. This is also demonstrated in the sample I have attched. You can see I set the LineStyle property of the green series. You can use a similar approach to set tooltips on the data points, this is useful if you want the tooltips to display the x and y data of the data points.

Please let me know if you have more questions about the Chart control.

-Jason

Thanks a lot for the sample, Jason. But I have a question, even with the transparent symbol, it will slow down the drawing when you have a lot of lines, right? It will be better if we can do without the symbol though.

Yes, the presence of symbols will slow things down with lots of lines. At the moment we do not have any other way for data points to be selected by the user. What you are looking for is a way for data points to be selected based on a close proximity mouse click. One thing that you could do to achieve this is subscribe to the ChartMouseLeftButtonDown event and then scan through your data to find the closest data point to the mouse. The event arguments have a LogicalPoint property which gives you the logical X and Y position of the mouse. Since you are using LineSeries, you will know that all the data points in a single series are in order from lowest x value to highest x value. This means you can run a binary search algorithm on the data collections of each series. Then you won't need to set the symbol style. Note that by doing this you will be getting the data points yourself and so won't need to worry about the SelectedDataPoint property or event of the chart. To get the tooltips working you can use something like the TrackingElement approach - this looks better than setting the tooltip of a data point anyway. Let me know if you have more questions about this.

-Jason

Thanks Jason for answering all these questions. But I also have another one about the datetime axis. Since it does not support un-even spacing, so there is no way to have tick mark as Jan 1, Feb 1, March 1... on the axis, right? (According to http://www.mindscapehq.com/forums/thread/4719). If there is could you tell us the trick?

Gordon

Hello Gordon

That is right, the chart axis does not support inconsistent logical spacings between tick marks. I have this feature request on my list of things to add to the chart controls and have increased it's priority, but can't promise when it will be available. You would need to use a tick spacing of 30 days or so for now.

-Jason