Question

I have a service that will return 0 or more sets of data. The data structure looks like this:

public class ReportData
{
    public List<SeriesSet> SeriesSet {get;set;}
}

public class SeriesSet
{
    public DateTime ItemDate {get;set;}
    public List<SeriesItem> SeriesItem {get;set;}
}

public class SeriesItem
{
    public string ItemType {get;set;}
    public double ItemValue {get;set;}
}

My Service will return ReportData which contains a List of SeriesSets. SeriesSet data contains a List of SeriesItems. Each SeriesItem in SeriesSet has to be a data item in a corresponding series in my chart (i.e. a separate line or bar) for that SeriesSet’s particular date. I want to dynamically create the series in the chart based on what comes back from the service.

I think I need to first identify the different ItemTypes that are returned then based on that create the series mappings.

One of the problems I’m running into is the data comes from a web service which is asynchronous. How do I create series mappings with proper bindings in my view when the data comes into my viewmodel?

From the way I’ve been creating charts it almost seems like I need to have my series mappings defined before I get the data from my view model?

Any pointers?

Answer 1

I did something similar to this recently. My SeriesMappings’ ItemSources were bound, though the SeriesMappings themselves and the bindings were created in code-behind.

I had my view model fire an event when its data was all loaded. The view handled the event and added new SeriesMapping objects to the chart. Here’s some of the code for creating the SeriesMapping objects.

void AddBarSeriesMapping(string itemsSourceBindingPath, string legendLabel, string itemFieldName = null)
{
    this.AddSeriesMapping(itemsSourceBindingPath, legendLabel, CreateBarSeriesDefinition(), itemFieldName);
}

void AddLineSeriesMapping(string itemsSourceBindingPath, string legendLabel, string itemFieldName = null)
{
    this.AddSeriesMapping(itemsSourceBindingPath, legendLabel, CreateLineSeriesDefinition(), itemFieldName);
}

void AddSeriesMapping(string itemsSourceBindingPath, string legendLabel, ISeriesDefinition seriesDefinition, string itemFieldName)
{
    //
    // Set label and type (bar/line/etc).
    //
    SeriesMapping seriesMapping = new SeriesMapping
    {
        ChartArea = this.Chart.DefaultView.ChartArea,
        LegendLabel = legendLabel,
        SeriesDefinition = seriesDefinition
    };

    //
    // Bind to items source.
    //
    BindingOperations.SetBinding(seriesMapping, SeriesMapping.ItemsSourceProperty, new Binding(itemsSourceBindingPath));

    //
    // Map items to the Y value, and set field name if the items source is not a list of numeric values.
    //
    var itemMapping = new ItemMapping { DataPointMember = DataPointMember.YValue };
    if (itemFieldName != null)
    {
        itemMapping.FieldName = itemFieldName;
    }
    seriesMapping.ItemMappings.Add(itemMapping);

    this.Chart.SeriesMappings.Add(seriesMapping);
}

private static ISeriesDefinition CreateBarSeriesDefinition()
{
    return new BarSeriesDefinition
    {
        ShowItemLabels = false,
        ShowItemToolTips = true,
        ItemToolTipFormat = "#Y",
        InteractivitySettings = DefaultInteractivitySettings
    };
}

private static ISeriesDefinition CreateLineSeriesDefinition()
{
    return new LineSeriesDefinition
    {
        ShowItemLabels = false,
        ShowItemToolTips = true,
        ItemToolTipFormat = "#Y",
        InteractivitySettings = DefaultInteractivitySettings
    };
}

private static InteractivitySettings DefaultInteractivitySettings;

static ChartSummaryView()
{
    DefaultInteractivitySettings = new InteractivitySettings
    {
        HoverScope = InteractivityScope.Series,
        SelectionScope = InteractivityScope.Item
    };
}

UPDATE:

In order for the view model to communicate data and mapping information to the view, perhaps you could do something like this.

public class SeriesMappingInfo
{
    public int DataSourceIndex { get; set; } // Index in ViewModel.DataSources
    public string LegendLabel { get; set; }
    // Other properties to tell the view how to create the mapping...
}

public class ViewModel
{
    public event EventHandler DataLoaded;
    public double?[][] DataSources { get; private set; }
    public SeriesMappingInfo[] Mappings { get; private set; }

    private void OnDataRetrievedFromServer(ReportData data)
    {
        // TODO: Translate data into something SeriesMappings can bind to, and set DataSources property.
        // TODO: Assemble info for creating SeriesMappings, and set Mappings property.

        // Tell the view everything is ready.
        if (this.DataLoaded != null)
        {
            this.DataLoaded(this, EventArgs.Empty);
        }
    }
}

public class View : UserControl
{
    public View()
    {
        this.DataContextChanged += new DependencyPropertyChangedEventHandler(View_DataContextChanged);
        // InitializeComponent, etc.
    }

    private void View_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        var viewModel = e.NewValue as ViewModel;
        if (viewModel != null)
        {     
            this.CreateSeriesMappings(viewModel.Mappings);
            viewModel.DataLoaded += new EventHandler(ViewModel_DataLoaded);
        }
    }

    private void ViewModel_DataLoaded(object sender, EventArgs e)
    {
        var viewModel = sender as ViewModel;
        if (viewModel != null)
        {
            this.CreateSeriesMappings(viewModel.Mappings);
        }
    }

    private void CreateSeriesMappings(SeriesMappingInfo[] seriesMappingInfo)
    {
        var chartSeriesMappings = seriesMappingInfo.Select(m =>
        {
            // TODO: Create mapping. The binding would look something like this:
            var seriesMapping = new SeriesMapping();
            BindingOperations.SetBinding(seriesMapping, SeriesMapping.ItemsSourceProperty, new Binding(String.Format("DataSources[{0}]", m.DataSourceIndex)));
            return seriesMapping;
        });

        // TODO: Give these mappings to the chart control.
    }
}