Adding Data to Series | ComponentOne FlexChart for UWP

Adding Data to Series

In This Topic

When it comes to adding data to series, FlexChart provides a powerful way through binding. You can bind series in FlexChart with multiple data sources, which enables you to combine data from multiple data sources. To plot data from multiple data sources, you need to use the Series.ItemsSource property.

See the following code for reference. Notice that the following code user the DataCreator.cs class to generate data.

XAML
Code

Tab Caption

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Chart:C1FlexChart x:Name="flexChart" ChartType="Scatter">
        <Chart:C1FlexChart.Series>
            <Chart:Series x:Name="Function1" SeriesName="Function 1" BindingX="XVals" 
            Binding="YVals"></Chart:Series>
            <Chart:Series x:Name="Function2" SeriesName="Function 2" BindingX="XVals" 
            Binding="YVals"></Chart:Series>
        </Chart:C1FlexChart.Series>
    </Chart:C1FlexChart>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="WideLayout">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="540"></AdaptiveTrigger>
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="NarrowLayout">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="flexChart.LegendPosition" Value="Top"></Setter>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

DataCreator.cs	Copy Code
class DataCreator { public delegate double MathActionDouble(double num); public delegate double MathActionInt(int num); public static List<DataPoint> Create(MathActionDouble function, double from, double to, double step) { var result = new List<DataPoint>(); var count = (to - from) / step; for (double r = from; r < to; r += step) { result.Add(new DataPoint() { XVals = r, YVals = function(r) }); } return result; } public static List<DataPoint> Create(MathActionInt function, int from, int to, int step) { var result = new List<DataPoint>(); var count = (to - from) / step; for (int r = from; r < to; r += step) { result.Add(new DataPoint() { XVals = r, YVals = function(r) }); } return result; } public static List<DataPoint> Create(MathActionDouble functionX, MathActionDouble functionY, int ptsCount) { var result = new List<DataPoint>(); for (double i = 0; i < ptsCount; i++) { result.Add(new DataPoint() { XVals = functionX(i), YVals = functionY(i) }); } return result; } } public class DataPoint { public double XVals { get; set; } public double YVals { get; set; } }

DataCreator.cs

Copy Code

class DataCreator
{
    public delegate double MathActionDouble(double num);
    public delegate double MathActionInt(int num);

 public static List<DataPoint> Create(MathActionDouble function, double from, double to, double step)
    {
        var result = new List<DataPoint>();
        var count = (to - from) / step;

        for (double r = from; r < to; r += step)
        {
            result.Add(new DataPoint()
            {
                XVals = r,
                YVals = function(r)
            });
        }
        return result;
    }

    public static List<DataPoint> Create(MathActionInt function, int from, int to, int step)
    {
        var result = new List<DataPoint>();
        var count = (to - from) / step;

        for (int r = from; r < to; r += step)
        {
            result.Add(new DataPoint()
            {
                XVals = r,
                YVals = function(r)
            });
        }
        return result;
    }

    public static List<DataPoint> Create(MathActionDouble functionX, MathActionDouble functionY, int ptsCount)
    {
        var result = new List<DataPoint>();

        for (double i = 0; i < ptsCount; i++)
        {
            result.Add(new DataPoint()
            {
                XVals = functionX(i),
                YVals = functionY(i)
            });
        }
        return result;
    }
}

public class DataPoint
{
    public double XVals { get; set; }
    public double YVals { get; set; }
}

MainWindow.xaml.cs	Copy Code
public sealed partial class MainPage : Page { List<DataPoint> _function1Source; List<DataPoint> _function2Source; public MainPage() { this.InitializeComponent(); this.Loaded += SeriesBinding_Loaded; } private void SeriesBinding_Loaded(object sender, RoutedEventArgs e) { SetupChart(); } void SetupChart() { flexChart.BeginUpdate(); this.Function1.ItemsSource = Function1Source; this.Function2.ItemsSource = Function2Source; flexChart.EndUpdate(); } public List<DataPoint> Function1Source { get { if (_function1Source == null) { _function1Source = DataCreator.Create(x => 2 * Math.Sin(0.16 * x), y => 2 * Math.Cos(0.12 * y), 160); } return _function1Source; } } public List<DataPoint> Function2Source { get { if (_function2Source == null) { _function2Source = DataCreator.Create(x => Math.Sin(0.1 * x), y => Math.Cos(0.15 * y), 160); } return _function2Source; } } }

MainWindow.xaml.cs

Copy Code

public sealed partial class MainPage : Page
{
    List<DataPoint> _function1Source;
    List<DataPoint> _function2Source;

    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += SeriesBinding_Loaded;
    }

    private void SeriesBinding_Loaded(object sender, RoutedEventArgs e)
    {
        SetupChart();
    }

    void SetupChart()
    {
        flexChart.BeginUpdate();
        this.Function1.ItemsSource = Function1Source;
        this.Function2.ItemsSource = Function2Source;
        flexChart.EndUpdate();
    }

    public List<DataPoint> Function1Source
    {
        get
        {
            if (_function1Source == null)
            {
                _function1Source = DataCreator.Create(x => 2 * Math.Sin(0.16 * x), y => 2 * 
                Math.Cos(0.12 * y), 160);
            }

            return _function1Source;
        }
    }

    public List<DataPoint> Function2Source
    {
        get
        {
            if (_function2Source == null)
            {
                _function2Source = DataCreator.Create(x => Math.Sin(0.1 * x), y => Math.Cos(0.15 * y), 160);
            }

            return _function2Source;
        }
    }
}