Knowledgebase: Getting Started
Building a Simple Line Chart
Posted by Andrew BT on 20 June 2014 03:14 PM

Building a Simple Line Chart

Creating the Solution

In this example we will create a simple line chart using SciChart WPF. First, ensure you have downloaded and unzipped the SciChart trial package. Next, create a new project selecting WPF Application.

Ensure that the .NET Framework version 4.0 or above is selected as target framework

Now reference the net40 version of SciChart that you received in the trial download package.

Right click the References in your newly created project, and in the Reference Manager, click on Assemblies and search for SciChart. The WPF and Silverlight SciChart assemblies can be discovered from here.

Can’t find them? The default installer directory is %Program Files%/ABT Software Services Ltd/SciChart/Lib/net40. Navigate to the install directory and select the DLL from there.

At this point the solution should build and run, however we now need to add functionality.

Adding the SciChartSurface to the Main Window

Each chart pane within SciChart is represented by the SciChartSurface control. Add one of these to your Xaml and give it a name. We are going to populate it with data in code-behind.

In the code behind, add an event handler to MainWindow.Loaded. In here we are going to create a data series, populate it with data and set the data on the SciChartSurface.

using System;
using System.Diagnostics;
using System.Windows;
using Abt.Controls.SciChart;
using Abt.Controls.SciChart.Model.DataSeries;
using Abt.Controls.SciChart.Utility;

namespace SimpleLineChart
{
    public partial class MainWindow : Window
    {
        private class OutputWindowLogger : ISciChartLoggerFacade
        {
            public void Log(string formatString, params object[] args)
            {
                Debug.WriteLine(formatString, args);
            }
        }

        public MainWindow()
        {
            // Setting a logger will log verbose debug messages to the console, 
            // but will incur a HUGE performance hit
            // so use it sparingly! 
            SciChartDebugLogger.Instance.SetLogger(new OutputWindowLogger());
            SciChartDebugLogger.Instance.WriteLine("Hellow World!");
InitializeComponent();

Loaded += MainWindowLoaded; } private void MainWindowLoaded(object sender, RoutedEventArgs e) { // GrowBy expands a gap around the data when zooming to extents sciChartSurface.YAxis.GrowBy = new DoubleRange(0.2, 0.2); // VisibleRange may be set explicitly, or use AutoRange to zoom to extents sciChartSurface.XAxis.VisibleRange = new DoubleRange(0, 600); sciChartSurface.YAxis.VisibleRange = new DoubleRange(-0.6, 1.2); // Add a data series and some data var series = new XyDataSeries<double, double>(); series.SeriesName ="Sinewave"; for(int i = 0; i < 1000; i++) { series.Append(i, Math.Sin(2*Math.PI*i/1000)); } // Note: Can also be set in Xaml, inside the tag lineSeries.DataSeries = series; } } }

Breaking this code down, we can create 1..N series, each of which contains 1..N X,Y points. We add 1,000 points of a single cycle of a sinewave to the data series in the loop.

Creating the RenderableSeries

The DataSeries must be attached to a RenderableSeries. It can be done explicitly using the DataSeries property on a RenderableSeries, or via a binding to the RenderableSeries.DataSeries tag in XAML.

We can set a single RenderableSeries on the SciChartSurface in xaml as follows:

<!--  Define the SciChartSurface, using a theme from the predefined list  -->
<s:SciChartSurface x:Name="sciChartSurface" s:ThemeManager.Theme="Chrome">
    <!--  Defines the renderable series. Each series may be styled  -->
    <s:SciChartSurface.RenderableSeries>
        <s:FastLineRenderableSeries x:Name="lineSeries" SeriesColor="Gray" />
    </s:SciChartSurface.RenderableSeries>

    <!--  Defines the XAxis, using an explicit VisibleRange  -->
    <s:SciChartSurface.XAxis>
        <s:NumericAxis>
            <s:NumericAxis.VisibleRange>
                <s:DoubleRange Min="0" Max="600" />
            </s:NumericAxis.VisibleRange>
        </s:NumericAxis>
    </s:SciChartSurface.XAxis>

    <!--  Defines the YAxis  -->
    <s:SciChartSurface.YAxis>
        <s:NumericAxis />
    </s:SciChartSurface.YAxis>
</s:SciChartSurface>

 

Now run the application, the result should be as follows:

(33 vote(s))
Helpful
Not helpful

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725