I am new to the xamChart, and to WPF. I really like the xamTrader sample, especially the xamChart you use. There is a whole lot of xaml to dig through, which I have to get the basic configuration of the chart. However, I am puzzled by two features which I really like, but dont have the faintest idea how to configure. 1) What style of line was used? I was thinking something like a bezier curve to render the line chart data, but I cant tell. 2) How did you get the line chart to scroll to the right when new data was introduced?
Thanks!
Hi,
This is a simplified sample which shows how to create a data scrolling. It is based on a timer event and changes made to the first and the last data point of the series.
Always use RefreshEnabled property to improve performance when data are changed in run time.
XAML:
<igCA:XamChart Margin="20,16,14,12" Name="xamChart1" />
C#:
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;using Infragistics.Windows.Chart;using System.Windows.Threading;
namespace WpfApplication10{ /// <summary> /// Interaction logic for Window1.xaml /// </summary> public partial class Window1 : Window { public Window1() { InitializeComponent(); }
private readonly DispatcherTimer timerClock = new DispatcherTimer(); Random rnd = new Random(); protected override void OnInitialized(EventArgs e) { base.OnInitialized(e);
timerClock.Tick += new EventHandler(timerClock_Tick); timerClock.Interval = new TimeSpan(0, 0, 1); timerClock.IsEnabled = true;
xamChart1.RefreshEnabled = false; xamChart1.Series.Add(new Series()); xamChart1.Series[0].Fill = Brushes.Red; xamChart1.Series[0].Stroke = Brushes.Red; for( int index = 0; index <=100; index++) { DataPoint dataPoint = new DataPoint(); dataPoint.Value = rnd.NextDouble() * 50; xamChart1.Series[0].DataPoints.Add(dataPoint); } xamChart1.RefreshEnabled = true; }
void timerClock_Tick(object sender, EventArgs e) { xamChart1.RefreshEnabled = false; xamChart1.Series[0].DataPoints.RemoveAt(0); DataPoint dataPoint = new DataPoint(); dataPoint.Value = rnd.NextDouble() * 50; xamChart1.Series[0].DataPoints.Add(dataPoint); xamChart1.RefreshEnabled = true; } }}
Thanks,
Thanks for the sample; simple for me to understand. The first portion, was also a curiosity. What configuration do I use to style the line like xamTrader?
Thanks again!
Hello, thank you for this example, I tried and that's exactly what I wanted to do.
However, I have a problem with the display of the graph, I would like to take the series of maximum length and chart from a time series becomes smaller than the chart.
How can we ensure that the series is still at the max and min of the X axis?
Regards
stef
i don't have this problem when adding points to the chart like this:
for (int current = 0; current < 10; current++) { DataPoint dp = new DataPoint(); dp.ChartParameters.Add(ChartParameterType.ValueX, DateTime.Now.AddDays(current)); dp.ChartParameters.Add(ChartParameterType.ValueY, current); this.theChart.Series[0].DataPoints.Add(dp); }
...so maybe you could post your code so we can see how the axis range is off.
you might be able to solve this problem using the Axes collection and a PrimaryX axis with Minimum and Maximum values set, but I can't be sure if that will fix the problem, since I am unable to reproduce the problem.
Hello,
Thank you for your response and here is my code :
C# (Basically similar than the given example, except that the used chart is type of scatterline)
public partial class Window1 : Window { private readonly DispatcherTimer l_TimerClock = new DispatcherTimer(); private Random l_Random = new Random(); private int l_TimeIndex = 0; public Window1() { InitializeComponent(); } protected override void OnInitialized(EventArgs e) { base.OnInitialized(e); int l_Index = 0; l_TimerClock.Tick += new EventHandler(timerClock_Tick); l_TimerClock.Interval = new TimeSpan(0, 0,0,1,0); l_TimerClock.IsEnabled = true; xamChart1.RefreshEnabled = false; xamChart1.Series.Add(this.MySerie); for (; l_Index < 10; l_Index++) { DataPoint dataPoint = new DataPoint(); dataPoint.ChartParameters.Add(ChartParameterType.ValueX, l_Index); dataPoint.ChartParameters.Add(ChartParameterType.ValueY, 0); xamChart1.Series[0].DataPoints.Add(dataPoint); } xamChart1.RefreshEnabled = true; } void timerClock_Tick(object sender, EventArgs e) { xamChart1.RefreshEnabled = false; xamChart1.Series[0].DataPoints.RemoveAt(0); DataPoint dataPoint = new DataPoint(); dataPoint.ChartParameters.Add(ChartParameterType.ValueX, l_TimeIndex); dataPoint.ChartParameters.Add(ChartParameterType.ValueY, l_Random.NextDouble() * 50); xamChart1.Series[0].DataPoints.Add(dataPoint); xamChart1.RefreshEnabled = true; l_TimeIndex++; } }
XAML
<Grid> <igCA:XamChart Margin="20,16,14,12" Name="xamChart1" Theme="Nautilus"> <igCA:XamChart.Axes> <igCA:Axis AutoRange="True" RangeFromZero="False" Unit="5" /> </igCA:XamChart.Axes> <igCA:XamChart.Legend> <igCA:Legend Visible="False" /> </igCA:XamChart.Legend> <igCA:XamChart.Scene> <igCA:Scene Background="Yellow"> <igCA:Scene.GridArea> <igCA:GridArea MarginType="Percent" Margin="10,10,10,10" Background="LightBlue" Name="myGridArea" FlowDirection="LeftToRight" IsTabStop="True" /> </igCA:Scene.GridArea> </igCA:Scene> </igCA:XamChart.Scene> <igCA:XamChart.Series> <igCA:Series ChartType='ScatterLine' Name="MySerie" Label="Test 2" Fill="BurlyWood"> </igCA:Series> </igCA:XamChart.Series> </igCA:XamChart> </Grid>
I didn't fix the Max and the Min in the PrimaryX axis, because I want my graph presents information in updated continuous way as presented in xamTrader.
But by analyzing the XamTrader I noticed that the values of the X axis units evolved in function of time but the first unit remained fixed.
How can this be achieved?
Thank you for your help
Stéphanie
ok ... thanks for the source code ... please forgive me if i have misunderstood your problem, as i'm only about 50% sure i understand what's wrong.
i ran the project using the source code you provided, and i saw the chart which updates periodically.
is the issue that you want the X axis minimum to remain fixed, while the X axis maximum expands with the data? if so, you will need to set AutoRange=false on the axis, keep the minimum at a fixed value, and update the maximum each time the data updates. like in this code:
private void UpdateAxisRange() { Axis ax = this.xamChart1.Axes[0]; ax.Minimum = 0.0; double maxX = double.MinValue; foreach (DataPoint p in this.xamChart1.Series[0].DataPoints) { maxX = Math.Max(maxX, this.GetParameterDouble(p, ChartParameterType.ValueX)); } ax.Maximum = maxX; }
private double GetParameterDouble(DataPoint point, ChartParameterType type) { foreach (ChartParameter param in point.ChartParameters) { if (param.Type == type) { return Convert.ToDouble(param.Value); } } return double.NaN; }
... add a call to UpdateAxisRange() in the timer's Tick handler, and the axis should upate as described.
if that's not what you're asking, please restate the problem and relate it to the example you have provided.