Chart of the Week: Creating a WPF Fast Line Chart for Cryptocurrency Trade Analysis
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (186)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (199)File Formats  (63)Flutter  (129)JavaScript  (218)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (871)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (155)Xamarin  (160)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (145)Chart  (123)Cloud  (14)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (608)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (479)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (39)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (29)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (361)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (572)What's new  (311)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Chart of the Week: Creating a WPF Fast Line Chart for Cryptocurrency Trade Analysis

Chart of the Week: Creating a WPF Fast Line Chart for Cryptocurrency Trade Analysis

Welcome to our Chart of the Week blog series!

Today, we‘ll use the Syncfusion WPF Fast Line Chart to visualize cryptocurrency trade analysis, focusing on the historical price trends and trading volumes of Bitcoin.

 We will put particular emphasis on how the value of Bitcoin has evolved over a specific time frame. This blog aims to provide a comprehensive understanding of cryptocurrency trade analysis.Visualizing Bitcoin trade data using Syncfusion WPF Fast Line Chart

Let’s get started!

Step 1: Collecting the data

First, we need to collect cryptocurrency trade data on Bitcoin’s price and volume trends from Yahoo Finance. Specifically, we’ll use data from Jan. 1, 2020, to Jan. 1, 2023.

Step 2: Preparing the data for the chart

Then, create the BitCoinModel class to store Bitcoin data using the Date, BitCoinPrice, and Volume properties.

Refer to the following code example.

public class BitCoinModel
{
    public DateTime Date { get; set; }
    public double BitCoinPrice { get; set; }
    public double Volume { get; set; }
    public BitCoinModel(DateTime dateTime, double bitCoinPrice, double volume)
    {
        Date = dateTime;
        BitCoinPrice = bitCoinPrice;
        Volume = volume;
    }
}

Next, generate the Bitcoin data collection using the BitCoinViewModel class and its BitcoinCollection property. Then, assign the CSV data to the Bitcoin data collection using the ReadCSV method, which stores it in the BitcoinCollection property.

Refer to the following code example.

public class BitCoinViewModel
{
    List<BitCoinModel> bitCoinCollection;
    public List<BitCoinModel> BitCoinCollection
    {
        get
        {
            return bitCoinCollection;
        }
        set
        {
            bitCoinCollection = value;
        }
    }
    public BitCoinViewModel()
    {
        BitCoinCollection = new List<BitCoinModel>();
        ReadCSV("BitCoinTradeAnalysisDemo.Resources.data.csv");
    }
    private void ReadCSV(string resourceStream)
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream? inputStream = executingAssembly.GetManifestResourceStream(resourceStream);
        string? line;
        List<string> lines = new List<string>();
        if (inputStream != null)
        {
            using StreamReader reader = new StreamReader(inputStream);
            while ((line = reader.ReadLine()) != null)
            {
                lines.Add(line);
            }
            lines.RemoveAt(0);
            foreach (var dataPoint in lines)
            {
                string[] data = dataPoint.Split(',');
                //To get the date data.
                DateTime date = DateTime.Parse(data[0]); 
                //To get the price data in thousands (K).
                var price = Convert.ToDouble(data[5])/1000; 
                //To get the volume data in billions (B).
                var volume = Convert.ToDouble(data[6])/ 1000000000; 
                BitCoinCollection.Add(new BitCoinModel(date, Math.Round(price, 2), Math.Round(volume, 2)));
            }
        }
    }
}

Step 3: Configuring the Syncfusion WPF Charts control

Configure the Syncfusion WPF Charts control by following this documentation.

Refer to the following code example.

<chart:SfChart>
    
 <!--Initialize the axis for chart-->
 <chart:SfChart.PrimaryAxis>
  <chart:DateTimeAxis>
  </chart:DateTimeAxis>
 </chart:SfChart.PrimaryAxis>
    
 <chart:SfChart.SecondaryAxis>
  <chart:NumericalAxis>
  </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>

</chart:SfChart>

Step 4: Binding data to the chart

We’ll be utilizing the Syncfusion WPF FastLineSeries instance to bind the Bitcoin data. This will enable us to analyze cryptocurrency trading trends effectively in the chart.

In this example, we need two fast-line series, one to analyze Bitcoin price and another to analyze Bitcoin volume. The Syncfusion WPF Charts control provides a way to arrange multiple series inside the same chart area.

Refer to the following code example.

<chart:SfChart>
    
 <!--Initialize the series for chart-->
 <chart:FastLineSeries ItemsSource="{Binding BitCoinCollection}"
                       XBindingPath="Date" 
                       YBindingPath="BitCoinPrice">
 </chart:FastLineSeries>
 <chart:FastLineSeries ItemsSource="{Binding BitCoinCollection}"
                       XBindingPath="Date" 
                       YBindingPath="Volume">
 </chart:FastLineSeries>

