Chart of the Week: Creating a WinUI Spline Area Chart for Top Google Investing Searches in 2022
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  (215)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  (915)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#  (147)Chart  (131)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (628)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  (592)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 WinUI Spline Area Chart for Top Google Investing Searches in 2022

Chart of the Week: Creating a WinUI Spline Area Chart for Top Google Investing Searches in 2022

Welcome to our Chart of the Week blog series!

In this blog, we’ll visualize the top Google search trends for investing using the Syncfusion WinUI Spline Area Chart. In an investment landscape in constant flux, staying attuned to these trends is important.

Such insights empower investors and analysts, offering a more profound comprehension of market dynamics. By diving into the search trends of 2022, one can unearth significant information on market sentiment, identify burgeoning investment opportunities, and gain perspective on trending financial matters.

Refer to the following image.Visualizing top Google searches related to investing in 2022 using the WinUI Spline Area Chart

Let’s see the steps to visualize the top Google searches related to investing using the Syncfusion WinUI Spline Area Chart.

Step 1: Gathering the data

Before creating the chart, we need to gather the data on the top Google searches related to investing. For this demo, get the data from Jan. 2022 to Dec. 2022, which can be downloaded as a CSV file.

Step 2: Prepare the data for the chart

Create the GoogleSearchModel class to hold the data with Year and Value properties.

Refer to the following code example.

public class GoogleSearchModel
{
     public DateTime Year { get; set; }
     public double Value { get; set; }
     
     public GoogleSearchModel(DateTime year, double value)
     {
        Year = year;
        Value = value;
     }
}

Next, generate the top Google search data collection with the help of the GoogleSearchViewModel class and separate properties for each series.

Convert the CSV data to a collection using the ReadCSV method and store it in the collection property.

public class GoogleSearchViewModel : INotifyPropertyChanged
{
   private List<GoogleSearchModel> greatResignation;
   private List<GoogleSearchModel> oilPrice;
   private List<GoogleSearchModel> housingBubble;
   private List<GoogleSearchModel> valueInvesting;
   private List<GoogleSearchModel> bitCoin;
   private List<GoogleSearchModel> recession;
   private List<GoogleSearchModel> inflation;
   private List<GoogleSearchModel> uSDollar;
   private List<GoogleSearchModel> layoffs;
   private List<GoogleSearchModel> interestRate;
   
   public List<GoogleSearchModel> GreatResignation
   {
       get
       { return greatResignation; }
       set
       {
           greatResignation = value;
           NotifyPropertyChanged(nameof(GreatResignation));
       }
   }      
       
   public List<GoogleSearchModel> OilPrice
   {
       get { return oilPrice; }
       set
       {
          oilPrice = value; NotifyPropertyChanged(nameof(OilPrice));
       }
   }
       
   public List<GoogleSearchModel> HousingBubble
   {
       get { return housingBubble; }
       set
       {
          housingBubble = value; NotifyPropertyChanged(nameof(HousingBubble));
       }
   }
        
   public List<GoogleSearchModel> ValueInvesting
   {
        get { return valueInvesting; }
        set
        {
           valueInvesting = value; NotifyPropertyChanged(nameof(ValueInvesting));
        }
   }
       
   public List<GoogleSearchModel> BitCoin
   {
        get { return bitCoin; }
        set
        {
           bitCoin = value; NotifyPropertyChanged(nameof(BitCoin));
        }
   }
        
   public List<GoogleSearchModel> Recession
   {
        get { return recession; }
        set
        {
           recession = value; NotifyPropertyChanged(nameof(Recession));
        }
   }
        
   public List<GoogleSearchModel> Inflation
   {
        get { return inflation; }
        set
        {
           inflation = value; NotifyPropertyChanged(nameof(Inflation));
        }
   }
        
   public List<GoogleSearchModel> USDollar
   {
        get { return uSDollar; }
        set
        {
            uSDollar = value; NotifyPropertyChanged(nameof(USDollar));
        }
   }       
      
