TL;DR: Dive into the world of energy data visualization with our guide on 2D vs. 3D Scatter Charts. Discover their benefits, practical applications, and how to implement them using Syncfusion WPF controls, complete with code examples. Perfect for choosing the right chart for your project.
Welcome to the Chart of the Week blog series!
Choosing the right chart type can make or break your energy data analysis.
When dealing with complex metrics like electricity consumption, temperature, and cost, visual clarity becomes essential. In this post, we break down the key differences between Syncfusion® WPF 2D and 3D Scatter Charts, helping you choose the best one for your energy data insights.
This guide helps you visualize your data with precision, whether you’re tracking grid performance or analyzing renewable energy trends.
A 2D Scatter Chart is a simple yet powerful tool for visualizing relationships between two numerical variables. It plots data points along the X and Y axes, making it easy to identify patterns, correlations, and clusters within the dataset.
The 2D Scatter Chart is ideal for datasets involving only two numerical variables. It offers a clear, concise view of the data, making it easy to identify trends, correlations, and outliers. Common use cases include:
3D Scatter Charts introduce a Z-axis, enabling the visualization of three numerical variables simultaneously. This format is especially useful for analyzing complex energy datasets that require a third dimension to uncover deeper insights.
A 3D Scatter Chart is ideal for datasets where three variables are interrelated. Common use cases include:
Let’s explore the steps in analyzing energy consumption trends using WPF 2D and 3D Scatter Charts.
To begin, gather relevant metrics for energy analysis. In this example, we’ll use a sample dataset that includes the following:
This data will allow us to visualize relationships among these variables and uncover potential trends in energy usage.
| Energy Consumption (kWh) | Monthly cost ($) | Temperature (°C) |
| 120 | 200 | 150 |
| 900 | 800 | 950 |
| 150 | 250 | 180 |
| 850 | 750 | 900 |
| 200 … | 300 … | 220 … |
To accurately visualize energy data in 2D and 3D Scatter Charts, first define a structured data model. This model will represent key variables such as energy consumption (kWh), monthly electricity cost ($), and temperature (°C), three critical factors that influence energy usage patterns.
By establishing this model, we lay a solid foundation for creating 2D and 3D Scatter Charts, enabling clear, consistent, and insightful data representation.
The following C# class defines a model for storing energy-related data.
public class Model
{
public double EnergyConsumption { get; set; }
public double MonthlyCost { get; set; }
public double Temperature { get; set; }
}
Next, create a data collection using the EnergyViewModel class, which includes a property of EnergyData to store the energy metrics as shown in the code example below.
public class EnergyViewModel
{
public ObservableCollection EnergyData { get; set; }
public EnergyViewModel()
{
EnergyData = new ObservableCollection()
{
new Model { EnergyConsumption = 120, MonthlyCost = 200, Temperature = 150 },
new Model { EnergyConsumption = 900, MonthlyCost = 800, Temperature = 950 },
new Model { EnergyConsumption = 150, MonthlyCost = 250, Temperature = 180 },
new Model { EnergyConsumption = 850, MonthlyCost = 750, Temperature = 900 },
new Model { EnergyConsumption = 200, MonthlyCost = 300, Temperature = 220 },
new Model { EnergyConsumption = 800, MonthlyCost = 700, Temperature = 850 },
new Model { EnergyConsumption = 250, MonthlyCost = 400, Temperature = 260 },
. . .
. . .
};
}
}
Configure the Syncfusion® WPF Chart control by following the steps outlined in the documentation.
<syncfusion:SfChart>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:NumericalAxis />
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis />
</syncfusion:SfChart.SecondaryAxis>
</syncfusion:SfChart>
Bind the collected energy data to the 2D Scatter Chart to visualize the relationship between energy consumption and monthly electricity costs, as shown in the code example below.
<syncfusion:ScatterSeries ItemsSource="{Binding EnergyData}"
XBindingPath="EnergyConsumption"
YBindingPath="MonthlyCost">
</syncfusion:ScatterSeries>
To enhance the readability and visual appeal of the 2D Scatter Chart, customize the chart title, tooltip, and series appearance. These customizations help make the data more engaging and easier to interpret.
Adding a title makes it easier for users to quickly understand the data being presented. Refer to the following code example to customize the chart title for the 2D Scatter Chart.
<syncfusion:SfChart.Header>
<Grid Margin="0,3,20,40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Margin="0,10,5,0" Background="#684980" Width="10"/>
<StackPanel Grid.Column="1">
<TextBlock Text="2D Scatter Charts for Energy Data Visualization"
FontSize="28"
FontWeight="Bold"
Foreground="Black"/>
<TextBlock Text="Exploring Energy Consumption Trends and Patterns Using Interactive Scatter Plots for Better Decision-Making"
FontSize="16"
Foreground="Gray"/>
</StackPanel>
</Grid>
</syncfusion:SfChart.Header>
To enhance user interactivity, we can enable TooltipTemplate, which display data values when hovering over points in the chart. For more details, refer to the documentation.
<syncfusion:SfChart>
<syncfusion:SfChart.Resources>
<DataTemplate x:Key="toolTipTemplate">
<Border BorderBrush="Transparent"
BorderThickness="2"
CornerRadius="6"
Background="#dacae8"
Padding="5">
<StackPanel>
<TextBlock Text="Household Data"
FontSize="14"
FontWeight="Bold"
Foreground="#553c67"
Margin="5, 0, 0, 0"/>
<Rectangle Height="1.5"
Fill="#684980"
Margin="0,5,0,5"/>
<StackPanel Orientation="Horizontal">
<Ellipse Height="12"
Width="12"
Fill="#684980"
Margin="0,0,6,0"/>
<TextBlock Text="{Binding Item.EnergyConsumption, StringFormat='Energy:
{0}kWh'}" Foreground="Black"
FontWeight="SemiBold"
FontSize="13"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Ellipse Height="12"
Width="12"
Fill="#684980"
Margin="0,0,6,0"/>
<TextBlock Text="{Binding Item.MonthlyCost, StringFormat='Cost : ${0}'}"
Foreground="Black"
FontWeight="SemiBold"
FontSize="13"/>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</syncfusion:SfChart.Resources>
<syncfusion:ScatterSeries ShowTooltip="True"
TooltipTemplate="{StaticResource toolTipTemplate}">
</syncfusion:ScatterSeries>
</syncfusion:SfChart>
Customize the 2D Scatter Chart’s appearance using the Interior property to enhance point visibility with distinct colors.
After executing the previous code examples, the output will appear as shown in the following image.
Configure the Syncfusion® WPF 3D Scatter Chart control by following the steps outlined in the documentation.
<syncfusion:SfChart3D>
<syncfusion:SfChart3D.PrimaryAxis>
<syncfusion:NumericalAxis3D />
</syncfusion:SfChart3D.PrimaryAxis>
<syncfusion:SfChart3D.SecondaryAxis>
<syncfusion:NumericalAxis3D />
</syncfusion:SfChart3D.SecondaryAxis>
<syncfusion:SfChart3D.DepthAxis>
<syncfusion:NumericalAxis3D />
</syncfusion:SfChart3D.DepthAxis>
</syncfusion:SfChart3D>
Bind the collected energy data to the 3D Scatter Chart to visualize the relationship between energy consumption, monthly electricity cost, and average temperature, as shown in the code example below.
<syncfusion:ScatterSeries3D ItemsSource="{Binding EnergyData}"
XBindingPath="EnergyConsumption"
YBindingPath="MonthlyCost"
ZBindingPath="Temperature"/>
To improve the readability and visual appeal of the 3D Scatter Chart, enhance the chart title, tooltip, wall color, series appearance, customize rotation, tilt, and perspective angle. These adjustments make the data more engaging and easier to interpret.
Adding a title makes it easier for users to understand the data being presented. Refer to the following code example to customize the chart title for the 3D Scatter Chart.
<syncfusion:SfChart3D.Header>
<Grid Margin="-270,3,0,10" x:Name="header">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical"
Margin="0,10,5,0"
Background="#90465c"
Width="10"/>
<StackPanel Grid.Column="1">
<TextBlock Text="3D Scatter Charts for Energy Data Visualization"
FontSize="28"
FontWeight="Bold"
Foreground="Black"/>
<TextBlock Text="Exploring Energy Consumption Trends and Patterns Using Interactive Scatter Plots for Better Decision-Making"
FontSize="16"
Foreground="Gray"/>
</StackPanel>
</Grid>
</syncfusion:SfChart3D.Header>
To enhance user interactivity, we can enable the TooltipTemplate, which displays data values when the user hovers over points on the chart.
<syncfusion:SfChart3D>
<syncfusion:SfChart3D.Resources>
<DataTemplate x:Key="toolTipTemplate">
<Border BorderBrush="#653643"
BorderThickness="2"
CornerRadius="6"
Background="#f6edf1"
Padding="5">
<StackPanel>
<TextBlock Text="Household Data"
FontSize="14"
FontWeight="Bold"
Foreground="#a95973"
Margin="5, 0, 0, 0"/>
<Rectangle Height="1.5"
Fill="#653643"
Margin="0,5,0,5"/>
<StackPanel Orientation="Horizontal">
<Ellipse Height="12"
Width="12"
Fill="#a95973"
Margin="0,0,6,0"/>
<TextBlock Text="{Binding Item.EnergyConsumption, StringFormat='Energy:
{0} kWh'}" Foreground="Black"
FontWeight="SemiBold"
FontSize="13"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Ellipse Height="12"
Width="12"
Fill="#a95973"
Margin="0,0,6,0"/>
<TextBlock Text="{Binding Item.MonthlyCost, StringFormat='Cost : ${0}'}"
Foreground="Black"
FontWeight="SemiBold"
FontSize="13"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Ellipse Height="12"
Width="12"
Fill="#a95973"
Margin="0,0,6,0"/>
<TextBlock Text="{Binding Item.Temperature, StringFormat='Temp :{0}°C'}"
Foreground="Black"
FontWeight="SemiBold"
FontSize="13"/>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</syncfusion:SfChart3D.Resources>
<syncfusion:ScatterSeries3D ShowTooltip="True"
TooltipTemplate="{StaticResource toolTipTemplate}"/>
</syncfusion:SfChart3D>
The wall brush enhances the 3D effect by defining the background color or gradient of the chart walls.
<syncfusion:SfChart3D BackWallBrush="#EAD1DC"
LeftWallBrush="#EAD1DC"
RightWallBrush="#EAD1DC"
BottomWallBrush="#EAD1DC"
TopWallBrush="#EAD1DC" />
Customize the 3D Scatter Chart by adjusting ScatterHeight and ScatterWidth to enhance visibility. Additionally, use the Interior property to modify the point color for better distinction.
<syncfusion:SfChart3D>
<syncfusion:ScatterSeries3D ScatterHeight="40"
ScatterWidth="40"
Interior="#a95973"/>
</syncfusion:SfChart3D>
To enhance the visual appeal and readability of the WPF 3D Scatter Chart, you can adjust its rotation, tilt, and perspective angle. These properties improve viewing angles and data exploration, making the chart more interactive.
These customizations improve the user experience by offering better data visibility from different angles. Refer to the following code example to customize these settings.
<syncfusion:SfChart3D Rotation="29"
Tilt="3"
EnableRotation="True"
PerspectiveAngle="90">
</syncfusion:SfChart3D>
After executing the previous code examples, the output will appear as shown in the following image.
When deciding between 2D and 3D Scatter Charts for energy data, consider the following factors:
While 3D Scatter Charts offer deeper insights, they have increased computational costs. Here are some factors to consider.
For more details, refer to the GitHub demo.
When clarity and simplicity are key, 2D Scatter Charts provide a lightweight, performance-friendly way to uncover patterns in energy data. For multi-variable exploration, 3D Scatter Charts offer depth and interactivity, which is ideal for advanced analytics.
With the Syncfusion® WPF Charts control, you can easily implement both and create powerful, interactive dashboards for energy insights. To start visualizing smarter, choose the chart that fits your data best.
We encourage you to follow the steps outlined in this blog. Stay tuned for next week’s Chart of the Week!
If you are an existing customer, you can download the new version of Essential Studio® on the license and downloads page. If you are not a Syncfusion® customer, try our 30-day free trial to check out our incredible features.
If you require assistance, please don’t hesitate to contact us via our support forum, support portal, or feedback portal. We are always eager to help you!