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

Jollen Moyani - Nov 22 '23 - - Dev Community

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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)));
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 forum, support portal, or feedback portal. We are always eager to help you!

Related blogs

Image
penyiapan serta beberapa perihal perlu disadari pemain pemula saat sebelum main judi slots
Image
internationaal advocatenkantoor in Amsterdam en Rotterdam
Image
How LLMs Revolutionize Coding Efficiency

codequality, llm, refactoring
Image
Full-Stack Flutter Developer | Frontend Expertise & API Integration Specialist

flutter, fullstack, database, development
Image
Data Science and AI: The Opportunities and Threats of Contemporary Business: The Key to Growth

ai, datascience, machinelearning, cloud
Image
Transforming Music: The Importance of Collaborating Producer-Writer| Daniel Siegel Loanso
Image
Using Conditional Properties in TypeScript: A Practical Example

typescript
Image
10 Misconceptions Your Boss Holds Concerning Cabin Hook Lock
Image
The Best Advice You Can Receive About Cheap Gas Engineer Near Me
Image
Spouwmuurisolatie in Utrecht
Image
Mastering Cron Jobs: Automating Tasks Efficiently

webdev, javascript, programming, tutorial
Image
Prisma + Postgres

prisma, postgres, postgressql
Image
15 Things You Didn't Know About Lpg Gas Engineer Near Me
Image
7 Simple Changes That Will Make A Huge Difference In Your Best Self-Propelled Wheelchair
Image
10 Meetups About Gas Central Heating Engineer Near Me You Should Attend
Image
sejumlah hal yang jarang-jarang orang tahu perihal slots online
Image
A Strategy Template Allows You to Use WebSocket Market Seamlessly

websocket, cryptocurrency, market, trading
Image
7 Simple Secrets To Totally Moving Your What Is The Lightest Self Propelled Wheelchair
Image
Exploring Free APIs for Stock Data: A Beginner’s Guide
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .