Chart of the Week: Creating a .NET MAUI Column Chart to Visualize Yearly Box Office Data
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Chart of the Week Creating Column Chart for Yearly Box Office Data

Chart of the Week: Creating a .NET MAUI Column Chart to Visualize Yearly Box Office Data

In our Chart of the Week series, we feature a range of charting solutions and techniques to create eye-catching visualizations, and we extend a warm welcome to you. This series will explore charting libraries, frameworks, and best practices for designing effective charts and graphs.

In this blog, we’ll use the Syncfusion .NET MAUI column chart to create a graph displaying yearly U.S. box office revenue data. This control is supported on both desktop (Windows and MacCatalyst) and mobile platforms (Android and iOS).

Due to the 2020 pandemic, box office revenue dropped to nearly $0 in March 2020, and the revenue generated during the entire year of 2020 was 82% lower than 2019.

Let’s see the steps to visualize yearly box office data using the Syncfusion .NET MAUI column chart.

Step 1: Gathering yearly box office data

First, gather the data from the Box Office Mojo site. This blog will obtain the yearly gross box office revenue data from 1977 to 2022. Save this data as a CSV file.

Step 2: Preparing the data for the chart

Create the BoxOfficeModel class to hold the year data with the help of Year, TotalGross, and other properties.

Refer to the following code example.

public class BoxOfficeModel
{
    public BoxOfficeModel(double year, double totalGross, double grossLastYearDelta, double releases, double averageGross, string topMovie)
{ Year = year; TotalGross = totalGross; GrossLastYearDelta = grossLastYearDelta; AverageGross = averageGross; TopMovie = topMovie; Releases = releases; TotalGrossInBillion = TotalGross / 1000000000; } public double Year { get; set; } public double TotalGross { get; set; } public double TotalGrossInBillion { get; set; } public double GrossLastYearDelta { get; set; } public double AverageGross { get; set; } public double Releases { get; set; } public string TopMovie { get; set; } }

Then, generate the yearly box office revenue collection using the YearlyBoxOffice class and its RevenuesCollection property. Assign the CSV data to the yearly box office data collection using the ReadCSV method and store it in the RevenuesCollection property.

Additionally, expose the selection properties to meet the requirement for an interactive feature. In the section on adding interactive features, we will talk more about this.

public class YearlyBoxOffice : INotifyPropertyChanged
{
    List<BoxOfficeModel> yearlyRevenueCollection;
    public List<BoxOfficeModel> RevenueCollection
    {
        get
        {
            return yearlyRevenueCollection;
        }
        set
        {
            yearlyRevenueCollection = value;
            NotifyPropertyChanged();
        }
    }
    private int selectedIndex;
    public int SelectedIndex
    {
        get
        {
            return selectedIndex;
        }
        set
        {
            selectedIndex = value;
            SelectedYear = RevenueCollection[selectedIndex];
            NotifyPropertyChanged();
               
        }
    }
    private BoxOfficeModel selectedYear;
    public BoxOfficeModel SelectedYear
    {
        get
        {
            return selectedYear;
        }
        set
        {
            selectedYear = value;
            NotifyPropertyChanged();
        }
    }
 
    public YearlyBoxOffice()
    {
        RevenueCollection = new List<BoxOfficeModel>(ReadCSV());
        SelectedIndex = RevenueCollection.Count - 1;
        SelectedYear= RevenueCollection[selectedIndex];
    }
 
    public IEnumerable<BoxOfficeModel> ReadCSV()
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream inputStream = executingAssembly.GetManifestResourceStream("BoxOfficeChart.Resources.Raw.boxofficeyearlydata.csv"); 
        
        string? line;
        List<string> lines = new List<string>();
 
        using StreamReader reader = new StreamReader(inputStream);
        while ((line = reader.ReadLine()) != null)
        {
            lines.Add(line);
        }
           
        return lines.Select(line =>
        {
            string[] data = line.Split(',');
            return new BoxOfficeModel(Convert.ToDouble(data[0]), Convert.ToDouble(data[1]), Convert.ToDouble(data[2]), Convert.ToDouble(data[3]), Convert.ToDouble(data[4]), data[5]);
        });
    }
 
 
    public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }

Step 3: Configuring the Syncfusion .NET MAUI column chart

Now, configure the Syncfusion .NET MAUI column chart control by following this documentation.

Refer to the following code example.

<chart:SfCartesianChart Margin="10" BackgroundColor="White">
 <chart:SfCartesianChart.XAxes>
  <chart:CategoryAxis>
  </chart:CategoryAxis>
 </chart:SfCartesianChart.XAxes>
 
 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis>
  </chart:NumericalAxis>
 </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>

Step 4: Binding yearly box office data

Let’s bind the yearly box office data in the chart using the ColumnSeries.

Refer to the following code example.

<chart:ColumnSeries ItemsSource="{Binding RevenueCollection}" XBindingPath="Year" YBindingPath="TotalGrossInBillion">
</chart:ColumnSeries>

