In this post I will discuss how to set position of tooltip for Infragistics ASP.Net Charts. This has been a very annoying problem with ASP.Net charts that when you have a custom tooltip that has width and height that can cause the tooltip to be clipped and user not being able to see all the information in the tooltip. See the example below. I have a custom tooltip that displays a DIV which has a width of 400px. When I hover on column on right side, half of the tooltip is clipped by right side of the browser.

Infragistics exposes client side events for charts where you have access to the HTML element corresponding to the tooltip. I thought I could handle these events and then try to set position CSS style to move the tooltip to a location so that tooltip always stays in the view depending on height and width of the browser view. Well I spent few hours fighting with DOM and trying to set x and y position of tooltip DIV. Well nothing worked.

Finally I went to good old debugging using IE Developer Tools and see what actually was happening in Infragistics javascript code itself. Well there was my answer. Well not answer to my problem but cause of the problem. Infragistics handles MOUSEMOVE event in their onmousemove. At the bottom of this function, I found this piece of code:

var ttof = this.TooltipOverflow ? 
    this.TooltipOverflow : tooltip_ref_body.getAttribute("igTtOf");
 switch (ttof) {
     case "None":
       IGB.SetXScrollContainerSafe(tooltip_ref_body, x);
       IGB.SetYScrollContainerSafe(tooltip_ref_body, y);
       break;
     case "ClientArea":
       IGB.SetXClientOverflowSafe(tooltip_ref_body, x);
       IGB.SetYClientOverflowSafe(tooltip_ref_body, y);
       break;
     case "ChartArea":
       locx = x - IGB.GetPageX(baseImageRef);
       locy = y - IGB.GetPageY(baseImageRef);
       IGB.SetXOverflowSafe(tooltip_ref_body, x, locx, baseImageRef);
       IGB.SetYOverflowSafe(tooltip_ref_body, y, locy, baseImageRef);
       break;
}

On every mousemove Infragistics javascript code keeps resetting the location of tooltip DIV. And this position is calculated based on position of mouse. It did not matter how much position of tooltip I set, it will keep resetting back to position of mouse in this mousemove event handler. After thinking through, I came up with 3 solutions.

1. Modify Infragistics ig_webchart.js to calculate x and y position based on size of tooltip DIV and keep it in view.
2. Add your own DIV element on the page. In showTooltip event from IG, hide the original tooltip and then use its position to show your DIV.
3. Add a DIV on your page at some fixed location which is always in view. Then in Showtooltip event handler sets it visibility and data in it and hide original tooltip DIV.

Option 2 and 3 looked like choices that would not require me to change Infragistics code itself. But it depends a lot on Infragistics event handler. And if Infragistics changed it handling that would mean I will have to modify my code again. So I decided to change ig_Webchart.js file in Infragistics code itself. By doing so I would be able to fix this problem for good for all charts. I think this is one feature that Infragistics should have implemented in first place.

The fix is pretty simple. In onmousemove function, based on mouse position, tooltip DIV size and browser view height and width, calculate position so that tooltip DIV comes in view. Then set the position value on tooltip div. After the changes I made, the code looked like below.

var thisTooltipPos = this.calculateTooltipPosition(evt, id);
var ttof = this.TooltipOverflow ? 
 this.TooltipOverflow : tooltip_ref_body.getAttribute("igTtOf");
switch (ttof) {
  case "None":
     if (thisTooltipPos.x == -1 && thisTooltipPos.y == -1) {
      IGB.SetXScrollContainerSafe(tooltip_ref_body, x);
      IGB.SetYScrollContainerSafe(tooltip_ref_body, y);
     }
     else {
      IGB.SetXScrollContainerSafe(tooltip_ref_body, thisTooltipPos.x);
      IGB.SetYScrollContainerSafe(tooltip_ref_body, thisTooltipPos.y);
     }
     break;
     ..
     ..
}

In my calculateTooltipPosition function, I calculate position of tooltip to keep it in view and then set it on tooltip div. You can see from the examples below that tooltip alwas stays in view inside browser window.

Wrapping Text in tooltip

Another problem you will run into with tooltip is that when you have long text string, it will not wrap in the DIV if you want to control the width of DIV so that it is not too wide. The problem is that tooltip div has its position CSS style set to absolute. That takes this DIV element out of normal flow of the page. Then text-wrap does not work. This can be accomplished, you will just have to set appropriate style on containing div. For example in my custom tooltip format I have set CSS styles as shown below:

