Chart of the Week: Creating a .NET MAUI Column Chart to Visualize the Corporate Investment in AI
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (174).NET Core  (29).NET MAUI  (207)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (217)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (133)JavaScript  (221)Microsoft  (119)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (917)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (51)Windows Forms  (61)WinUI  (68)WPF  (159)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (148)Chart  (131)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (629)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (7)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  (507)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)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  (387)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (593)What's new  (332)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Chart of the Week Creating a .NET MAUI Column Chart to Visualize the Corporate Investment in AI

Chart of the Week: Creating a .NET MAUI Column Chart to Visualize the Corporate Investment in AI

TLDR: Gathering and binding the data on the corporates’ investment in AI over the years and visualizing the data using the Syncfusion .NET MAUI Column Chart. We’ll also customize the chart’s title, axis, series, background view, and other elements for better readability.

Welcome to the Chart of the Week blog series! 

Artificial intelligence (AI) has recently emerged as a critical area for corporate funding, with businesses across diverse sectors recognizing its capacity to revolutionize their operations. The allure of AI investments lies in their ability to enhance productivity, drive innovation, and secure a competitive advantage.

The year 2021 is notable for AI investment, as the sector has received a record-breaking $276.1 billion in funding. This surge in financial backing reflects a growing confidence in AI’s ability to catalyze innovation, elevate efficiency, and transform industries on a global scale.

The following image demonstrates the chart that we intend to construct.Visualizing the corporates’ investments in AI data using the Syncfusion .NET MAUI Column Chart

Let’s delve into the steps to visualize corporates’ AI investment data using the Syncfusion .NET MAUI Column Chart.

Step 1: Gathering the data on AI investment

Before proceeding, we should gather the data for the chart. Here, we’ll refer to the Stanford University analysis, which provides comprehensive information on corporate investment in AI and extract data from it. Specifically, we examined the page number 184.

Step 2: Populate the data for the chart

Define the ArtificialIntelligenceModel class with the following properties:

  • Year – To represent the year of investment.
  • Value – To hold the invested amount in U.S. billion dollars.

Refer to the following code example.

public class ArtificialIntelligenceModel
  {
      public string Year { get; set; }
      public double Value { get; set; }

      public ArtificialIntelligenceModel(string year, double value)
      {
          Year = year;
          Value = value;
      }
  }

Now, generate the data collection that illustrates the investment details using the ArtificialIntelligenceData class with the Data property.

public class ArtificialIntelligenceData
  {
      public List<ArtificialIntelligenceModel> Data { get; set; }

      public ArtificialIntelligenceData()
      {
          Data = new List<ArtificialIntelligenceModel>()
           {
              new ArtificialIntelligenceModel("2022",189.59),
              new ArtificialIntelligenceModel("2021",276.14),
              new ArtificialIntelligenceModel("2020",146.74),
              new ArtificialIntelligenceModel("2019",95.57),
              new ArtificialIntelligenceModel("2018",79.62),
              new ArtificialIntelligenceModel("2017",53.72),
              new ArtificialIntelligenceModel("2016",33.83),
              new ArtificialIntelligenceModel("2015",25.43),
              new ArtificialIntelligenceModel("2014",19.04),
              new ArtificialIntelligenceModel("2013",14.57),
          };
      }
  }

Step 3: Configure the Syncfusion .NET MAUI Cartesian Charts 

Let’s configure the Syncfusion .NET MAUI Cartesian Charts control using this documentation.

Refer to the following code example.

<chart:SfCartesianChart>
      

 <chart:SfCartesianChart.XAxes>
  <model:CategoryAxisExt>
  </model:CategoryAxisExt>
 </chart:SfCartesianChart.XAxes>

 <chart:SfCartesianChart.YAxes>
  <model:NumericalAxisExt>
  </model:NumericalAxisExt>
 </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

Step 4: Bind the investment data to the .NET MAUI Column Chart

Then, create a Column Chart to display the AI investment data for different years. The following code example demonstrates how to bind the collected data to our chart.

<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Year" YBindingPath="Value"></chart:ColumnSeries>

Here, we’ve bound the Data to the ItemsSource property. The XBindingPath and YBindingPath properties are bound to the Year and Value properties, respectively. 

Step 5: Customize the chart appearance

Let’s customize the appearance of the .NET MAUI Column Chart for better visualization. 

Adding the chart title

Adding a title to the Chart improves the data’s readability. Refer to the following code example.