   public List<GoogleSearchModel> Layoffs
   {
        get { return layoffs; }
        set
        {
            layoffs = value; NotifyPropertyChanged(nameof(Layoffs));
        }
   }
       
   public List<GoogleSearchModel> InterestRate
   {
        get { return interestRate; }
        set
        {
             interestRate = value; NotifyPropertyChanged(nameof(InterestRate));
        }
   }
   
public GoogleSearchViewModel() { GreatResignation = new List<GoogleSearchModel>(ReadCSV("SplineAreaSample.Resource.multiTimeline.csv")); OilPrice = new List<GoogleSearchModel>(ReadCSV("SplineAreaSample.Resource.OilPrice.csv")); HousingBubble = new List<GoogleSearchModel>(ReadCSV("SplineAreaSample.Resource.HousingBubble.csv")); ValueInvesting = new List<GoogleSearchModel>(ReadCSV("SplineAreaSample.Resource.ValueInvsesting.csv")); BitCoin = new List<GoogleSearchModel>(ReadCSV("SplineAreaSample.Resource.BitCoin.csv")); Recession = new List<GoogleSearchModel>(ReadCSV("SplineAreaSample.Resource.Recession.csv")); Inflation = new List<GoogleSearchModel>(ReadCSV("SplineAreaSample.Resource.Inflation.csv")); USDollar = new List<GoogleSearchModel>(ReadCSV("SplineAreaSample.Resource.USDollar.csv")); Layoffs = new List<GoogleSearchModel>(ReadCSV("SplineAreaSample.Resource.Layoffs.csv")); InterestRate = new List<GoogleSearchModel>(ReadCSV("SplineAreaSample.Resource.InterestRate.csv")); }
private IEnumerable<GoogleSearchModel> ReadCSV(string resourceStream) { Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly; Stream inputStream = executingAssembly.GetManifestResourceStream(resourceStream); 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(','); DateTime date = DateTime.ParseExact(data[0], "yyyy-MM-dd", CultureInfo.InvariantCulture); return new GoogleSearchModel((date), Convert.ToDouble(data[1])); }); } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged([CallerMemberName] string propertyName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }

Step 3: Configuring the Syncfusion WinUI Cartesian charts control

Configure the Syncfusion WinUI Cartesian charts control using this documentation.

Refer to the following code example.

<chart:SfCartesianChart>
 <chart:SfCartesianChart.XAxes>
  <Chart:CategoryAxis/>
 </chart:SfCartesianChart.XAxes>
 
 <chart:SfCartesianChart.YAxes>
  <Chart:NumericalAxis/>
 </chart:SfCartesianChart.YAxes>
    
</chart:SfCartesianChart>

Step 4: Binding data to WinUI Spline Area Chart

Use the Syncfusion SplineAreaSeries class to bind the data to the chart.

Refer to the following code example.

<Chart:SplineAreaSeries 
       ItemsSource="{Binding HousingBubble}"
       XBindingPath="Year"
       YBindingPath="Value">
</Chart:SplineAreaSeries>

In this example, we’ve bound the chart to the GoogleSearchViewModel property containing our Google search data.

Step 5: Customizing the chart appearance

We can customize the chart’s appearance by hiding the x- and y-axes in the chart axis element, changing the spline area color, using style to avoid repeating code, and adding titles to the charts.

Split the view into three columns and display the chart title.

<Grid.ColumnDefinitions>
 <ColumnDefinition Width="0.5*"></ColumnDefinition>
 <ColumnDefinition Width="1.5*"></ColumnDefinition>
 <ColumnDefinition Width="7.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>

<TextBlock Text="Economic and Investing Trends: A Year in Review(2022)" Grid.Column="2" Grid.Row="0" FontSize="20" HorizontalTextAlignment="Center"></TextBlock>

Adjust the axis settings and hide the grid lines and the x- and y-axes to achieve the view as shown in the following code example.