StockPriceChart.Tooltips.FormatString = "<div style='overflow:hidden;
white-space:normal;
width:200px;
text-wrap:normal;' id='stepchartTooltipId<DATA_ROW>'>
<p style='float:right;right-margin:1px;width:190px;position:relative;'><DATA_ROW>" +
GetMockTooltip() + "</p></div>";

Set overflow:hidden and white-space:normal and set a fixed width for inner paragraph as well.

If you need some help with this, feel free to contact me.

In this post I will discuss how to draw custom legends in Infragistics charts. The default implementation of legends is confined to using name of the columns that contain data values. But some time you may have chart data created as a view that is customized to draw the charts the way you want it to but the underlying description of the data may need some additonal description on legends to indicate to the user what actually they are looking at. Or there could be case that you want legends that are more descriptive etc. Here is an example of drawing custom legends at the bottom of the chart.

void InsertCustomLegends(FillSceneGraphEventArgs e)
{
  var skinPEs = StockPriceChart.ColorModel.Skin.GetElements();
  double legendPadding = 10;
  double legendMarkerSize = 20;
  double legendTextPadding = 5;
  double paddingFromBottomOfChart = 20;
  Font legendFont = StockPriceChart.Axis.X.Labels.Font.Clone() as Font;
  // Calculate total width needed for bounding rectangle for all legends.
  double width = 0;
  SizeF legendTextSize;
  double height = 0;
  using (Bitmap b = new Bitmap(1,1))
  {
     using (Graphics g = Graphics.FromImage(b))
     {
        foreach (var legendText in _legends)
        {
           legendTextSize = g.MeasureString(legendText, legendFont);
           width += legendTextSize.Width;
           height = Math.Max(height, legendTextSize.Height);
        }
        width += _legends.Count * (legendMarkerSize + legendTextPadding + legendPadding);
        height = Math.Max(height, legendMarkerSize);
        // Insert padding at start,  end and top, bottom
        height += legendMarkerSize;
      }
  }
  //  Calculate position of legend bounding rectange.
  double boundingLeft = e.ChartCore.GridLayerBounds.X + 
        (e.ChartCore.GridLayerBounds.Width - width) / 2.0;
  double boundingTop = StockPriceChart.Height.Value - paddingFromBottomOfChart - height;
  double boundingMid = boundingTop + height/2.0;

  Box legendBox = new Box(new Point((int)boundingLeft, (int)boundingTop),
          (int)Math.Ceiling(width), 
          (int)Math.Ceiling(height));
  legendBox.PE.StrokeWidth = 0;
  e.SceneGraph.Add(legendBox);
  double x = boundingLeft + legendPadding / 2.0;
  using (Bitmap b = new Bitmap(1, 1))
  {
     using (Graphics g = Graphics.FromImage(b))
     {
        for (int i = 0; i < _legends.Count; i++)
        {
          // First insert marker box.
          Box markerBox = new Box(
                new Point((int)x, (int)Math.Ceiling(boundingMid - legendMarkerSize / 2.0)), 
                (int)legendMarkerSize, (int)legendMarkerSize);
          markerBox.PE = StockPriceChart.ColorModel.Skin.GetElements()[i];
          e.SceneGraph.Add(markerBox);
          x += legendMarkerSize;

          // Now insert text.
          x += legendTextPadding;
          SizeF textSize = g.MeasureString(_legends[i], legendFont);
          Text legendText = new Text(new Point((int)x, 
                 (int)Math.Ceiling(boundingMid)), _legends[i]);
          e.SceneGraph.Add(legendText);

          x += textSize.Width;
          x += legendPadding;
        }
      }
   }
}

Some of the key points in this sample code that you may need to pay attention to:

• I have used the same font as was set for X-axis labels to calculate string size. Depending on your chart set up, you may have to create new Font object with same attributes that you want to use to draw the legend text.
• Since I am using Paint Elements from my pre-configured skin, so I was able to assign the same to the legend marker boxes. Again, you will pcik colors to match whatever you are using for your charts.

You can use the same concept to draw cusotm legends at top or right. Feel free to send me question if you need help with any customization of Infragistics charts.