</chart:SfChart>

In the previous code example for Bitcoin price data, we bound the BitCoinCollection with the ItemSource property. We also specified the XBindingPath and YBindingPath with the Date and BitCoinPrice properties, respectively.

For Bitcoin volume data, we associated the BitCoinCollection with the ItemSource property and designated the XBindingPath and YBindingPath using the Date and Volume properties, respectively.

Step 5: Multi-Axis integration

As I said before, for this demo, we’ll utilize two fast-line series to analyze Bitcoin price and volume data. To do this, we use a shared x-axis and two y-axis for Bitcoin price and another for Bitcoin volume analysis.

In SfChart, each series type includes two properties: XAxis and YAxis, which support multiple axes. For the Bitcoin price FastLineSeries, it automatically uses the chart’s default x- and y-axes. To add an additional y-axis for the Bitcoin volume FastLineSeries, you must assign the required y-axis within the series.

Refer to the following code example to add an additional y-axis for representing Bitcoin volume in the fast line graph.

<chart:SfChart >    
 
 <!—Series 1-->
 <chart:FastLineSeries>
 </chart:FastLineSeries>
 
 <!—Series 2 with additional y- axis-->
 <chart:FastLineSeries>
  <chart:FastLineSeries.YAxis>
   <chart:NumericalAxis/>
  </chart:FastLineSeries.YAxis>
 </chart:FastLineSeries>

</chart:SfChart>

Step 6: Customizing the chart appearance

We can enhance the appearance of the WPF fast line chart by customizing its elements.  

Personalized titles

We can employ the Header property to define the chart’s title, improving the readability of the displayed data. Additionally, the header can be positioned on the left or right side of the chart using the HorizontalHeaderAlignment property.

Refer to the following code example.

<chart:SfChart HorizontalHeaderAlignment="Left" >
    
 <chart:SfChart.Header>
  <Border BorderBrush="White" Margin="0, 0, 0, 10">
   <StackPanel Orientation="Horizontal">
    <Grid Width="10" Background="#2C8CEE" Margin="0, 8, 0, 5"/>
    <StackPanel>
     <TextBlock FontSize="25" Margin="5" Text="Bitcoin price history from January 2020 to January 2022"/>
     <TextBlock FontSize="14" Margin="5" Text="The price of a bitcoin in USD, and the volume of bitcoins traded in USD."/>
    </StackPanel>
   </StackPanel>        
  </Border>
 </chart:SfChart.Header>

</chart:SfChart>

Axis customization

We can customize the chart axis and its elements like in the following code example. For better readability, we will make the y-axis representing Bitcoin volume invisible by setting the axis Visibility property to Collapsed.

XML

<chart:SfChart>
    
 <chart:SfChart.Resources>
  <Style TargetType="Line" x:Key="secondaryTicklineStyle">
   <Setter Property="Stroke" Value="LightGray"/>
   <Setter Property="StrokeThickness" Value="0"/>
  </Style>
  <DataTemplate x:Key="postfixLabelTemplate">
   <TextBlock FontSize="10" VerticalAlignment="Center" Text="K"/>
  </DataTemplate>
 </chart:SfChart.Resources>

 <!--Initialize the axis for the chart-->
 <chart:SfChart.PrimaryAxis>
  <chart:DateTimeAxis IntervalType="Months" Interval="3" 
                      LabelFormat="dd-MMM-yy"
                      LabelCreated="DateTimeAxis_LabelCreated"
                      EdgeLabelsDrawingMode="Shift"
                      EdgeLabelsVisibilityMode="AlwaysVisible"
                      ShowGridLines="False">
  </chart:DateTimeAxis>
 </chart:SfChart.PrimaryAxis>
    
 <chart:SfChart.SecondaryAxis>
  <chart:NumericalAxis ShowGridLines="True" 
         PostfixLabelTemplate="{StaticResource postfixLabelTemplate}"
         OpposedPosition="True" Interval="10"
         MajorTickLineStyle="{StaticResource secondaryTicklineStyle}">
   <chart:NumericalAxis.AxisLineStyle>
    <Style TargetType="Line">
     <Setter Property="Stroke" Value="White"/>
    </Style>
   </chart:NumericalAxis.AxisLineStyle>
  </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>

 <!--Initialize the series 1 for chart-->
 <chart:FastLineSeries>
 </chart:FastLineSeries>
                              
 <!—Series 2 with additional y-axis-->
 <chart:FastLineSeries>
  <chart:FastLineSeries.YAxis>
   <chart:NumericalAxis ShowGridLines="False" Visibility="Collapsed"/>
  </chart:FastLineSeries.YAxis>
 </chart:FastLineSeries>

</chart:SfChart>

C#

private void DateTimeAxis_LabelCreated(object sender, LabelCreatedEventArgs e)
{
    var axis = sender as DateTimeAxis;
    if (axis != null)
    {
        if (DateTime.TryParse(e.AxisLabel.LabelContent.ToString(), out var axisValue))
        {
            e.AxisLabel.LabelContent = axisValue.ToString("MMM-yy", CultureInfo.InvariantCulture);
        }
    }
}

Series customization

Refer to the following code example to set the fill colors for the FastLineSeries using the Interior property.

<chart:SfChart>

 <chart:FastLineSeries Interior="#2C8CEE">
 </chart:FastLineSeries>
 <chart:FastLineSeries Interior="LightGray">
 </chart:FastLineSeries>

</chart:SfChart>

Step 7: Adding interactivity support

We’ll incorporate the Trackball feature, which enhances interactivity by allowing you to track a data point with the cursor closely.

Refer to the following code example.

<chart:SfChart>
  <chart:SfChart.Resources>
  <DataTemplate x:Key="trackballLabelTemplate">
   <Border CornerRadius="5" BorderThickness="1" 
           Background="White" Margin="8">
    <StackPanel>
     <TextBlock Foreground="Blue" FontWeight="Bold" Text="Bitcoin Price"/>
     <TextBlock Foreground="Black" Text="{Binding ValueY, StringFormat={}{0}K}"/>
    </StackPanel>
   </Border>
  </DataTemplate>
  
  <DataTemplate x:Key="trackballLabelTemplate2">
   <Border CornerRadius="5" BorderThickness="1" 
           Background="White" Margin="8">
    <StackPanel>
     <TextBlock Foreground="#808080" Text="Volume" FontWeight="Bold"/>
     <TextBlock Foreground="Black" Text="{Binding ValueY, StringFormat={}{0}B}"/>
    </StackPanel>
   </Border>
  </DataTemplate>
 </chart:SfChart.Resources>
  
 <!--Initialize the axis for chart-->
 <chart:SfChart.PrimaryAxis>
  <chart:DateTimeAxis ShowTrackBallInfo="True">
  </chart:DateTimeAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.Behaviors>
  <chart:ChartTrackBallBehavior/>
 </chart:SfChart.Behaviors>
 
 <!--Initialize the series 1 for chart-->
 <chart:FastLineSeries ShowTrackballInfo="True" TrackBallLabelTemplate="{StaticResource trackballLabelTemplate}">		
 </chart:FastLineSeries>

 <!--Series 2 with additional Y y-axis-->
 <chart:FastLineSeries ShowTrackballInfo="True" TrackBallLabelTemplate="{StaticResource trackballLabelTemplate2}"/>

</chart:SfChart>

Step 8: Adding chart annotations

You can add annotations to pinpoint specific areas of interest within the chart. In this instance, we’ll use text annotations to emphasize particular contexts within the chart area.

Refer to the following code example.

<chart:SfChart> 
 
 <chart:SfChart.Annotations>        
  <chart:TextAnnotation Text="Price" X1="2020/10/25" Y1="30.5" 
                        Foreground="#2C8CEE" FontSize="15"
                        FontWeight="Bold"/>
  <chart:TextAnnotation Text="in USD" X1="2020/10/18" Y1="27.7" 
                        Foreground="#2C8CEE" FontSize="15”
                        FontWeight="Bold"/>
  <chart:TextAnnotation Text="Volume" X1="2021/06/15" Y1="15.7" 
                        Foreground="DarkGray" FontSize="15”
                        FontWeight="Bold"/>
  <chart:TextAnnotation Text="(different scale)" X1="2021/05/25" Y1="12.7" 
                        Foreground="DarkGray" FontSize="15" 
                        FontWeight="Bold"/> 
</chart:SfChart.Annotations> </chart:SfChart>

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

Visualizing cryptocurrency trade data using the WPF Fast Line Chart
Visualizing cryptocurrency trade data using the WPF Fast Line Chart

GitHub reference

For more information, refer to the demo on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve explored how to visualize the data on cryptocurrency trade trends using the Syncfusion WPF Fast Line Chart. We encourage you to follow the steps outlined in this blog and share your feedback in the comments section below.

Current customers can download the new version of Essential Studio from the License and Downloads page. If you are not a Syncfusion customer, try our 30-day free trial to check out the Charts control’s features.

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

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top