DEV Community

Cover image for Chart of the Week: Creating A Trend Line Using WPF Charts to Visualize Rapid Heating in North American Oceans
Syncfusion, Inc. profile image Jollen Moyani
Jollen Moyani for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

Chart of the Week: Creating A Trend Line Using WPF Charts to Visualize Rapid Heating in North American Oceans

#wpf #chart #ui #datavisualization

Welcome to the Chart of the Week blog series!

Today, we will create a trend line to visualize the temperature increase in North American oceans using Syncfusion WPF Charts.

In 2022, the North American ocean temperature increased by 0.04 degrees Celsius compared to the previous year.

In this example, the trend line is drawn for the temperature data points on the chart. The resulting line is used to analyze whether the ocean temperature has generally cooled or heated up over previous decades and will be used to predict changes in the next decade. This prediction will aid in forecasting cyclone patterns.

The following image shows the charted data and its trend line.

Visualizing the Rise in Temperature of North American Oceans using WPF Charts

Let’s see how to re-create this chart with a column chart using the Syncfusion WPF Charts control.

Step 1: Collecting data for ocean water temperature

First, we need to collect data on ocean water temperature in North America. For our demonstration, the data is acquired from the NOAA, and each data point contains two values: the year of the measurement and the temperature anomaly measurement in degrees Celsius. The data is provided in CSV format.

Step 2: Prepare the data for the trend line

Let’s define the YearlyTemperatureAnomaly class with Temperature and Year properties to store the yearly temperature anomalies.

Refer to the following code example.

public class YearlyTemperatureAnomaly
{
   public DateTime Year { get; set; }
   public double Temperature { get; set; }

   public YearlyTemperatureAnomaly(DateTime year,double temperature) 
   {
      Year = year;
      Temperature = temperature;
   }
}
Enter fullscreen mode Exit fullscreen mode

Next, generate a data collection in the GlobalTemperatureAnomalies class using the CollectionOfTemperature property. Convert the CSV data to a collection of data points using the ReadCSV method and store it in the CollectionOfTemperature property.

Refer to the following code example.

public class GlobalTemperatureAnomalies
{
    private ObservableCollection<YearlyTemperatureAnomaly> collection;
    public ObservableCollection<YearlyTemperatureAnomaly> CollectionOfTemperature
    { 
       set { collection = value; }
       get { return collection; }
    }

    public Geometry PathData
    {
       set { path = value; }
       get { return path; }
    }

    public GlobalTemperatureAnomalies()
    {
        CollectionOfTemperature = new ObservableCollection<YearlyTemperatureAnomaly>(ReadCSV("F:\\WPF\\Blog\\WaterWarming_HurricaneSeason\\WaterWarming_HurricaneSeason\\TemperatureAnomalies"));
    }