When you are creating visual representation of data using Charts, you want to make sure that your presentation is not just simple drawing of lines or columns here and there. For a number cruncher that may be what he is really interested in, but when the presentation is appealing, it leaves a good impact on the person who is looking at it and draws their attention to actual data behind it as well.

One thing that plays big part in face lift of a chart is background of each segment of the chart. And two segments that play a huge part are over all background of whole chart and background of area that repesent rendering of data points. Infragistics Chart control provides lots of ways you can control these background parameters. Lets see them one at a time. Following screen shot shows a column chart that has distinct background colors for two sections that I just mentioned.

How to set background color for Chart?

There is no direct property that allows you to set color properties for over all chart. Infragistics provides a way to attach an image to background that you can use to fill the entire area of chart. Here is an example from their online samples.

this.UltraChart1.BackgroundImageFileName=Server.MapPath("../images/StretchedFit.png");

This approach would mean that I need to be able to create images that will work as per my requirements. Well if you do not have ability to work with graphics tools then you are out of luck. Here is an approach that does not require background image.

Use FillScreneGraph event to insert a custom box that draws on the complete chart area. The dimensions of this box are same the size of your chart object. So there is no much of math required. And then set the fill and color attributes on that Box primitive to match your requirements. There is little caveat to this approach. It seems that this being a custom object, it gets drawn after other layers have been rendered. So you have to play a little bit with FillOpacity paremeters to make sure that your custom box does not end up hiding your chart. Here is some code that I used for demo chart.

void InsertChartBackground(Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e)
{
    Box bgBox = new Box(new Point(0, 0), 
                       (int)StockPriceChart.Width.Value, 
                       (int)StockPriceChart.Height.Value);
    bgBox.Roundness = 20;
    bgBox.PE.ElementType = PaintElementType.Gradient;
    bgBox.PE.Fill = Color.LightGray;
    bgBox.PE.FillStopColor = Color.Blue;
    bgBox.PE.FillGradientStyle = GradientStyle.ForwardDiagonal;
    bgBox.PE.StrokeWidth = 0;
    bgBox.PE.StrokeOpacity = 0;
    bgBox.PE.FillStopOpacity = 25;
    bgBox.PE.FillOpacity = 25;
    e.SceneGraph.Add(bgBox);
}

Another important parmeter is roundness of custom box. If you have set rounded corner for border of your chart, then make sure that you use the same parameters for this box as well. Otherwise your background box will have edges bleeding through chart border.

How to set background of chart area?

This one is pretty straight forward. Infrgistics provides you place to do it on axis object itself. Here is sample code.

void SetChartAreaBackground()
{
   StockPriceChart.Axis.PE.ElementType = PaintElementType.Gradient;
   StockPriceChart.Axis.PE.FillGradientStyle = GradientStyle.ForwardDiagonal;
   StockPriceChart.Axis.PE.Fill = Color.FromArgb(255, 225, 253, 248);
   StockPriceChart.Axis.PE.FillStopColor = Color.FromArgb(255, 245, 255, 253);
   StockPriceChart.Axis.PE.FillOpacity = 100;
   StockPriceChart.Axis.PE.StrokeOpacity = 0;
   StockPriceChart.Axis.PE.StrokeWidth = 0;
}

When you render charts, one of the important part of the visualtization is display of values corresponding to each visual element on the chart. For example if you are rendering Column Chart then you want to display actual value of the data associated with each column. Next thing you want to control where to display that text in the column. If you do not set the value for alignment, the text is shown in middle of upper line of column rectangle. That position is not something I would choose for positioning of the data value label. One you will have the top line of rectangle going right through it. Second, depending on size of rectangle and font you choose, the value will may not be clearly visible. Most of the time obvious and logical choice is to display the value on top of the column. And if you are rendering a bar chart, then to the right of the bar depending on how much space you got on top or left. Here is the code snippet that shows how you can control the vertical positioning of data value label for a column chart. The control property is VerticalAlign. And for horizontal control on position you will use HorizontalAlign property.

void SetDataLabels()
{
   int rowIndx = 0;
   foreach (var data in _weeklyEarningsData)
   {
      var chartApperance = new ChartTextAppearance();
      chartApperance.ChartTextFont = new Font("Verdana", 12f, FontStyle.Bold);
      chartApperance.Visible = true;
      chartApperance.ItemFormatString = "";
      chartApperance.Row = rowIndx++;
      chartApperance.VerticalAlign = StringAlignment.Far;
      WeeklyEarningsByRaceChart.ColumnChart.ChartText.Add(chartApperance);
    }
}

