Hi,
I have a requirements to create a data chart which eventually have 4 (confirmed: not more not less) series.
All these series must be created dynamically (i.e. their X-Axis and Y-Axis points) based on some calculation on my DTO object. Previously I successfully created a chart using xamWebChart which have one line series and 1 column series, as described here. Now my requirement is to add Range Area series in it as shown in this images.
I found that xamDataChart only have this "Range Area Series" but I don't know how can I create datapoints dynamically in it. Here is the some sample code which I did previously for creating xamWebChart. I will appreciate if someone help me to give any idea how can I achieve my requirements. If I can also add "Range Area Series" (or something similar to requirements) then it will be awesome.
/*************************************Create Series and Axes of chart*********************/
/* minyear and maxyear have number of points to be created.
theChart.Series.Clear(); theChart.Axes.Clear(); int mYear = minYear; Series lineSeries = new Series { ChartType = ChartType.Line, AxisX = "x1", AxisY = "y1" }; Series columnSeries = new Series { ChartType = ChartType.Column, AxisX = "x1", AxisY = "y2", Stroke = new SolidColorBrush(Colors.Transparent), Opacity = 0.2, UseDataTemplate = true }; columnSeries.DataPointStyle = (Style)this.Resources["columnSeriesPointStyle"]; LinearGradientBrush linBrush = new LinearGradientBrush(); linBrush.Opacity = 0.2; linBrush.GradientStops.Add(new GradientStop { Color = Infragistics.ColorConverter.FromString("#FFBF00") }); columnSeries.Fill = linBrush; while (mYear <= maxYear) { lineSeries.DataPoints.Add(new DataPoint(0, mYear.ToString()) { Marker = new Marker { Type = MarkerType.None } }); columnSeries.DataPoints.Add(new DataPoint(0)); mYear = mYear + 1; } Axis x1Axis = new Axis { AxisType = AxisType.PrimaryX, Name = "x1" }; x1Axis.MajorGridline = new GridlineGroup { Visibility = Visibility.Collapsed }; x1Axis.MinorGridline = new GridlineGroup { Visibility = Visibility.Collapsed }; Axis y1Axis = new Axis { AxisType = AxisType.PrimaryY, Name = "y1" }; y1Axis.MajorGridline = new GridlineGroup { Visibility = Visibility.Collapsed }; y1Axis.MinorGridline = new GridlineGroup { Visibility = Visibility.Collapsed }; Axis y2Axis = new Axis { AxisType = AxisType.SecondaryY, Name = "y2", Minimum = 0, Maximum = 1, Unit = 1, AutoRange = false, Visibility = Visibility.Collapsed }; y2Axis.MajorGridline = new GridlineGroup { Visibility = Visibility.Collapsed }; y2Axis.MinorGridline = new GridlineGroup { Visibility = Visibility.Collapsed }; theChart.Axes.Add(x1Axis); theChart.Axes.Add(y1Axis); theChart.Axes.Add(y2Axis); theChart.Series.Add(lineSeries); theChart.Series.Add(columnSeries);
/***************************************Add Chart points and Data*************************/
Axis y1Axis = theChart.Axes.FirstOrDefault<Axis>(axis => axis.AxisType == AxisType.PrimaryY);Series lineSeries = theChart.Series.FirstOrDefault<Series>(series => series.ChartType == ChartType.Line);int seriesDataPointInedex = 0;while (mYear <= maxYear){ lineSeries.DataPoints[seriesDataPointInedex].Value = valueofPoint; seriesDataPointInedex = seriesDataPointInedex + 1; mYear = mYear + 1;}Series columnSeries = theChart.Series.FirstOrDefault<Series>(series => series.ChartType == ChartType.Column);DataPoint dp = columnSeries.DataPoints[ddlYear.SelectedIndex];dp.Value = 1;
Kindly help.
The DatChart control handles data points differently from XamWebChart. The number of points is inferred from your data; there is no way to add/remove points directly to the chart. If you add a value to your data, the chart will add a point to the series. Please check out the code in our DV samples to get more familiar with the DataChart control:http://samples.infragistics.com/sldv/ComponentOverview.aspx?cn=data-chart
Thank you Max for your response. So its mean I will not have access to set each point marker in Data Chart. For example for some datapoint I want to display Marker and for some don't want to display marker on that point?
Moreover I will also have to move column chart bases on Year value selected in combo. Basically I am using Column chart to highlight year only.
And also just a confirmation, does Web Chart does not have this Area Chart category?
Thanks,
M. Irfan
DataChart is designed to handle large volumes of data. Sometimes with large data sets each visible data point contains thousands of actual points, so it wouldn't make much sense to set a marker on point #12001 when there is no guarantee that it will even be displayed. The architecture of DataChart won't be able to allow access to specific rendered points/markers. This is something you're better off with XamWebChart. If you need to have a series that looks like a range area, try using a stacked area series with the bottom stack being transparent. So basically, you want 2 StackedArea series, first one being fully transparent (Fill and Stroke) with values equal to the lows of the range area. The second series will have a fill and the values will be the highs of the range area.
Thank you Max. As shown in above image, I will have aournd 10 points in Chart, not thousand points.
However how can we handle NULL values in XamDataChart? For example, first point have value 2.5, second point is null, third point have value 3.0. So where this secod point will draw in chart. Can I have this such a way that It become a straigt line from point 1 to point 3 (instead point 2 goes to ZERO) and mark some how point 2 that it contains null value?
Secondly Can I capture the Datapoint click event in XamDataChart? In Datapoint click event, I will have to show Column Series chart to that point as well as select that point year in Combo. I believe I can handle this show/hide of Column Series on certain point by implementing "INotifyPropertyChanged". Am I right?
Thanks once again.
Any response that how we can handle NULL (missing) values in xamDataChart?
And does xamDataChart support DataPoint Click event?
Thanks in advance.
If you're using LineSeries, setLineSeries.UnknownValuePlotting="LinearInterpolate"
To handle data point clicks, handle chart's SeriesMouseLeftButtonDown event. e.Item will give you the data point.
Hello,
Thank you for your post. I have been looking into it and I created a sample project for you with the functionality you want. Basically I created a MarkerTemplate, an Ellipse, and handled the MouseLeftButtonDown event and in its handler I change the Fill of the Ellipse. Please let me know if this helps you or you need further assistance on this matter.
Looking forward for your reply.
I have question about the possibility of selecting a data point on the xamDataChart.
While having the crosshair enabled for the Line Chart, can i click on the datapoint and have the handler SeriesMouseLeftButttonDown to handle the event and catch the datapoint clicked and change the marker color of that data point? That is the end result should be the user clicks the data point and it should like he selected it. and toggle it back when he clicks it again.