Chart of the Week: Creating a .NET MAUI Line Chart to Analyze Wage Trends in the Texas Oil Gas Extraction Industry

Jollen Moyani - May 10 - - Dev Community

TL;DR: Let’s visualize wage trends in the Texas oil and gas extraction industry over the last fifteen years using the Syncfusion .NET MAUI Line Chart. Discover how to gather and link data to the chart while enhancing visualization by customizing elements such as title, axis, and tooltip.

Welcome to our Chart of the Week blog series!

In the heart of Texas lies an industry that has long been synonymous with prosperity and innovation: oil and gas extraction. As we delve into the present landscape of this sector, one question looms large: What do the current wage trends reveal about its state?

In this article, we embark on a journey of data exploration, harnessing the power of Syncfusion .NET MAUI Line Chart to analyze current wage trends in the Texas oil and gas extraction industry.

These current wage trends hold significant implications for various stakeholders within and beyond the Texas oil and gas extraction industry. Employers gain valuable insights into current labor market dynamics, informing their hiring and compensation strategies. Policymakers glean insights to craft policies that support workforce development and economic growth. Meanwhile, workers themselves can better understand current wage trends to make informed career decisions.

Let’s examine the percentage of employment growth or decline over the last fifteen years in the Texas oil and gas extraction industry. The following image shows the chart we’re going to build.

Visualizing wage trends of the Texas oil and gas extraction industry using Syncfusion .NET MAUI Line Chart

Visualizing wage trends of the Texas oil and gas extraction industry using Syncfusion .NET MAUI Line Chart

Step 1: Gathering the data

Before proceeding, let’s collect data on wage trends from employment profiles in Texas’s oil and gas extraction industry.

Step 2: Preparing the data for the chart

Create the OilGasEmploymentModel class to hold employment details using the EmploymentPercent, EmploymentCount, Date , and other properties.

Refer to the following code example.

public class OilGasEmploymentModel
{
    public OilGasEmploymentModel(DateTime month, double employmentCount, double employmentGrowth)
    {
        Month = month;
        EmploymentPercent = employmentCount;
        EmploymentCount = employmentGrowth;
    }