    public IEnumerable<YearlyTemperatureAnomaly> ReadCSV(string fileName)
    {
        List<string> lines = File.ReadAllLines(System.IO.Path.ChangeExtension(fileName, ".csv")).ToList();

        return lines.Select(line =>
        {
           string[] data = line.Split(',');

           DateTime date = DateTime.ParseExact(data[0], "yyyy", CultureInfo.InvariantCulture);
           return new YearlyTemperatureAnomaly(date, Convert.ToDouble(data[1]));
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure the WPF Charts

Now, configure the Syncfusion WPF Charts control using this documentation.

<Chart:SfChart> 
 <Chart:SfChart.PrimaryAxis>
  <Chart:DateTimeAxis>
  </Chart:DateTimeAxis>
 </Chart:SfChart.PrimaryAxis>

 <Chart:SfChart.SecondaryAxis>
  <Chart:NumericalAxis>
  </Chart:NumericalAxis>
 </Chart:SfChart.SecondaryAxis>
</Chart:SfChart>
Enter fullscreen mode Exit fullscreen mode

Step 4: Initialize the chart data context

Then, configure the GlobalTemperatureAnomalies class to bind its properties to the WPF Charts DataContext.

<Chart:SfChart.DataContext>
 <local:GlobalTemperatureAnomalies/>
</Chart:SfChart.DataContext>
Enter fullscreen mode Exit fullscreen mode

Step 5: Initialize the column series and trend line

To visualize the increase in ocean water temperature, we’ll use the Syncfusion WPF ColumnSeries instance.

<Chart:SfChart.Series>
 <chart:ColumnSeries XBindingPath="Year" YBindingPath="Temperature" ItemsSource="{Binding CollectionOfTemperature}">
 </Chart:ColumnSeries>
</Chart:SfChart.Series>
Enter fullscreen mode Exit fullscreen mode

In the previous code example, we’ve bound the ItemsSource property with the temperature collection to view the data points in the column chart. We also bound the Year and Temperature properties to the XBindingPath and YBindingPath, respectively.

Now, configure the trend line on the column series to analyze and display the trend of the data graphically.

<Chart:SfChart.Series>
 <Chart:ColumnSeries XBindingPath="Year" YBindingPath="Temperature" ItemsSource="{Binding CollectionOfTemperature}">
  <Chart:ColumnSeries.Trendlines>
   <Chart:Trendline />
  </Chart:ColumnSeries.Trendlines>
 </Chart:ColumnSeries>
</Chart:SfChart.Series>
Enter fullscreen mode Exit fullscreen mode

Step 6: Customize the trend line

We can customize the trend line using the Type, Foreground, Stroke, and StrokeThickness properties. We can also display the future and past trends using the Forecasting methods.

<Chart:ColumnSeries.Trendlines>
 <chart:Trendline Stroke="Black" StrokeThickness="2" Foreground="Black" Type="Linear"/>
</Chart:ColumnSeries.Trendlines>
Enter fullscreen mode Exit fullscreen mode

Step 7: Customize the series points

We can customize the column chart appearance using the CustomTemplate property. In this example, we’ve used the TrackBallLabelTemplate property to display the YBindingPath value when hovering over the data points.

<chart:ColumnSeries TrackBallLabelTemplate="{StaticResource trackBallLabelTemplate}" 
                    CustomTemplate="{StaticResource seriesTemplate}" 
                    XBindingPath="Year" YBindingPath="Temperature"
                    ItemsSource="{Binding CollectionOfTemperature}">
</Chart:ColumnSeries>
Enter fullscreen mode Exit fullscreen mode

Step 8: Customize the header of the chart

Use the Header property to customize the title of the chart and align it using the HorizontalHeaderAlignment and VerticalHeaderAlignment properties.

Refer to the following code example.

<Chart:SfChart.Header>
 <Grid Width="1000" HorizontalAlignment="Left" Margin="5,0,0,10" VerticalAlignment="Center">
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width= "80"/>
   <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
   <RowDefinition/>
   <RowDefinition/>
  </Grid.RowDefinitions>
   <StackPanel Orientation= "Vertical" Background="Transparent" Margin="10">
    <Path Margin="0,0,0,0" Grid.RowSpan= "2" 
          Data="{Binding PathData}" Stretch="Uniform"
          Fill="Orange" Width="60" 
          Height="60" RenderTransformOrigin="0.5,0.5">
    </Path>
   </StackPanel>
   <StackPanel Margin="5,0,0,0"
               HorizontalAlignment="Left"  
               Orientation="Vertical" Grid.Column="1">
     <TextBlock  
              Text="Creating a Trend Line to Chart the Rapid" 
              HorizontalAlignment="Left" TextWrapping="Wrap"
              FontSize="35" FontWeight="SemiBold" Foreground="Black"/>
     <TextBlock 
              Text= "Heating of North American Oceans" 
              HorizontalAlignment="Left" FontWeight="SemiBold"
              FontSize="35" Foreground="Black"/>

   </StackPanel>
   <StackPanel Margin="0,0,-350,0" Grid.Row= "1"
                Grid.Column="1" HorizontalAlignment="Right">
    <Canvas>
     <Path Stroke="Black" StrokeThickness="1.5">
      <Path.Data>
       <PathGeometry>
        <PathGeometry.Figures>
         <PathFigureCollection>
          <PathFigure StartPoint="20,15">
           <PathFigure.Segments>
            <PathSegmentCollection>
             <LineSegment Point= "40,15"/>
            </PathSegmentCollection>
           </PathFigure.Segments>
          </PathFigure>
         </PathFigureCollection>
        </PathGeometry.Figures>
       </PathGeometry>
      </Path.Data>
     </Path>
    </Canvas>
    <TextBlock Text="1880-2022 trend" 
          TextAlignment="Left" Margin="0,0,-100,0" Width="500" 
          VerticalAlignment= "Bottom"
          FontSize="20" Foreground="Gray"/>
    <TextBlock 
          Text= "ocean temperature anomalies" TextAlignment= "Left"        
          VerticalAlignment="Bottom" FontSize="20" 
          Width="500" Foreground="Gray"/>
   </StackPanel>
 </Grid>
</Chart:SfChart.Header>
Enter fullscreen mode Exit fullscreen mode

Step 9: Customize the chart axis elements

Let’s customize the ChartAxis based on our requirements. We’ll use the DateTimeAxis property to visualize the yearly data points.

Enable the ShowTrackBallInfo property to view the year data in the DateTimeAxis and customize the trackball label using TrackBallLabelTemplate.

Configure the IntervalType and Interval value and format the date time label using the LabelFormat property.

<Chart:SfChart.PrimaryAxis>
 <Chart:DateTimeAxis 
           TrackBallLabelTemplate="{StaticResource xAxisTrackBallLabelTemplate}"
           ShowTrackBallInfo="True" IntervalType="Years" Interval="5"  
           EdgeLabelsDrawingMode="Shift" LabelFormat="yyyy">
 </Chart:DateTimeAxis>
</Chart:SfChart.PrimaryAxis>
< Chart:SfChart.SecondaryAxis>
 <chart:NumericalAxis ShowTrackBallInfo="True" Minimum="-0.7"
                       LabelFormat="0.##&#186;C" Name="yaxis">
 </Chart:NumericalAxis>
</Chart:SfChart.SecondaryAxis>
Enter fullscreen mode Exit fullscreen mode

After that, configure the LabelStyle of the axis labels using the FontSize and FontWidth properties.

<Chart:SfChart.PrimaryAxis>
 <Chart:DateTimeAxis > 
  <Chart:DateTimeAxis.LabelStyle>
   <chart:LabelStyle FontSize="12" />
  </Chart:DateTimeAxis.LabelStyle>
 </Chart:DateTimeAxis>
</Chart:SfChart.PrimaryAxis>

<Chart:SfChart.SecondaryAxis>
 <Chart:NumericalAxis>
  <Chart:NumericalAxis.LabelStyle>
   <chart:LabelStyle FontSize="12" />
  </Chart:NumericalAxis.LabelStyle>
 </Chart:NumericalAxis>
</Chart:SfChart.SecondaryAxis>
Enter fullscreen mode Exit fullscreen mode

Step 10: Configure the trackball behavior

The ChartTrackBallBehavior class allows users to track the data points when the cursor position changes. It helps users visualize each data point’s corresponding x- and y-values. We can also customize the trackball style using the ChartTrackBallStyle property.

Refer to the following code example.

<Chart:SfChart.Behaviors>
 <chart:ChartTrackBallBehavior ChartTrackBallStyle="{StaticResource trackballStyle}" ShowLine= "True" />
</Chart:SfChart.Behaviors>
Enter fullscreen mode Exit fullscreen mode

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

Visualizing the Rise in Temperature of North American Oceans using WPF Charts

Visualizing the Rise in Temperature of North American Oceans using WPF Charts

GitHub reference

For more details, refer to the GitHub demo.

Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize the temperature increase in North American oceans using the Syncfusion WPF Charts control.

You can explore our WPF Charts examples to learn more about the supported chart types and how easy it is to configure them for stunning visual effects.

The latest version of the WPF Charts control is available for current customers from the License and Downloads page. If you are not yet a Syncfusion customer, try our 30-day free trial to check it out.

Also, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Top comments (0)

Read next

marktnoonan profile image

Why I rarely use `getByRole`: Testing Library and the first rule of ARIA

Mark Noonan -

jcubic profile image

How to Create an Interactive Terminal-Based Portfolio

Jakub T. Jankiewicz -

vishalmysore profile image

How to Detect AI Hallucinations

vishalmysore -

codernko profile image

Day 3: Control

NKO -