In this example, we’ve bound the RevenueCollection with the ItemSource property. We’ve also specified the XBindingPath and YBindingPath with the Year and TotalGrossInBillion properties, respectively.

Step 5: Customizing the chart appearance

Now, let’s customize the .NET MAUI column chart’s appearance by changing the axis element’s appearance, showing data labels in the columns, changing the column colors, and adding titles to the charts.

Set up the chart title and display the box office revenue for the selected year.

<chart:SfCartesianChart.Title>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label HorizontalOptions="Start" Margin="20,0,0,0" Grid.Column="0" Text="USA Yearly Box Office Revenue Since 1977" FontSize="14" />
        <VerticalStackLayout HorizontalOptions="End" Margin="40,0,40,0" Grid.Column="1">
            <Label Text="{Binding SelectedYear.TotalGross, StringFormat='${0:###,###,###}'}" FontAttributes="Bold" FontSize="{OnIdiom 12, Phone=12, Tablet=20, Desktop=20}" />
            <Border StrokeThickness="0" HorizontalOptions="End">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="5" />
                </Border.StrokeShape>
                <Grid ColumnDefinitions="Auto,Auto" BackgroundColor="#80BEB1AE">
                    <Image Grid.Column="0" Margin="4" WidthRequest="20" HeightRequest="20" VerticalOptions="Center" HorizontalOptions="Center"
                              Source="{Binding SelectedYear.GrossLastYearDelta,
                              Converter={StaticResource imageConverter}}" />
                    <Label VerticalTextAlignment="Center" Margin="4" Grid.Column="1" Text="{Binding SelectedYear.GrossLastYearDelta, StringFormat='{0:0.###}%'}" FontSize="{OnIdiom 12, Phone=10, Tablet=16, Desktop=16}" />
                </Grid>
            </Border>
        </VerticalStackLayout>
    </Grid>
</chart:SfCartesianChart.Title>

As mentioned in the following code example, customize the axis and its elements.

<chart:SfCartesianChart.XAxes>
 <chart:CategoryAxis ZoomFactor="0.24" ZoomPosition="0.76" ShowMajorGridLines="False" LabelPlacement="BetweenTicks">
  <chart:CategoryAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle  TickSize="0"/>
  </chart:CategoryAxis.MajorTickStyle>
  <chart:CategoryAxis.AxisLineStyle>
   <chart:ChartLineStyle  StrokeWidth="0"/>
  </chart:CategoryAxis.AxisLineStyle>
 </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>
 
<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis ShowMajorGridLines="False" IsVisible="False" RangePadding="AppendInterval" >
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

Refer to the following code example to configure the column color and enable data labels in columns with label formats.

<chart:ColumnSeries CornerRadius="100,100,0,0" Fill="#F7CB05"
                    ShowDataLabels="True"
                    ItemsSource="{Binding RevenueCollection}"
                    XBindingPath="Year"
                    YBindingPath="TotalGrossInBillion">
 <chart:ColumnSeries.DataLabelSettings>
  <chart:CartesianDataLabelSettings  >
   <chart:CartesianDataLabelSettings.LabelStyle>
    <chart:ChartDataLabelStyle LabelPadding="10" LabelFormat="$###.#B" />
   </chart:CartesianDataLabelSettings.LabelStyle>
  </chart:CartesianDataLabelSettings>
 </chart:ColumnSeries.DataLabelSettings>
</chart:ColumnSeries>

Step 6: Adding interactivity features

Let’s make our column chart more informative using the interactivity features, such as selection, auto-scrolling, and panning.

Selection features help us highlight a particular data point and raise the event or change the SelectedIndex property value based on the selected segments. Bind the SelectedIndex property to the chart’s title to show additional information based on the selection.

Refer to the following code example.

<chart:ColumnSeries.SelectionBehavior>
 <chart:DataPointSelectionBehavior SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" SelectionBrush="#BEB1AE" />
</chart:ColumnSeries.SelectionBehavior>

Now, add the AutoScrollingDelta property with the value 10 in the x-axis to show the last 10 sets of data in the axis.

<chart:SfCartesianChart.XAxes>
 <chart:CategoryAxis AutoScrollingDelta="10">
 </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

Then, enable the panning feature in the chart with the help of the ZoomPanBehavior.

<chart:SfCartesianChart.ZoomPanBehavior>
 <chart:ChartZoomPanBehavior EnablePinchZooming="False" EnableDoubleTap="False" EnablePanning="True" />
</chart:SfCartesianChart.ZoomPanBehavior>

After executing the previous code examples, we’ll get an output similar to the following GIF image.

Yearly Box Office Data Displayed in .NET MAUI Column Chart
Yearly Box Office Data Displayed in .NET MAUI Column Chart

GitHub reference

For more information, refer to the project Box Office Charts on GitHub.

Conclusion

Thanks for reading! In this blog, we have seen how to visualize yearly box office data using the Syncfusion .NET MAUI column chart control. We encourage you to try the steps discussed in this blog and share your thoughts in the comments below.

You can also contact us via our support forumsupport portal, or feedback portal. We are always happy to assist you!

See you in our next blog!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed