Microcharts in Listview Using Xamarin

Question

I'm using xamarin.forms and I need to create graphs inside of listview, how to create graphs inside of listview using microcharts.

This is my code in xaml:

            <ListView.ItemTemplate>

                <DataTemplate>

                    <ViewCell>

                        <StackLayout Orientation="Vertical">

                            <!--<StackLayout.GestureRecognizers>
                                <TapGestureRecognizer
                                    Tapped="TargetList_Tapped"/>
                            </StackLayout.GestureRecognizers>-->
                            <Grid
                                  HeightRequest="10"/>
                            <customRenderer:CustomFrame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White" HeightRequest="30" Padding="15">

                                <StackLayout Orientation="Vertical" >
                                    <!--<Image x:Name="sam"/>-->


                                    <Label Text="{Binding AreaNo}"
                                       TextColor="Black"
                                       Font="Bold"/>

                                    <StackLayout Margin="0, -5, 0, 0" Orientation="Horizontal">
                                        <forms:ChartView x:Name="Chart1" HeightRequest="150"/>
                                        <Label Text="Last Covered On:" 
                                           TextColor="Black"
                                           Font="10"
                                           FontAttributes="Bold"
                                           Opacity="0.6"/>

                                        <Label Text="{Binding DateCovered}" 
                                           TextColor="Black"
                                           Font="10"
                                           FontAttributes="Bold"
                                           Opacity="0.6"/>
                                    </StackLayout>

                                </StackLayout>

                            </customRenderer:CustomFrame>
                            <customRenderer:CustomFrame Padding="0" Margin="0, -10, 0, 0">
                                <Image x:Name="sampleImage" Source="Rectangle_Inactive.png" HorizontalOptions="FillAndExpand" Aspect="AspectFill"/>
                            </customRenderer:CustomFrame>


                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

This is my code in xaml.cs:

namespace PrismUnityApp6.Views
{
public partial class MainPage : ContentPage
{

    List<Entry> entries = new List<Entry>
    {
        new Entry(200)
        {
            Color = SKColor.Parse("#008000"),
        },
        new Entry(400)
        {
            Color = SKColor.Parse("#FFFFFF")
        }

    };

    public MainPage()
    {

        InitializeComponent();

        Chart1.Chart = new RadialGaugeChart { Entries = entries };

    }
}

}

I tried this code but I can't get the name of the chart in xaml.cs file while using listview.

Any suggestion will be appreciated. Thank you.

Answer 1

You have chart inside ItemTemplate. Possibly there could many charts and they can't have same name. Correct approach is to use binding inside ItemTemplate.

Similar issue is discussed here.

This example is just for demonstration how it could possibly work. After you try this demo make sure you learn MVVM pattern and use it in your project.

The MainPage.xaml

<ContentPage.Content>
    <ListView
       x:Name="MyListview">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <microcharts:ChartView Chart="{Binding ChartData}" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage.Content>

MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    List<MyChart> MyCharts;

    public MainPage()
    {
        InitializeComponent();
        MyCharts = new List<MyChart>();
        PopulateCharts();
    }

    private void PopulateCharts()
    {
        MyCharts.Add(new MyChart() { ChartData = Chart1 });
        MyCharts.Add(new MyChart() { ChartData = Chart2 });
        MyListview.ItemsSource = MyCharts;
    }

    public class MyChart
    {
        public Chart ChartData { get; set; }
    }

    public Chart Chart1 => new BarChart()
    {
        Entries = new[]
        {
             new Microcharts.Entry(128)
             {
                 Label = "iOS",
                 ValueLabel = "128",
                 Color = SKColor.Parse("#b455b6")
             },
             new Microcharts.Entry(514)
             {
                 Label = "Shared",
                 ValueLabel = "514",
                 Color = SKColor.Parse("#3498db")
        }},
        BackgroundColor = SKColors.White
    };


    public Chart Chart2 => new BarChart()
    {
        Entries = new[]
        {
             new Microcharts.Entry(128)
             {
                 Label = "Android",
                 ValueLabel = "128",
                 Color = SKColor.Parse("#b455b6")
             },
             new Microcharts.Entry(514)
             {
                 Label = "UWP",
                 ValueLabel = "514",
                 Color = SKColor.Parse("#3498db")
        }},
        BackgroundColor = SKColors.Yellow
    };
}

Also in the blog post that I mentioned there is a nice example using MVVM pattern here on this link.