There are three values you can pick for VerticalAlign property. Far, Near and Center. Following images show how these values influence vertical position of data label text for a Column Chart.

Center (Default)
Far
Near

In previous post How to create charts in ASP.Net using Infragistics controls I talked about very basics to get started. In this post I will discuss how to customize titles of chart. This is one of the important parts of your chart because each report or chart needs a title to convey to the user what this chart or report is all about. Infragistics Charts offer few ways to set titles for your chart.

Open the page where you have your chart control. Use Quick Design option in menu for chart control. You will see a dialog box as show below and neat bottom of tree you will see following four options.

• Title Left
• Title Top
• Title Right
• Title Bottom

As the names suggest IG offers you four places where you could set title(s) for your chart. If you click any of the options for title in the design tree, you will see all the properties that you can set. Configure how you want to display the title and you are good to go.

Programatically setting chart title properties

A lot of time you want to set the chart titles at run time based on some conditions. You can definitely do that from code. You can set the same properties in code as you set from designer. Chart object exposes TitleLeft, TitleTop, TitleRight and TitleBottom proeprties to accomplish that. Following code snippet shows how I tried to set up top title for my chart.

void SetChartTitles()
{
    WeeklyEarningsByRaceChart.TitleTop.Visible = true;
    WeeklyEarningsByRaceChart.TitleTop.Text = "Weekly Earnings By Race";
    WeeklyEarningsByRaceChart.TitleTop.Font = new Font("Verdana", 10f, FontStyle.Bold);
}

Its been couple of years since I did some extreme charting using Infragistics Charts controls. Well I am back into it again. Last time I used it, it was V 2008 or something. Anyways, since I have started to look into this technology again, so I thought I will put together some posts to show some cool things that you could do with Infragistics Chart control.

In this post I will just discuss how to get started with using Infragistics Charts for ASP.Net. In subsequent posts I will discuss more details and more customization of Infrgistics Charts. Since I am using V10.3, so I am going to keep my discussions focused around that version only.

Install Infragistics

Well this is something you have to do to get started. If you have access to just the assemblies, you can just copy them to some central location on your development machine and then add reference form there.

Set up ASP.Net Toolbox with Infragistics Control

If you want to drag and drop IG controls, then it is easier to set up ToolBox with a tool bar for Infragistics controls. I am not going to describe how to set up custom toolbox bar. Here is screen show of how tool box looks like on my development machine.

Add Markup on your page

Drag UltraChart control from toolbox onto page. Or you can manually type it on the page or user control. Here is what mark up will look like.

<igchart:ultrachart id="WeeklyEarningsByRaceChart" runat="server" />

If you have dragged control from toolbox then it has already taken care of adding appropriate register tags at the top of your page. If you do not see them, then here is what you will need to add to get started.

<%@ Register assembly="Infragistics4.WebUI.UltraWebChart.v10.3, Version=10.3.20103.1013, 
 Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
 namespace="Infragistics.WebUI.UltraWebChart" tagprefix="igchart" %>\>

<%@ Register assembly="Infragistics4.WebUI.UltraWebChart.v10.3, Version=10.3.20103.1013, 
Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" 
namespace="Infragistics.UltraChart.Resources.Appearance" tagprefix="igchartprop" %>

<%@ Register assembly="Infragistics4.WebUI.UltraWebChart.v10.3, Version=10.3.20103.1013, 
Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" 
namespace="Infragistics.UltraChart.Data" tagprefix="igchartdata" %>

Without these register tags you will get errors on the page telling you that tag prefix is not known. One of the things I have noticed is that when you drag the control from toolbox, it does not add any tag prefix with control name on the page. If you see it, then you will have to manually add igchart tag prefix with control definition on page.

Set up chart properties

Make sure that you bring up design view of the page before using Chart Wizard to customize the view. There seems to be a bug or known issue that if you have opened the page in source view and you configure the chart using wizard, it does not update mark up on the page when you save the settings. So bring up the design view of the page to be on safe side. Now use Chart Wizard to select what type of chart you want and configure other display parameters. For my simple demo, I just chose Column Chart and left other settings to default. I will discuss customization of chart in details in subsequent posts.

Connect chart to data

Now only thing left is to connect your chart to your data and you are all set. You can bind chart control to any collection or table. It is as simple as that as long as there is some numeric data column in there. If there is no numeric data to plot then chart control can not do much about it. For my demo I simple created dummy data with a class object that has two properties.

public List<ViewModel.RacialWeeklyEarningView> GetWeeklyEarningsByRace()
{
     var earnings = new List();

    earnings.Add(new ViewModel.RacialWeeklyEarningView() { RaceType = "1", Earning = 765 });
    earnings.Add(new ViewModel.RacialWeeklyEarningView() { RaceType = "2", Earning = 611 });
    earnings.Add(new ViewModel.RacialWeeklyEarningView() { RaceType = "3", Earning = 855 });
    earnings.Add(new ViewModel.RacialWeeklyEarningView() { RaceType = "4", Earning = 535 });

    return earnings;
}

In my report page, I just bind chart to this collection and I got my column chart working.

List<ViewModel.RacialWeeklyEarningView> _weeklyEarningsData;

void BindChart()
{
     WeeklyEarningsByRaceChart.DataSource = _weeklyEarningsData;
     WeeklyEarningsByRaceChart.DataBind();
 }

Download Sample Projects (28.22 kb)

In my previous post, How to set silverlight column chart style programatically", I discussed one of the customizations of chart styles. In this post I will discuss one more customization of Silverlight charts rendering. This is about customizing display of Tooltip display on charts. If you look at default tool tip display, they are limited to displaying some combination of Independent and Dependent value. In some cases, that information is sufficient. But you may have cases where you want your tool tips to be verbose to convey more information about the data point that was used to render that point or column etc.

Template is the key

First and foremost concept that you will need to understand is how a chart actually gets rendered. Who decided the layout of various components of a chart display. Like any other Silverlight control, its the control template that defines how to chart is going to be rendered. So to customize the dispplay of Silverlight control, you can create a new template or take the default template and make modifications to it to come up with your own display scheme. Now you are asking from where can you get the default template for various chart types. The answer to it is Silverlight Toolkit source code. If you look in Charting/DataPoint folder of Controls.DataVisualization.Toolkit project, you will find template files for all chart types.

Customize Tooltip For Chart

Let us get started. For this discussion I picked Column type chart. Here are the steps that I followed to create a new template file for my column charts.

• Add a new resource dictionary file in your project. In sample project I added ColumnChartStyle.xaml file under Assets folder.
• Open ColumnDataPoint.xaml file from DataPoint folder from tool kit source. Copy the content of this file into your resource file.
• Make sure that you change the build action of your resource file to Resource from Page
• Assign a key to your style as shown below. You can pick any unique name. You are going to use the key when we apply this new template and style to our column charts.

  
  <Style TargetType="charting:ColumnDataPoint" x:Key="ByteBlocksColumns">
  
  

• Open the XAML file where you have added chart that you want to display. In the sample project, it is in Home.xaml. And then assign DataPointStyle property to point to the static resource that we created from default implementation of ColumnDataPoint. And make sure that you use the key name that you used in the resource file. Following snippet shows how I did it in sample project.

  
  <chartingToolkit:Chart Title="Fruit Supply and Demand" 
     x:Name="FruitChart" 
     Width="500" 
     Height="350">
   <chartingToolkit:Chart.Series>
    <chartingToolkit:ColumnSeries
  		DataPointStyle="{StaticResource ByteBlocksColumns}"
          Title="Fruit Supply"
          IndependentValueBinding="{Binding Name}"
          DependentValueBinding="{Binding Supply}"/>
    </chartingToolkit:Chart.Series>
  </chartingToolkit:Chart>
  
  

Now you should be able to compile and run your project. We have not done any customization of tool tip yet. At this point you should be able to run the project with default template.

TooltipService and Tooltip

If you look near bottom of ColumnChartStyle.xaml file, you will find following snippet of code.

<ToolTipService.ToolTip>
 <ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
</ToolTipService.ToolTip>

This is default implementation of how and what is displayed in tool tip. So you can see that by default only DependentValue is displayed. So this is the place where you will need to make changes to customize the display of tooltip for chart. If you are only interested in making some minor changes like adding some static text or adding display of dependent value as well, you can make a change as below.