    public DateTime Date { get; set; }
    public double EmploymentPercent { get; set; }
    public double EmploymentCount { get; set; }
    public Geometry? Path { get; set; }
    public Brush FillPath { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

Then, we generate the employment count and percentage collection using the OilGasEmploymentViewModel class and its EmploymentDetails property. Assign the CSV data to the EmploymentDetails data collection using the ReadCSV method and store it in the EmploymentDetails property.

Refer to the following code example.

public class OilGasEmploymentViewModel
{
    public ObservableCollection<OilGasEmploymentModel> EmploymentDetails { get; set; }
    public ObservableCollection<Brush> CustomBrushes { get; set; }
    public Geometry? Green { get; set; } = (Geometry?)(new PathGeometryConverter().ConvertFromInvariantString("M16.000016,0L24.000008,10.7 32,21.399999 16.000016,21.399999 0,21.399999 7.9999928,10.7z"));
    public Geometry? Red { get; set; } = (Geometry?)(new PathGeometryConverter().ConvertFromInvariantString("M0.87499046,0L31.12499,0C31.92399,0,32.22299,0.49899435,31.82399,0.9979887L16.648991,21.064764C16.24999,21.563759,15.65099,21.563759,15.250991,21.064764L0.1759901,0.9979887C-0.22300911,0.49899435,0.075990677,0,0.87499046,0z"));

    public OilGasEmploymentViewModel()
    {

        EmploymentDetails = new ObservableCollection<OilGasEmploymentModel>(ReadCSV());

        CustomBrushes = new ObservableCollection<Brush>();

        foreach (var item in EmploymentDetails)
        {
            if (item.EmploymentCount >= 0)
            {
                item.Path = Green;
                item.FillPath = new SolidColorBrush(Color.FromHex("#619624"));
                CustomBrushes.Add(new SolidColorBrush(Color.FromHex("#619624")));
            }
            else if (item.EmploymentCount < 0)
            {
                item.Path = Red;
                item.FillPath = new SolidColorBrush(Color.FromHex("#eb6569"));
                CustomBrushes.Add(new SolidColorBrush(Color.FromHex("#eb6569")));
            }
        }
    }

    private IEnumerable<OilGasEmploymentModel> ReadCSV()
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream inputStream = executingAssembly.GetManifestResourceStream("OilGasExtraction.Resources.Raw.data.csv");

        string? line;
        List<string> lines = new List<string>();

        using StreamReader reader = new StreamReader(inputStream);
        while ((line = reader.ReadLine()) != null)
        {
            lines.Add(line);
        }

        lines[0].Remove(0);
        return lines.Select(line =>
        {
            string[] data = line.Split(',');
            DateTime day = DateTime.Parse(data[0]);

         return new OilGasEmploymentModel(day, Convert.ToDouble(data[1]), Convert.ToDouble(data[2]));

        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Configuring the Syncfusion .NET MAUI Cartesian Charts

Now, configure the Syncfusion .NET MAUI Cartesian Charts control using this documentation.

Refer to the following code example.

<chart:SfCartesianChart>

  <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis>
        </chart:DateTimeAxis>
  </chart:SfCartesianChart.XAxes>

  <chart:SfCartesianChart.YAxes>
      <chart:NumericalAxis>
       </chart:NumericalAxis>
  </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>
Enter fullscreen mode Exit fullscreen mode

Step 4: Initialize the BindingContext for the chart

Now, configure the OilGasEmploymentViewModel class to bind its properties to the BindingContext of the SfCarteisanChart.

Refer to the following code example.

<chart:SfCartesianChart.BindingContext>
                <local:OilGasEmploymentViewModel/>
</chart:SfCartesianChart.BindingContext>
Enter fullscreen mode Exit fullscreen mode

Step 5: Bind the wage trends data to the .NET MAUI Line Chart

We’ll use the Syncfusion LineSeries instance to analyze wage trends in the oil and gas extraction industry over time.

Refer to the following code example.

<chart:LineSeries ItemsSource="{Binding EmploymentDetails}" 
                  XBindingPath="Month" YBindingPath="EmploymentPercent">
</chart:LineSeries>
Enter fullscreen mode Exit fullscreen mode

In the above code example, we’ve bound the ItemSource property to the EmploymentDetails property. We’ve also bound the XBindingPath and YBindingPath properties to the Month and EmploymentPercent properties, respectively.

Step 6: Customizing the chart appearance

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

Adding chart title

We can use the Title property to customize the .NET MAUI Line Chart title. As per the documentation, you can also add any view to the Title property.

Refer to the following code example.

<chart:SfCartesianChart.Title>
    <Grid>
        <HorizontalStackLayout Margin="{OnPlatform Default='10' ,iOS='5',Android='2'}" 
                               HorizontalOptions="Center" VerticalOptions="Center">
            <Image Source="growth.png" HeightRequest="40" WidthRequest="40"/>
            <Label TextColor="Black" FontFamily="TimeSpan" 
                    FontSize="{OnPlatform WinUI='20',Default='20', Android='16', iOS='16'}"
                    FontAttributes="Bold" HorizontalOptions="Center" 
                    Margin="{OnPlatform Default='0,8,0,0',Android='0,4,0,0',iOS='0,4,0,0'}" 
                    VerticalTextAlignment="Center"
          Text="Analyze the Wage Trends in the Texas Oil Gas Extraction Industry"/>
        </HorizontalStackLayout>
    </Grid>
</chart:SfCartesianChart.Title>
Enter fullscreen mode Exit fullscreen mode

Customize the axis crossing and tick line styles

We can adjust the axis position anywhere in the chart area using the CrossesAt property. Additionally, we can determine whether the crossing axis should be placed at the crossing position or not using the RenderNextToCrossingValue property. We can use the ShowMajorGridLines and ShowMinorGridLines properties to turn the grid lines on or off.

Then, customize the axis tick styles using the MajorTickStyle property and change the color and width of the ticks using the Stroke and StrokeWidth properties, respectively.

Refer to the following code example.

<chart:SfCartesianChart.Xaxes>
    <chart:DateTimeAxis ShowMajorGridLines="False" RenderNextToCrossingValue="True"
                   CrossesAt="0" ShowMinorGridLines="False">

        <chart:DateTimeAxis.MajorTickStyle>
            <chart:ChartAxisTickStyle Stroke="LightGray" StrokeWidth="1"/>
        </chart:DateTimeAxis.MajorTickStyle>
    </chart:DateTimeAxis>
</chart:SfCartesianChart.Xaxes>
Enter fullscreen mode Exit fullscreen mode

Customize the axis label

Let’s customize the axis LabelFormat in the LabelStyle. Then, set the Minimum and Maximum range for the axis.

<chart:NumericalAxis ShowMajorGridLines="False" CrossesAt="{Binding CrossesAt}"
                      RenderNextToCrossingValue="True" ShowMinorGridLines="False" 
                      Minimum="-20" Maximum="20"
                      x:Name="yAxis">

    <chart:NumericalAxis.MajorTickStyle>
        <chart:ChartAxisTickStyle StrokeWidth="1" Stroke="LightGray"/>
    </chart:NumericalAxis.MajorTickStyle>

    <chart:NumericalAxis.LabelStyle>
        <chart:ChartAxisLabelStyle LabelFormat="0' %"/>
    </chart:NumericalAxis.LabelStyle>
</chart:NumericalAxis>
Enter fullscreen mode Exit fullscreen mode

Customize the line series appearance

You can set the stroke width for the line series using the StrokeWidth property. To display information about the count and percentage details of employed people, you can enable the EnableTooltip property and customize the appearance of the tooltip using the TooltipTemplate property.

You can also set a palette to the series to apply pre-defined brushes to the line series segments using the PaletteBrushes property. This can help analyze the trend more effectively.

Refer to the following code example.

<chart:LineSeries StrokeWidth="2" ItemsSource="{Binding EmploymentDetails}" 
                  EnableTooltip="True" PaletteBrushes="{Binding CustomBrushes}" 
                  XbindingPath="Month" YbindingPath="EmploymentPercent"
                  TooltipTemplate="{StaticResource tooltip}">
</chart:LineSeries>
Enter fullscreen mode Exit fullscreen mode

Step 7: Customize tooltip behavior

Finally, specify the duration time in seconds for which the tooltip should be displayed using the Duration property.

<chart:SfCartesianChart.TooltipBehavior>
    <chart:ChartTooltipBehavior Duration="3"/>
</chart:SfCartesianChart.TooltipBehavior>
Enter fullscreen mode Exit fullscreen mode

After executing the above code examples, we will get the output that resembles the following image.

Visualizing wage trends of the Texas oil and gas extraction industry using Syncfusion .NET MAUI Line Chart

Visualizing wage trends of the Texas oil and gas extraction industry using Syncfusion .NET MAUI Line Chart

GitHub reference

For more details, refer to the Creating a .NET MAUI Line Chart to visualize wage trends GitHub Demo.

Conclusion

Thanks for reading! We have demonstrated how to visualize the data on employed individuals in the Texas oil and gas extraction industry using the Syncfusion .NET MAUI Line Chart. We encourage you to try the steps discussed and share your thoughts in the comments below.

The existing customers can download the latest version of Essential Studio from the License and Downloads page. If you are new, try our 30-day free trial to explore our incredible features.

If you require assistance, please don’t hesitate to contact us via our support forums, support portal, or feedback portal. We are always eager to help you!

Related

Image
MBOX Converter Tool

mboxfile, converter, tool
Image
5 Getting Diagnosed With ADHD Lessons From The Pros
Image
Is There A Place To Research Bifold Door Glass Replacement Cost Online
Image
Zmieniamy Przestrzeń: Kreatywne Pomysły na Aranżację Wnętrz
Image
Installing a Cat Flap in a UPVC Door Cost
Image
Many Of The Most Exciting Things Happening With Getting A ADHD Diagnosis
Image
Bifold Door Glass Replacement Cost Tips From The Best In The Industry
Image
Achieving More: How software engineers can benefit from Kanban

kanban, productivity, softwaredevelopment, learning
Image
Five Things You Don't Know About Book ADHD Assessment
Image
Using a Cat Flap in Bifold Doors
Image
Cat Flaps For French Doors
Image
A Productive Rant About Asbestos Lawsuit Payouts
Image
20 Resources That'll Make You More Effective At Class Action Lawsuit Asbestos Exposure
Image
What Is The Future Of Bifold Door Repairs Be Like In 100 Years?
Image
GitHub Copilot With Terraform: Streamlining Infrastructure as Code
Image
Hacktoberfest 2024: A Comedy of PRs (Or: How I Learned to Stop Worrying and Love the Merge Conflicts)

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
Here's A Little Known Fact Concerning Asbestos Lung Mesothelioma
Image
10 Of The Top Facebook Pages Of All Time About How Do I Get An ADHD Assessment
Image
My Hacktoberfest Adventure: Wrestling with JavaScript and the Elusive Green Light 🚥
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .