[Solved] Question With Multiple Data Sources

[linnet]

Hi, I try to use a RaChart with multiple SeriesMappings like "Multiple Data Sources" in Sample, but sometimes the first SeriesMapping's data source was less then the others.
Please take a look into the attached image(snapshot.png).

This is my MainPage.xaml

<UserControl.DataContext>
    <example:ExampleViewModel />
</UserControl.DataContext>
<Grid x:Name="LayoutRoot" Background="White">
    <telerik:RadChart x:Name="analysisChart">
        <telerik:RadChart.SeriesMappings>
            <telerik:SeriesMapping LegendLabel="Population" ItemsSource="{Binding DataSource1}">
                <telerik:SeriesMapping.SeriesDefinition>
                    <telerik:StackedAreaSeriesDefinition />
                </telerik:SeriesMapping.SeriesDefinition>
                <telerik:ItemMapping DataPointMember="YValue" FieldName="Population" />
                <telerik:ItemMapping DataPointMember="XCategory" FieldName="Country" />
            </telerik:SeriesMapping>
            <telerik:SeriesMapping LegendLabel="Vehicles in circulation" ItemsSource="{Binding DataSource2}">
                <telerik:SeriesMapping.SeriesDefinition>
                    <telerik:StackedAreaSeriesDefinition />
                </telerik:SeriesMapping.SeriesDefinition>
                <telerik:ItemMapping DataPointMember="YValue" FieldName="Vehicles" />
                <telerik:ItemMapping DataPointMember="XCategory" FieldName="Country" />
            </telerik:SeriesMapping>
            <telerik:SeriesMapping LegendLabel="Road network length (km)" ItemsSource="{Binding DataSource3}">
                <telerik:SeriesMapping.SeriesDefinition>
                    <telerik:StackedAreaSeriesDefinition />
                </telerik:SeriesMapping.SeriesDefinition>
                <telerik:ItemMapping DataPointMember="YValue" FieldName="RoadNetwork" />
                <telerik:ItemMapping DataPointMember="XCategory" FieldName="Country" />
            </telerik:SeriesMapping>
        </telerik:RadChart.SeriesMappings>
    </telerik:RadChart>
</Grid>

And my ViewModel namely ExampleViewModel.cs

public class ExampleViewModel : ViewModelBase
{
    public IEnumerable<PopulationData> DataSource1
    {
        get
        {
            List<PopulationData> data = new List<PopulationData>();
            // I just delete this code. The same situation in my project.
            //data.Add(new PopulationData(82500000, "Germany"));
            data.Add(new PopulationData(43400000, "Spain"));
            data.Add(new PopulationData(60500000, "France"));
            data.Add(new PopulationData(58100000, "Italy"));
            return data;
        }
    }
    public IEnumerable<VehicleData> DataSource2
    {
        get
        {
            List<VehicleData> data = new List<VehicleData>();
            data.Add(new VehicleData(54500000, "Germany"));
            data.Add(new VehicleData(27600000, "Spain"));
            data.Add(new VehicleData(37100000, "France"));
            data.Add(new VehicleData(43100000, "Italy"));
            return data;
        }
    }
    public IEnumerable<RoadNetworkData> DataSource3
    {
        get
        {
            List<RoadNetworkData> data = new List<RoadNetworkData>();
            data.Add(new RoadNetworkData(62698100, "Germany"));
            data.Add(new RoadNetworkData(66620400, "Spain"));
            data.Add(new RoadNetworkData(10024860, "France"));
            data.Add(new RoadNetworkData(30538800, "Italy"));
            return data;
        }
    }
}

Then these are my Models

PopulationData.cs

public class PopulationData
{
    private long _population;
    private string _country;

    public PopulationData(long population, string country)
    {
        this._population = population;
        this._country = country;
    }

    public long Population
    {
        get
        {
            return this._population;
        }
        private set
        {
            this._population = value;
        }
    }

    public string Country
    {
        get
        {
            return this._country;
        }
        private set
        {
            this._country = value;
        }
    }
}

RoadNetworkData.cs

public class RoadNetworkData
{
    private long _roadNetwork;
    private string _country;

    public RoadNetworkData(long roadNetwork, string country)
    {
        this._roadNetwork = roadNetwork;
        this._country = country;
    }

    public long RoadNetwork
    {
        get
        {
            return this._roadNetwork;
        }
        private set
        {
            this._roadNetwork = value;
        }
    }

    public string Country
    {
        get
        {
            return this._country;
        }
        private set
        {
            this._country = value;
        }
    }
}

VehicleData.cs

public class VehicleData
{
    private long _vehicles;
    private string _country;

    public VehicleData(long vehicles, string country)
    {
        this._vehicles = vehicles;
        this._country = country;
    }

    public long Vehicles
    {
        get
        {
            return this._vehicles;
        }
        private set
        {
            this._vehicles = value;
        }
    }

    public string Country
    {
        get
        {
            return this._country;
        }
        private set
        {
            this._country = value;
        }
    }
}

Any idea?

Thank you for the support!

[Rosko]

Hello Linnet,

We investigated the code that you provided. The StackedArea support scenarios only when all data points coincide. In your case, you are omitting one data point for Germany, which is the reason for this strange behavior. If you omit all data points ,for example, the ones regarding Germany, the chart will be fine.

All the best,

Rosko

the Telerik team