I am using ScaterLIneSeriers because our axes (x&Y) are linear axies. We add multiple ScatterLineSeries dynamically using code. We see following list of issues.
1. There is no option to sort the axis data automatically.
2. We thought if we sort them and add it it will work fine. But it does not cover all the cases because our series are sparsed. When there is sparsed data and some data does not overlap and the sequence are not done automatically the graph looks very ugly.
3. So, We tried the workaround of creating dummy series with all the points and add that as first series and set their visibility to false and it did not help that much because the rendering of series is not same as the ordering of adding the series.
4. The ScaterLine series does no render same as excel when the data is not sorted and the data has both positive and negative values.
We need to know how to solve this issues. Is there any patches available.
Thanks
Mohan.
7 Answers, 1 is accepted
Rank 1
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
public void BuildSeriesWithSortedPositiveData()
{
var series = new ScatterLineSeries();
series.Name =
"test1";
series.YValueBinding =
new GenericDataPointBinding<Tuple<double, string>, double>()
{
ValueSelector = tp => tp.Item1
};
series.XValueBinding =
new GenericDataPointBinding<Tuple<double, string>, double>()
{
ValueSelector = tp =>
double.Parse(tp.Item2)
};
series.ItemsSource =
new List<Tuple<double, string>>()
{
new Tuple<double, string>(22.81600312,"0"),
new Tuple<double, string>(27.5164037,"1"),
new Tuple<double, string>(8.134811961,"2"),
new Tuple<double, string>(23.59115799,"3"),
new Tuple<double, string>(18.08863131,"4"),
new Tuple<double, string>(16.33063453,"5"),
new Tuple<double, string>(11.09618849,"7"),
new Tuple<double, string>(16.9299272729203,"10")
};
series.Stroke =
new SolidColorBrush(Colors.Blue);
series.VerticalAxis = chart.VerticalAxis;
series.HorizontalAxis = chart.HorizontalAxis;
chart.Series.Add(series);
}
public void BuildSeriesWithUnsortedPositiveData() {
var series = new ScatterLineSeries();
series.Name =
"test2";
series.YValueBinding =
new GenericDataPointBinding<Tuple<double, string>, double>()
{
ValueSelector = tp => tp.Item1
};
series.XValueBinding =
new GenericDataPointBinding<Tuple<double, string>, double>()
{
ValueSelector = tp =>
double.Parse(tp.Item2)
};
series.ItemsSource =
new List<Tuple<double, string>>()
{
new Tuple<double, string>(16.33063453,"5"),
new Tuple<double, string>(8.134811961,"2"),
new Tuple<double, string>(11.09618849,"7"),
new Tuple<double, string>(22.81600312,"0"),
new Tuple<double, string>(27.5164037,"1"),
new Tuple<double, string>(23.59115799,"3"),
new Tuple<double, string>(18.08863131,"4"),
new Tuple<double, string>(16.9299272729203,"10")
};
series.Stroke =
new SolidColorBrush(Colors.Green);
series.VerticalAxis = chart.VerticalAxis;
series.HorizontalAxis = chart.HorizontalAxis;
chart.Series.Add(series);
}
public void BuildSeriesWithSortedPositiveAndNegativeData()
{
var series = new ScatterLineSeries();
series.Name =
"test3";
series.YValueBinding =
new GenericDataPointBinding<Tuple<double, string>, double>()
{
ValueSelector = tp => tp.Item1
};
series.XValueBinding =
new GenericDataPointBinding<Tuple<double, string>, double>()
{
ValueSelector = tp =>
double.Parse(tp.Item2)
};
series.ItemsSource =
new List<Tuple<double, string>>()
{
new Tuple<double, string>(16.33063453,"-2"),
new Tuple<double, string>(8.134811961,"-1"),
new Tuple<double, string>(11.09618849,"-.5"),
new Tuple<double, string>(22.81600312,"0"),
new Tuple<double, string>(27.5164037,".5"),
new Tuple<double, string>(23.59115799,"1"),
new Tuple<double, string>(18.08863131,"1.5"),
new Tuple<double, string>(16.9299272729203,"2.5")
};
series.Stroke =
new SolidColorBrush(Colors.MediumVioletRed);
series.VerticalAxis = chart.VerticalAxis;
series.HorizontalAxis = chart.HorizontalAxis;
chart.Series.Add(series);
}
public void BuildSeriesWithUnsortedPositiveAndNegativeData ()
{
var series = new ScatterLineSeries();
series.Name =
"test4";
series.YValueBinding =
new GenericDataPointBinding<Tuple<double, string>, double>()
{
ValueSelector = tp => tp.Item1
};
series.XValueBinding =
new GenericDataPointBinding<Tuple<double, string>, double>()
{
ValueSelector = tp =>
double.Parse(tp.Item2)
};
series.ItemsSource =
new List<Tuple<double, string>>()
{
new Tuple<double, string>(8.134811961,"-1"),
new Tuple<double, string>(22.81600312,"0"),
new Tuple<double, string>(27.5164037,".5"),
new Tuple<double, string>(16.33063453,"-2"),
new Tuple<double, string>(23.59115799,"1"),
new Tuple<double, string>(11.09618849,"-.5"),
new Tuple<double, string>(16.9299272729203,"2.5"),
new Tuple<double, string>(18.08863131,"1.5")
};
series.Stroke =
new SolidColorBrush(Colors.DarkGreen);
series.VerticalAxis = chart.VerticalAxis;
series.HorizontalAxis = chart.HorizontalAxis;
chart.Series.Add(series);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
chart.Series.Clear();
BuildSeriesWithUnsortedPositiveAndNegativeData();
//Use this same data set in xcel and see how it shows.
//BuildSeriesWithSortedPositiveData();
//BuildSeriesWithUnsortedPositiveData();
//BuildSeriesWithSortedPositiveAndNegativeData();
}
}
Rank 1
<
Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
Title="MainWindow" Height="500" Width="600">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<telerik:RadCartesianChart Name="chart" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Name="VAxis" ElementBrush="Black" FontSize="9" FontWeight="Bold" LineStroke="Black"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:LinearAxis Name="HAxis" ElementBrush="Black" FontSize="9" FontWeight="Bold" LineStroke="Black"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="XY" StripLinesVisibility="XY">
<telerik:CartesianChartGrid.XStripeBrushes>
<SolidColorBrush Color="White"/>
</telerik:CartesianChartGrid.XStripeBrushes>
<telerik:CartesianChartGrid.YStripeBrushes>
<SolidColorBrush Color="White"/>
</telerik:CartesianChartGrid.YStripeBrushes>
</telerik:CartesianChartGrid>
</telerik:RadCartesianChart.Grid>
</telerik:RadCartesianChart>
<Button Content="Plot" Click="Button_Click" Height="30" Width="75" Grid.Row="1"/>
</Grid>
</
Window>
This is the expected behaviour of the control as we currently do not support built-in sorting descriptors for your data. The data will be displayed in the order it is provided to the series' ItemsSource unless you sort it before binding it to the chart. In your case, you need to change your datasource to List<Tuple<double, double>> and then sort the elements in your sequence by calling the OrderBy on Item2 like this:
public void BuildSeriesWithUnsortedPositiveAndNegativeData() { var series = new ScatterLineSeries(); series.Name = "test4"; List<Tuple<double, double>> data = new List<Tuple<double, double>>() { new Tuple<double, double>(8.134811961,-1), new Tuple<double, double>(22.81600312,0), new Tuple<double, double>(27.5164037,.5), new Tuple<double, double>(16.33063453,-2), new Tuple<double, double>(23.59115799,1), new Tuple<double, double>(11.09618849,-.5), new Tuple<double, double>(16.9299272729203, 2.5), new Tuple<double, double>(18.08863131, 1.5) }; List<Tuple<double, double>> orderedData = data.OrderBy(item => item.Item2).ToList(); series.ItemsSource = orderedData; series.YValueBinding = new GenericDataPointBinding<Tuple<double, double>, double>() { ValueSelector = tp => tp.Item1 }; series.XValueBinding = new GenericDataPointBinding<Tuple<double, double>, double>() { ValueSelector = tp => tp.Item2 }; series.Stroke = new SolidColorBrush(Colors.DarkGreen); series.VerticalAxis = chart.VerticalAxis; series.HorizontalAxis = chart.HorizontalAxis; chart.Series.Add(series); }Regards,
Evgenia
Telerik
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
Rank 1
We are aware of this solution and it works only if you have one series. If you read the initial post, i said we displaying multiple scater line series in the same graph and if their points are not exactly same, the sorting of individual seires does not help. If you read further in my post i have given the workaround to handle this. (ie., creating dummy series with all the points in sorted order and add that as first in your item source and hide it, so the x axis will look sorted fine).
Also, our main issue is the series is not not displayed same as excel for unsorted data case.
Thanks
Mohan.
I'm perplexed by your last post. Could you please be more specific on why sorting each of the series collections and then adding them to the chart is not an option to you? Even if your series have different number of items (I'm assuming that this is what you meant by saying that your series are "sparsed"), the solution I gave you in my last post will give you the result you required. Also please mind that with the approach given there's no need to combine all series data in a single collection to sort it.
If I'm omitting something you have already mentioned, let me know. It will be very helpful if you send us your sample data together with a runnable sample that demonstrates the unwanted behaviour you are observing when using this data.
Regards,
Telerik
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
Rank 1
We are already doing the sorting with individual series data. But when we plot multiple series it has issue. Please copy the below code and try it yourself. Hope you can get back quick.
Thanks
Mohan.
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private Color PositiveDataColor = Colors.DarkGreen;
private Color PositiveAndNegativeDataColor = Colors.Red;
private List<Tuple<double, string>> PostiveData = new List<Tuple<double, string>>()
{
new Tuple<double, string>(30.81600312,"7"),
new Tuple<double, string>(25.5164037,"6"),
new Tuple<double, string>(20.134811961,"5"),
new Tuple<double, string>(18.59115799,"4"),
new Tuple<double, string>(15.08863131,"3"),
new Tuple<double, string>(12.33063453,"2"),
new Tuple<double, string>(10.09618849,"1"),
new Tuple<double, string>(5.9299272729203,"0")
};
private List<Tuple<double, string>> PositiveAndNegativeData = new List<Tuple<double, string>>()
{
new Tuple<double, string>(20,"4"),
new Tuple<double, string>(16,"3"),
new Tuple<double, string>(14,"2"),
new Tuple<double, string>(12,"1"),
new Tuple<double, string>(10,"0"),
new Tuple<double, string>(8,"-1"),
new Tuple<double, string>(6,"-2"),
new Tuple<double, string>(4,"-3")
};
public void BuildSeries(string seriesName, List<Tuple<double, string>> seriesData, Color color)
{
var series = new ScatterLineSeries();
series.Name =
"seriesName";
series.YValueBinding =
new GenericDataPointBinding<Tuple<double, string>, double>()
{
ValueSelector = tp => tp.Item1
};
series.XValueBinding =
new GenericDataPointBinding<Tuple<double, string>, double>()
{
ValueSelector = tp =>
double.Parse(tp.Item2)
};
series.ItemsSource = seriesData;
series.Stroke =
new SolidColorBrush(color);
series.VerticalAxis = chart.VerticalAxis;
series.HorizontalAxis = chart.HorizontalAxis;
chart.Series.Add(series);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
if (chart.Series.Any()) chart.Series.Clear();
var sortedPositiveData = this.PostiveData.OrderBy(pd => pd.Item2).ToList();
var sortedPositiveAndNegativeData = this.PositiveAndNegativeData.OrderBy(pd => pd.Item2).ToList();
BuildSeries(
"Positive", sortedPositiveData,PositiveDataColor);
BuildSeries(
"PositiveAndNegative", sortedPositiveAndNegativeData, PositiveAndNegativeDataColor);
}
}
In fact the approach works perfectly in your application. Here's what causes the problem with the series where you have both positive and negative values for Item2:
Since you have created Item2 as string you want to order strings where some of them are numbers and others are numbers starting with "-" (the minus sign). Such string representations are confusing for OrderBy() framework method as it orders strings lexicographically. It doesn't know whether "-" should be before or after a number. As I mentioned in my first answer, please change your datasource to List<Tuple<double, double>> instead List<Tuple<double, string>> and both series will be drawn as expected.
Evgenia
Telerik
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.