<ToolTipService.ToolTip>
 <StackPanel Orientation="Horizonal">
 <ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
 <TextBlock Text="-" />
  <ContentControl Content="{TemplateBinding FormattedIndependentValue}"/>
 </StackPanel Orientation="Horizonal">
</ToolTipService.ToolTip>

Customizing Tooltip Display at run time

In the sample project, I have implemented a use case where I want to create tool tip display at run time. What this means is that content of tool tip is being constructed based on some input from the existing data that is bound to that column. So in the template I am going to make some changes as shown below.

<ToolTipService.ToolTip>
<StackPanel Orientation="Horizontal">
<ContentControl Content="{Binding Id, Converter={StaticResource FruitConverter}}"/>
</StackPanel>
</ToolTipService.ToolTip>

In the snippet above you will see use of two things. One is that I am binding the content to the actual data object that was used to render that point. Second is use of converter. I am passing "Id" of the object as parameter to the converter. And in the converter I do some mock query to get more data. Following code shows how I constructed text of tool tip.

public class FruitSupplyToolTipConverter : IValueConverter
{
 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
 {
  return GetToolTip(int.Parse(value.ToString()));
 }

 public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
 {
  return value;
 }

 object GetToolTip(int id)
 {
  var supply = MockData.FruitSupply.GetSupply();
  var query = from item in supply where item.Id == id select item;
  var items = query.ToList();
  if (items.Count == 0)
  {
   return string.Empty;
  }
  return CreateToolTip(items[0]);
 }

 object CreateToolTip(FruitSupply supply)
 {
  var panel = new StackPanel();
  panel.Orientation = Orientation.Vertical;
  var tipTextBlock = new TextBlock();
  tipTextBlock.Inlines.Add(new Run { Text = supply.Name });
  tipTextBlock.Inlines.Add(new LineBreak());
  tipTextBlock.Inlines.Add(new Run { Text = string.Format("Supply: {0}", supply.Supply)});
  tipTextBlock.Inlines.Add(new LineBreak());
  panel.Children.Add(tipTextBlock);
  var hlink = new HyperlinkButton();
  hlink.Content = "For more informattion Goto http://www.ByteBlocks.com";
  hlink.NavigateUri = new Uri("http://www.byteblocks.com");
  panel.Children.Add(hlink);
  return panel;
  }
}

You could argue that instead of going to the extent of using converter to build a tool tip text, I could have added another property to data object that contains the text and then bind tool tip to that property. That would have worked perfectly as well. But for demonstrating how you can construct tool tip text based on some other pieces of data or if tool tip content changes rapidly with time as well, then you need to access it at run time.

I hope this should give you good starting point to go nuts on more nifty tool tips.

This is one of the thing that is easy to do but no so obvious. I think mostly its lack of complete description of how charting controls provided in Silverlight toolkit work and how to manipulate them. When you draw charts like Line, Column, Bar etc., the grid line on DependentValue are rendered by default. There is a property ShowGridLines available on DisplayAxis class that is base class for axis. You just need to set its value to False. For example in my line chart I did not want to show grid lines on grid lines on Y axis. Following XAML snippets shows how I turned off rendering of grid lines on Y-axis.

<chartingToolkit:Chart Title="Latency" x:Name="latencyChart" BorderThickness="1">
 <chartingToolkit:Chart.Series>
  <chartingToolkit:LineSeries Title="Val 1" 
     DependentValueBinding="{Binding Threshold}"
     IndependentValueBinding="{Binding IndependentValue}" 
     AnimationSequence="Simultaneous" />
  <chartingToolkit:LineSeries Title="Val 2Latency" 
   DependentValueBinding="{Binding Current}" 
   IndependentValueBinding="{Binding IndependentValue}" 
   AnimationSequence="Simultaneous" />
  <chartingToolkit:LineSeries Title="Val 3" 
   DependentValueBinding="{Binding Average}" 
   IndependentValueBinding="{Binding IndependentValue}" 
   AnimationSequence="Simultaneous" />
  </chartingToolkit:Chart.Series>
   <chartingToolkit:Chart.Axes>
    <chartingToolkit:LinearAxis Orientation="Y" ShowGridLines="False"/>
  </chartingToolkit:Chart.Axes>
</chartingToolkit:Chart