Building an Oil & Gas Dashboard with SciChart WPF

Building an Oil & Gas Dashboard with SciChart WPF

In the oil and gas industry, visualizing large datasets in real time is critical for operational efficiency, safety, and decision-making. From monitoring drilling depths and fluid dynamics to tracking equipment performance, data visualization tools must handle massive volumes of information without compromising performance. For developers working on big data projects in this field, choosing a high-performance charting library like SciChart WPF is essential.

SciChart is built for handling billions of data points, making it ideal for the fast-paced and data-intensive demands of the oil and gas sector. In this tutorial, we’ll guide you through creating an oil and gas dashboard using SciChart WPF, featuring synchronized 2D charts, 3D chart, customized axis legends, and tools for real-time data interaction.

For a full walkthrough, watch our video tutorial on building an oil and gas dashboard using SciChart WPF.

Step 1: Access The Example From GitHub

To get started, download the SciChart WPF examples from GitHub. Navigate to the sandbox folder > customer examples > oil and gas example. This example showcases how to use SciChart WPF to monitor and visualize well parameters through multiple chart types. Open this example in Visual Studio to explore its structure.

Click on link to GitHub repository.

Step 2: Vertical Panel of 2D Charts

The first component of our oil and gas dashboard is a vertical panel of 2D charts representing different patterns of the drilled wells. This panel uses SciChart WPF to create six vertically aligned charts, each displaying specific well data (e.g., density, resistivity). Here’s how it’s done:

• Use the ItemsControl with a custom UniformGrid panel template to arrange the charts. Set the grid to have one row and six columns, with each chart occupying a single column.

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Rows="1" Columns="6"/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

• Rotate the charts 90 degrees by setting the axis alignment:

XAxis.Alignment = AxisAlignment.Left;
YAxis.Alignment = AxisAlignment.Top;

Key SciChart Feature: Use the SciChart MVVM API to set custom axis styles. This allows developers to change visual appearances (axis ticks, labels, etc.) while keeping the code clean.

Step 3: Customizing Access Legends And Styles

One standout feature in this example is the custom axis legends. Each chart contains a legend at the top showing specific parameters (e.g., drill depth, pressure). To customize the axis legends:

• Create a custom axis template using WPF control template:

<ControlTemplate TargetType="s:AxisBase">
	<Border>
		<StackPanel x:Name="PART_AxisContainer"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    s:AxisLayoutHelper.AxisAlignment="{TemplateBinding AxisAlignment}">

			<ContentPresenter x:Name="PART_AxisLegend"
                              VerticalAlignment="Stretch"
                              HorizontalAlignment="Stretch"
                              Content="{TemplateBinding (local:AxisLegend.Content)}"/>

			<!-- Default axis layout -->

		</StackPanel>
	</Border>
</ControlTemplate>

• Use the AxisLegend.Content attached property to define the exact content for each chart’s legend. This attached property can be set in custom axis style. 

<Grid x:Key="ShaleChartAxisLegend">
	<Grid.RowDefinitions>
		<RowDefinition Height="20"/>
		<RowDefinition Height="20"/>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*"/>
		<ColumnDefinition Width="*"/>
	</Grid.ColumnDefinitions>

	<Border Grid.Row="0" Grid.Column="0" Background="Firebrick"/>
	<Border Grid.Row="0" Grid.Column="1" Background="Blue"/>

	<TextBlock Grid.Row="1" Grid.Column="0" Text="OIL"/>
	<TextBlock Grid.Row="1" Grid.Column="1" Text="WATER"/>

	<!-- Other legend controls -->
</Grid>

<Style TargetType="{x:Type s:NumericAxisForMvvm}">
	<!-- Other style setters -->
	<Setter Property="local:AxisLegend.Content" Value="{StaticResource ShaleChartAxisLegend}"/>
</Style>

With SciChart, you can support automatic Axis styling in MVVM and Set Axis Alignment for unlimited XAxis and YAxis.

Step 4: Synchronizing Multiple Charts

In oil and gas visualizations, synchronizing multiple charts is essential for monitoring data streams from different sources. In this example, we synchronize chart modifiers like zooming and tooltip hover across the vertical charts:

• Add a ModifierGroup to add multiple modifiers to the chart, and set a MouseManager.MouseEventGroup to synchronize them across all charts.

<s:SciChartSurface.ChartModifier>
	<s:ModifierGroup s:MouseManager.MouseEventGroup="VerticalChartsGroup">
		<s:MouseWheelZoomModifier/>
		<s:ZoomExtentsModifier/>
		<s:ZoomPanModifier/>
		<s:RolloverModifier/>
	</s:ModifierGroup>
</s:SciChartSurface.ChartModifier>

This synchronization ensures that when you zoom in on one chart, all charts zoom in simultaneously, providing a unified view.

Step 5: 3D Chart for Visualizing Scatter Data

The final component is a 3D scatter chart that visualizes multiple data points with varying sizes and colors. This scatter chart is especially useful for plotting wellbore data or formation attributes in 3D space.

• Set up the SciChart 3D surface and add multiple scatter series:

var xyzDataSeries1 = new XyzDataSeries3D();
var xyzDataSeries2 = new XyzDataSeries3D();
var xyzDataSeries3 = new XyzDataSeries3D();

xyzDataSeries1.Append(x, y, z, new PointMetadata3D(getColor(x), scale));
xyzDataSeries2.Append(x, y, z, new PointMetadata3D(getColor(y), scale));
xyzDataSeries3.Append(x, y, z, new PointMetadata3D(getColor(z), scale));

renderSeries.Add(new ScatterRenderableSeries3DViewModel
{
	DataSeries = xyzDataSeries1,
	PointMarker = new SpherePointMarker3D
	{
		Size = 5,
		Fill = Colors.White
	}
});

renderSeries.Add(new ScatterRenderableSeries3DViewModel
{
	DataSeries = xyzDataSeries2,
	PointMarker = new SpherePointMarker3D
	{
		Size = 5,
		Fill = Colors.White
	}
});

renderSeries.Add(new ScatterRenderableSeries3DViewModel
{
	DataSeries = xyzDataSeries3,
	PointMarker = new SpherePointMarker3D
	{
		Size = 5,
		Fill = Colors.White
	}
});

• Customize the XYZ axes with specific ranges and properties to focus on the relevant data for analysis: 

XAxis.VisibleRange = new DoubleRange(0, 300);
XAxis.DrawMajorBands = false;
XAxis.DrawMinorTicks = false;

or

<Style TargetType="s3D:NumericAxis3D">
	<Setter Property="VisibleRange" Value="0,300"/>
	<Setter Property="DrawMajorBands" Value="False"/>
	<Setter Property="DrawMinorTicks" Value="False"/>
</Style>

Key SciChart Feature: Use the Point Metadata API to control point colors and sizes dynamically based on data values.

Build Your Oil And Gas Dashboard

In the oil and gas industry, where real-time data analysis is a matter of operational success, having a reliable and high-performance charting library is essential. SciChart WPF provides developers with the tools to handle large datasets and visualize them in ways that enhance decision-making and operational insights. Whether you’re monitoring drilling performance, visualizing well data, or tracking equipment efficiency, SciChart WPF ensures your dashboard can handle the big data demands of the industry with smooth performance and flexibility.

By leveraging features like custom axis legends, synchronized chart modifiers, and 3D scatter plots, you can build a fully customized oil and gas dashboard that meets the complex visualization needs of the sector.