This project is read-only.

Using Charts as a DataTemplate for Grid-/ListView

Jun 30, 2013 at 1:43 PM
Edited Jun 30, 2013 at 3:17 PM
First of all, congratulations on an excellent solution, didn't find anything better elsewhere !!

I've been trying to implement multiple charts within a Grid- or ListView using <sparrow:SparrowChart> within the <DataTemplate> but i am having trouble Binding the source to a list of series. No Binding errors occur and the charts all display but without any Data. Any thoughts on this would be greatly appreciated. thx

Here is an Example of the code I am using:
XAML:
<GridView x:Name="Stockmarket_GridView" ItemsSource="{Binding}">
    <GridView.ItemTemplate>
        <DataTemplate>
            <sparrow:SparrowChart Width="800"  Height="628">
                <sparrow:SparrowChart.XAxis>
                    <sparrow:LinearXAxis/>
                </sparrow:SparrowChart.XAxis>
                <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
                </sparrow:SparrowChart.YAxis>
                <sparrow:LineSeries PointsSource="{Binding PriceHistory}" XPath="X" YPath="Y"/>
            </sparrow:SparrowChart>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>
The Binding Code in C#:
public class StockTimeStamp
{
    int time;

    public int X
    {
        get { return time; }
    }

    double price;

    public double Y
    {
        get { return price; }
    }

    /// <summary>
    /// Create a timestamp of the stockmarket for the current time
    /// </summary>
    /// <param name="X_AxisValue">X-Axis is the current time</param>
    /// <param name="Y_AxisValue">Y-Axis is the current price</param>
    public StockTimeStamp(int X_AxisValue, double Y_AxisValue)
    {
        time = X_AxisValue;
        price = Y_AxisValue;           
    }      
}
public class Stockmarket
{
        private ObservableCollection<StockTimeStamp> priceHistory;

        public ObservableCollection<StockTimeStamp> PriceHistory
        {
            get { return priceHistory; }
        }

        /// <summary>
        /// Creates a stockmarket with the given name and price
        /// </summary>
        public Stockmarket()
        {
            this.priceHistory = new ObservableCollection<StockTimeStamp>();
            for (int i = 0; i < 10; i++)
                this.priceHistory.Add(new StockTimeStamp(i, i * (i * 2)));
        }
}
This should create a steep ascending curve within in the Chart.

Than I bind in Code-Behind like this:
this.Stockmarket_GridView.DataContext = new List<Stockmarket>{ new Stockmarket(), new Stockmarket() };
Coordinator
Jul 2, 2013 at 8:12 AM
Hi,

I was able to reproduce the issue and i have logged a issue report for this.
https://sparrowtoolkit.atlassian.net/browse/SCW-7

I will fix it soon and let u know.

Thanks,
Vinoth Kumar J
Jul 2, 2013 at 8:29 AM
Thank you very much, it'd be great to be able to use it as a DataTemplate
Jun 24, 2014 at 8:06 PM
Hi, I am trying to use a chart in a data template. Did this issue ever get resolved?