<chart:SfCartesianChart.XAxes>
 <chart:DateTimeAxis ShowMajorGridLines="False" ShowMinorGridLines="False" Visibility="Collapsed" >
 </Chart:DateTimeAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis ShowMajorGridLines="False" ShowMinorGridLines="False" Visibility="Collapsed"></chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

Configure the images for the top Google search companies in the first column. The following shows the code example for the Talent Exodus series. Configure the chart for the other series in the same way.

<ImageIcon Source="Image/Talent Exodus.png" Grid.Column="0" Grid.Row="3" Margin="20,-25,0,0"></ImageIcon>

Now, configure the company names in the second column, as shown in the following code example.

<TextBlock Text="Talent ExodusGrid.Column="1" Grid.Row="1" Margin="20,30,0,0"></TextBlock>

We can set the margin, height, width, color, and more for each view separately. However, to avoid repetition, let’s use the style shown in the following code example.

<Grid.Resources>
 <ResourceDictionary>
  <Style TargetType="chart:DateTimeAxis">
   <Setter Property="ShowMajorGridLines" Value="False"></Setter>
   <Setter Property="ShowMinorGridLines" Value="False"></Setter>
   <Setter Property="Visibility" Value="Collapsed"></Setter>
  </Style>
  <Style TargetType="chart:NumericalAxis">
   <Setter Property="ShowMajorGridLines" Value="False"></Setter>
   <Setter Property="ShowMinorGridLines" Value="False"></Setter>
   <Setter Property="Visibility" Value="Collapsed"></Setter>
  </Style>
  <Style TargetType="chart:SfCartesianChart">
   <Setter Property="Height" Value="30"></Setter>
   <Setter Property="Width" Value="950"></Setter>
   <Setter Property="Margin" Value="0,-50,0,0"></Setter>
   <Setter Property="VerticalAlignment" Value="Center"></Setter>
  </Style>
  <Style TargetType="chart:SplineAreaSeries">
   <Setter Property="Fill" Value="#87CEEB"></Setter>
   <Setter Property="XBindingPath" Value="Year"></Setter>
   <Setter Property="YBindingPath" Value="Value"></Setter>
  </Style>
  <Style TargetType="ImageIcon">
   <Setter Property="Width" Value="30"></Setter>
   <Setter Property="Margin" Value="20,-35,0,0"></Setter>
   <Setter Property="VerticalAlignment" Value="Center"></Setter>
  </Style>
  <Style TargetType="TextBlock">
   <Setter Property="Margin" Value="20,-35,0,0"></Setter>
   <Setter Property="VerticalAlignment" Value="Center"></Setter>
  </Style>
 </ResourceDictionary>
</Grid.Resources>

Finally, configure the Spline Area Chart for each series in the third column.

<chart:SfCartesianChart Grid.Column="3" Grid.Row="1" Margin="0,-5,0,0">
 <chart:SfCartesianChart.XAxes>
  <Chart:DateTimeAxis/>
 </chart:SfCartesianChart.XAxes>
 <chart:SfCartesianChart.YAxes>
  <Chart:NumericalAxis/>
 </chart:SfCartesianChart.YAxes>
 <chart:SplineAreaSeries ItemsSource="{Binding  Talent Exdous"/>
</chart:SfCartesianChart>

After executing the previous code examples, we’ll get output like in the following image.

Visualizing top Google searches related to investing in 2022 using the WinUI spline area chart
Visualizing top Google searches related to investing in 2022 using the WinUI Spline Area Chart

GitHub Reference

For more information, refer to the demo on GitHub.

Conclusion

Thanks for reading! In this blog, we explored the top Google searches for the latest investment trends in 2022 using the Syncfusion WinUI Spline Area Chart. We hope that this information will assist you in making similar, useful spline area charts. Try out the steps discussed in this blog, and leave your feedback in the comments section below!

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

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