<chart:SfCartesianChart.Title>
 <Grid>

  <Grid.RowDefinitions>
   <RowDefinition Height="Auto"/>
   <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="50"/>
   <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <Image Grid.Column="0" Grid.RowSpan="2" Source="technology.png" Margin="0,-25,0,20" HeightRequest="100" WidthRequest="{OnPlatform Android=40,iOS=40, Default=50}"/>

  <StackLayout Grid.Row="0" Grid.Column="1" Margin="5,0,0,0" HorizontalOptions="Start" Orientation="Vertical">
   <Label Text="Decoding AI Investments: A Closer Look at Company Spending" FontSize="24" FontAttributes="Bold" TextColor="#666666" FontFamily="AntaRegular"/>
   <Label Text="Total global corporate investment in artificial intelligence (in billions of U.S. dollars)" FontSize="{OnPlatform Android=14,iOS=14, Default=17}" TextColor="Gray" Margin="0,2,0,0" FontFamily="AntaRegular"/>
  </StackLayout>
  
  <StackLayout Grid.Row="1" Grid.Column="1" Orientation="Horizontal" Margin="15,-15,0,0" >
   <Rectangle HeightRequest="15" WidthRequest="40" RadiusX="5" RadiusY="5" Fill="#0DAA97" />
   <Label Text="< 50" FontSize="15" Margin="7,13,0,0" />
   <Rectangle HeightRequest="15" WidthRequest="40" RadiusX="5" RadiusY="5" Fill="#9455FC" Margin="10,0,0,0" />
   <Label Text="< 100" Margin="7,13,0,0" FontSize="15"/>
   <Rectangle HeightRequest="15" WidthRequest="40" RadiusX="5" RadiusY="5" Fill="#EA8D03" Margin="10,0,0,0" />
   <Label Text="> 100" Margin="7,13,0,0" FontSize="15"/>
  </StackLayout>
 
 </Grid>
</chart:SfCartesianChart.Title>

Customizing the chart axis

Here, we will enhance the appearance of the axis line by initializing the chart axis in the code behind. Refer to the following code example.

C#

public class CategoryAxisExt : CategoryAxis
{
}

public class NumericalAxisExt : NumericalAxis
{
}

In the above code example, we’ve created an extension for the standard CategoryAxis with the CategoryAxisExt class and NumericalAxis with the NumericalAxisExt class.

Here, we will replicate the chart’s axes with the arrow mark at the ends. To achieve this, override the DrawAxisLine method within the CategoryAxisExt and the NumericalAxisExt classes. This is a crucial step in customizing the axis line.

public class CategoryAxisExt : CategoryAxis
{
   protected override void DrawAxisLine(ICanvas canvas, float x1, float y1, float x2, float y2)
   {
       var path = new PathF();
       path.MoveTo(x1 + 20, y1);
       path.LineTo(x2, y2);

       // Calculate the direction vector of the line.
       float dx = x2 - x1;
       float dy = y2 - y1;

       // Normalize the direction vector.
       float length = (float)Math.Sqrt(dx * dx + dy * dy);
       float nx = dx / length;
       float ny = dy / length;

       // Length of the arrowhead.
       float arrowLength = 15;

       // Calculate points for the arrowhead.
       float arrowPoint1X = x1 + nx * arrowLength + ny * arrowLength / 2;
       float arrowPoint1Y = y1 + ny * arrowLength - nx * arrowLength / 2;
       float arrowPoint2X = x1 + nx * arrowLength - ny * arrowLength / 2;
       float arrowPoint2Y = y1 + ny * arrowLength + nx * arrowLength / 2;

       // Draw lines for the arrowhead.
       path.MoveTo(x1 + 20, y1);
       path.LineTo(arrowPoint1X + 25, arrowPoint1Y - 5);
       path.MoveTo(x1 + 20, y1);
       path.LineTo(arrowPoint2X + 25, arrowPoint2Y + 5);

       canvas.StrokeColor = (new SolidColorBrush(Color.FromArgb("#1D5B6F"))).Color;

       #if ANDROID || IOS
          canvas.StrokeSize = 1;

       #elif MACCATALYST || WINDOWS
          canvas.StrokeSize = 3;

       #endif
          canvas.DrawPath(path);
   }
}

public class NumericalAxisExt : NumericalAxis
{
   protected override void DrawAxisLine(ICanvas canvas, float x1, float y1, float x2, float y2)
   {
       var path = new PathF();
       path.MoveTo(x1, y1 + 20);
       path.LineTo(x2, y2);

       // Calculate the direction vector of the line.
       float dx = x2 - x1;
       float dy = y2 - y1;

       // Normalize the direction vector.
       float length = (float)Math.Sqrt(dx * dx + dy * dy);
       float nx = dx / length;
       float ny = dy / length;

       // Length of the arrowhead.
       float arrowLength = 12;

       // Calculate points for the arrowhead.
       float arrowPoint1X = x1 + nx * arrowLength + ny * arrowLength / 2;
       float arrowPoint1Y = y1 + ny * arrowLength - nx * arrowLength / 2;
       float arrowPoint2X = x1 + nx * arrowLength - ny * arrowLength / 2;
       float arrowPoint2Y = y1 + ny * arrowLength + nx * arrowLength / 2;

       // Draw lines for the arrowhead.
       path.MoveTo(x1, y1 + 20 );
       path.LineTo(arrowPoint1X + 5, arrowPoint1Y + 25);
       path.MoveTo(x1, y1 + 20 );
       path.LineTo(arrowPoint2X - 5, arrowPoint2Y + 25);

       canvas.StrokeColor = (new SolidColorBrush(Color.FromArgb("#1D5B6F"))).Color;

       #if ANDROID || IOS
          canvas.StrokeSize = 1;

       #elif MACCATALYST || WINDOWS
          canvas.StrokeSize = 3;

       #endif
          canvas.DrawPath(path);
   }
}

Let’s customize the other elements in the chart axis using the following properties: 

  • ShowMajorGridLines: To customize the visibility of the major grid lines.
  • LabelStyle: To customize the style of the axis labels.
  • MajorTickStyle: To customize the style of the major tick lines.

XAML

<chart:SfCartesianChart.XAxes>
 <model:CategoryAxisExt IsInversed="True" PlotOffsetStart="40" ShowMajorGridLines="False">
  <chart:CategoryAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle StrokeWidth="0"/>
  </chart:CategoryAxis.MajorTickStyle>
 </model:CategoryAxisExt>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <model:NumericalAxisExt PlotOffsetEnd="60" ShowMajorGridLines="False">
  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle StrokeWidth="0"/>
  </chart:NumericalAxis.MajorTickStyle>
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle FontSize="1" TextColor="Transparent"/>
  </chart:NumericalAxis.LabelStyle>
 </model:NumericalAxisExt>
</chart:SfCartesianChart.YAxes>

Customizing the series appearance

Let’s enhance the appearance of the chart’s series by customizing the corner radius and column colors.

XAML

<chart:ColumnSeries CornerRadius="10,10,0,0" PaletteBrushes="{Binding CustomBrushes}"></chart:ColumnSeries>

C#

public class ArtificialIntelligenceData
{
    public ObservableCollection<Brush> CustomBrushes {  get; set; }

    public ArtificialIntelligenceData()
    {
        CustomBrushes = new ObservableCollection<Brush>();
        foreach (var item in Data)
        {
           if (item.Value < 50)
           {
              // Add the brush for values less than 50.
              CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#0DAA97")));
           }
           else if (item.Value > 50 && item.Value < 100)
           {
              // Add a different brush for values between 50 to 100.
              CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#9455FC")));
           }
           else
           {
              // Add the default brush for values greater than 100.
                  CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#EA8D03")));
           }
        }
    }
}

In the code example above, we have specified the column color based on the investment value.

Adding the data labels

We can make the data easier to read by enabling and customizing the chart data labels.

<chart:ColumnSeries ShowDataLabels="True">
 <chart:ColumnSeries.DataLabelSettings>
  <chart:CartesianDataLabelSettings LabelPlacement="Outer" UseSeriesPalette="False">
   <chart:CartesianDataLabelSettings.LabelStyle>
    <chart:ChartDataLabelStyle LabelFormat="#.#" FontSize="13" TextColor="Black"/>
   </chart:CartesianDataLabelSettings.LabelStyle>
  </chart:CartesianDataLabelSettings>
 </chart:ColumnSeries.DataLabelSettings>
</chart:ColumnSeries>

Incorporating a plot area background view

Finally, incorporate a plot area background view to make our Column Chart more informative and attractive. With this, we can add any view to the chart plot area to include relevant data.

<chart:SfCartesianChart.PlotAreaBackgroundView>
 <AbsoluteLayout>
  <Image Source="artificialintelligence.png" 
         AbsoluteLayout.LayoutBounds="0.2,0.4,-1,-1"
         AbsoluteLayout.LayoutFlags="PositionProportional"
         HeightRequest="{OnPlatform Android=75,iOS=75, Default=150}"
         WidthRequest="{OnPlatform Android=75,iOS=75, Default=150}"/>
 </AbsoluteLayout>
</chart:SfCartesianChart.PlotAreaBackgroundView>

After executing the previous code examples, the output will resemble the following image.

Visualizing the corporates’ investments in AI data using the Syncfusion .NET MAUI Column Chart
Visualizing the corporates’ investments in AI data using the Syncfusion .NET MAUI Column Chart

GitHub reference

For more details, refer to Visualizing the Corporates’ investment in AI using .NET MAUI Column Chart GitHub demo.

Supercharge your cross-platform apps with Syncfusion's robust .NET MAUI controls.

Conclusion

Thank you for reading! In this blog, we have explored how to visualize the data on corporates’ investment in AI using the Syncfusion .NET MAUI Column Chart. Please follow the steps outlined in this blog and share your feedback in the comments section below. 

The existing customers can download the new version of Essential Studio on the License and Downloads page. If you are not a Syncfusion customer, try our 30-day free trial to check out our incredible features. 

You can also contact us via our support forum, support portal, or feedback portal. We are always eager to help you! 

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