Welcome to our Chart of the Week weblog collection!
On this weblog, we’ll visualize the highest Google search tendencies for investing utilizing the Syncfusion WinUI Spline Space Chart. In an funding panorama in fixed flux, staying attuned to those tendencies is vital.
Such insights empower traders and analysts, providing a extra profound comprehension of market dynamics. By diving into the search tendencies of 2022, one can unearth important info on market sentiment, establish burgeoning funding alternatives, and achieve perspective on trending monetary issues.
Seek advice from the next picture.
Let’s see the steps to visualise the highest Google searches associated to investing utilizing the Syncfusion WinUI Spline Space Chart.
Step 1: Gathering the information
Earlier than creating the chart, we have to collect the information on the prime Google searches associated to investing. For this demo, get the information from Jan. 2022 to Dec. 2022, which could be downloaded as a CSV file.
Step 2: Put together the information for the chart
Create the GoogleSearchModel class to carry the information with 12 months and Worth properties.
Seek advice from the next code instance.
public class GoogleSearchModel
{
public DateTime 12 months { get; set; }
public double Worth { get; set; }
public GoogleSearchModel(DateTime yr, double worth)
{
12 months = yr;
Worth = worth;
}
}
Subsequent, generate the highest Google search knowledge assortment with the assistance of the GoogleSearchViewModel class and separate properties for every collection.
Convert the CSV knowledge to a group utilizing the ReadCSV technique and retailer it within the assortment property.
public class GoogleSearchViewModel : INotifyPropertyChanged
{
personal Checklist<GoogleSearchModel> greatResignation;
personal Checklist<GoogleSearchModel> oilPrice;
personal Checklist<GoogleSearchModel> housingBubble;
personal Checklist<GoogleSearchModel> valueInvesting;
personal Checklist<GoogleSearchModel> bitCoin;
personal Checklist<GoogleSearchModel> recession;
personal Checklist<GoogleSearchModel> inflation;
personal Checklist<GoogleSearchModel> uSDollar;
personal Checklist<GoogleSearchModel> layoffs;
personal Checklist<GoogleSearchModel> interestRate;
public Checklist<GoogleSearchModel> GreatResignation
{
get
{ return greatResignation; }
set
{
greatResignation = worth;
NotifyPropertyChanged(nameof(GreatResignation));
}
}
public Checklist<GoogleSearchModel> OilPrice
{
get { return oilPrice; }
set
{
oilPrice = worth; NotifyPropertyChanged(nameof(OilPrice));
}
}
public Checklist<GoogleSearchModel> HousingBubble
{
get { return housingBubble; }
set
{
housingBubble = worth; NotifyPropertyChanged(nameof(HousingBubble));
}
}
public Checklist<GoogleSearchModel> ValueInvesting
{
get { return valueInvesting; }
set
{
valueInvesting = worth; NotifyPropertyChanged(nameof(ValueInvesting));
}
}
public Checklist<GoogleSearchModel> BitCoin
{
get { return bitCoin; }
set
{
bitCoin = worth; NotifyPropertyChanged(nameof(BitCoin));
}
}
public Checklist<GoogleSearchModel> Recession
{
get { return recession; }
set
{
recession = worth; NotifyPropertyChanged(nameof(Recession));
}
}
public Checklist<GoogleSearchModel> Inflation
{
get { return inflation; }
set
{
inflation = worth; NotifyPropertyChanged(nameof(Inflation));
}
}
public Checklist<GoogleSearchModel> USDollar
{
get { return uSDollar; }
set
{
uSDollar = worth; NotifyPropertyChanged(nameof(USDollar));
}
}
public Checklist<GoogleSearchModel> Layoffs
{
get { return layoffs; }
set
{
layoffs = worth; NotifyPropertyChanged(nameof(Layoffs));
}
}
public Checklist<GoogleSearchModel> InterestRate
{
get { return interestRate; }
set
{
interestRate = worth; NotifyPropertyChanged(nameof(InterestRate));
}
}
public GoogleSearchViewModel()
{
GreatResignation = new Checklist<GoogleSearchModel>(ReadCSV("SplineAreaSample.Useful resource.multiTimeline.csv"));
OilPrice = new Checklist<GoogleSearchModel>(ReadCSV("SplineAreaSample.Useful resource.OilPrice.csv"));
HousingBubble = new Checklist<GoogleSearchModel>(ReadCSV("SplineAreaSample.Useful resource.HousingBubble.csv"));
ValueInvesting = new Checklist<GoogleSearchModel>(ReadCSV("SplineAreaSample.Useful resource.ValueInvsesting.csv"));
BitCoin = new Checklist<GoogleSearchModel>(ReadCSV("SplineAreaSample.Useful resource.BitCoin.csv"));
Recession = new Checklist<GoogleSearchModel>(ReadCSV("SplineAreaSample.Useful resource.Recession.csv"));
Inflation = new Checklist<GoogleSearchModel>(ReadCSV("SplineAreaSample.Useful resource.Inflation.csv"));
USDollar = new Checklist<GoogleSearchModel>(ReadCSV("SplineAreaSample.Useful resource.USDollar.csv"));
Layoffs = new Checklist<GoogleSearchModel>(ReadCSV("SplineAreaSample.Useful resource.Layoffs.csv"));
InterestRate = new Checklist<GoogleSearchModel>(ReadCSV("SplineAreaSample.Useful resource.InterestRate.csv"));
}
personal IEnumerable<GoogleSearchModel> ReadCSV(string resourceStream)
{
Meeting executingAssembly = typeof(App).GetTypeInfo().Meeting;
Stream inputStream = executingAssembly.GetManifestResourceStream(resourceStream);
string? line;
Checklist<string> strains = new Checklist<string>();
utilizing StreamReader reader = new StreamReader(inputStream);
whereas ((line = reader.ReadLine()) != null)
{
strains.Add(line);
}
return strains.Choose(line =>
{
string[] knowledge = line.Cut up(',');
DateTime date = DateTime.ParseExact(knowledge[0], "yyyy-MM-dd", CultureInfo.InvariantCulture);
return new GoogleSearchModel((date), Convert.ToDouble(knowledge[1]));
});
}
public occasion PropertyChangedEventHandler PropertyChanged;
personal void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Step 3: Configuring the Syncfusion WinUI Cartesian charts management
Configure the Syncfusion WinUI Cartesian charts management utilizing this documentation.
Seek advice from the next code instance.
<chart:SfCartesianChart>
<chart:SfCartesianChart.XAxes>
<Chart:CategoryAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<Chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>
Step 4: Binding knowledge to WinUI Spline Space Chart
Use the Syncfusion SplineAreaSeries class to bind the information to the chart.
Seek advice from the next code instance.
<Chart:SplineAreaSeries
ItemsSource="{Binding HousingBubble}"
XBindingPath="12 months"
YBindingPath="Worth">
</Chart:SplineAreaSeries>
On this instance, we’ve certain the chart to the GoogleSearchViewModel property containing our Google search knowledge.
Step 5: Customizing the chart look
We are able to customise the chart’s look by hiding the x- and y-axes within the chart axis ingredient, altering the spline space coloration, utilizing type to keep away from repeating code, and including titles to the charts.
Cut up the view into three columns and show the chart title.
<Grid.ColumnDefinitions> <ColumnDefinition Width="0.5*"></ColumnDefinition> <ColumnDefinition Width="1.5*"></ColumnDefinition> <ColumnDefinition Width="7.5*"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Textual content="Financial and Investing Traits: A 12 months in Overview(2022)" Grid.Column="2" Grid.Row="0" FontSize="20" HorizontalTextAlignment="Heart"></TextBlock>
Alter the axis settings and conceal the grid strains and the x- and y-axes to attain the view as proven within the following code instance.
<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 pictures for the highest Google search firms within the first column. The next exhibits the code instance for the Expertise Exodus collection. Configure the chart for the opposite collection in the identical approach.
<ImageIcon Supply="Picture/Expertise Exodus.png" Grid.Column="0" Grid.Row="3" Margin="20,-25,0,0"></ImageIcon>
Now, configure the corporate names within the second column, as proven within the following code instance.
<TextBlock Textual content="Expertise ExodusGrid.Column="1" Grid.Row="1" Margin="20,30,0,0"></TextBlock>
We are able to set the margin, peak, width, coloration, and extra for every view individually. Nonetheless, to keep away from repetition, let’s use the type proven within the following code instance.
<Grid.Assets> <ResourceDictionary> <Type TargetType="chart:DateTimeAxis"> <Setter Property="ShowMajorGridLines" Worth="False"></Setter> <Setter Property="ShowMinorGridLines" Worth="False"></Setter> <Setter Property="Visibility" Worth="Collapsed"></Setter> </Type> <Type TargetType="chart:NumericalAxis"> <Setter Property="ShowMajorGridLines" Worth="False"></Setter> <Setter Property="ShowMinorGridLines" Worth="False"></Setter> <Setter Property="Visibility" Worth="Collapsed"></Setter> </Type> <Type TargetType="chart:SfCartesianChart"> <Setter Property="Peak" Worth="30"></Setter> <Setter Property="Width" Worth="950"></Setter> <Setter Property="Margin" Worth="0,-50,0,0"></Setter> <Setter Property="VerticalAlignment" Worth="Heart"></Setter> </Type> <Type TargetType="chart:SplineAreaSeries"> <Setter Property="Fill" Worth="#87CEEB"></Setter> <Setter Property="XBindingPath" Worth="12 months"></Setter> <Setter Property="YBindingPath" Worth="Worth"></Setter> </Type> <Type TargetType="ImageIcon"> <Setter Property="Width" Worth="30"></Setter> <Setter Property="Margin" Worth="20,-35,0,0"></Setter> <Setter Property="VerticalAlignment" Worth="Heart"></Setter> </Type> <Type TargetType="TextBlock"> <Setter Property="Margin" Worth="20,-35,0,0"></Setter> <Setter Property="VerticalAlignment" Worth="Heart"></Setter> </Type> </ResourceDictionary> </Grid.Assets>
Lastly, configure the Spline Space Chart for every collection within 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 Expertise Exdous"/>
</chart:SfCartesianChart>
After executing the earlier code examples, we’ll get output like within the following picture.
GitHub Reference
For extra info, discuss with the demo on GitHub.
Conclusion
Thanks for studying! On this weblog, we explored the highest Google searches for the most recent funding tendencies in 2022 utilizing the Syncfusion WinUI Spline Space Chart. We hope that this info will help you in making comparable, helpful spline space charts. Check out the steps mentioned on this weblog, and depart your suggestions within the feedback part beneath!
You may as well contact us by way of our assist discussion board, assist portal, or suggestions portal. We’re at all times keen that will help you!
