Stats

Coppock Chart

This article demonstrates building a web based interactive chart and is my attempt to assimilate some of the recent updates and best practices that have emerged with Visual Studio 2010 and .NET Framework 4 into my software lexicon.

Introduction

Keeping up with new tooling, technologies, and techniques is a challenge for software developers that requires some dedicated effort. This article demonstrates building a web based interactive chart, and is my attempt to assimilate some of the recent updates and best practices that have emerged with Visual Studio 2010 and .NET Framework 4 into my software lexicon.

Requirements

The chart for this article is a visualisation of the Coppock Indicator for the ASX (Australian Stock Exchange). The Coppock Indicator provides a signal for investors that a bear market has ended and it is time to begin building long term positions in strong companies. The chart will be integrated into a web page that discusses the management of risk when investing in shares. There is over 100 years of data available for the Coppock Indicator, so the interactivity for this chart will be an ability to filter the range.

Chart Basics

Charts are one of the fun parts of math. They show how variables relate in a visual way that conveys meaning at a glance. The variables for the Coppock Indicator are dates and a corresponding value. The date is identifiable as an independent variable (its value is not influenced by other factors), and the value is identifiable as a dependent variable (it's affected by the average price of stocks over time). It is typical to display the independent variable as the horizontal (X) axis and the dependent variable as the vertical (Y) axis. The chart most suitable for the Coppock Indicator is a Point-to-Point graph because the Coppock Indicator is calculated on the last day of each month.

Choosing the Technologies

My background is in enterprise development using C# and the .NET Framework, and I wanted to try out the latest Visual Studio 2010. The choice of technology then starts with which platform to target (web, desktop, or mobile) to reach my intended user. My initial research started with Silverlight because of its ability to target all of the platforms (including Mobile with Windows Phone 7) with an extensive set of components in the Silverlight Toolkit. Another option considered was the web standards platform of HTML and JavaScript (JQuery has charting components). The web standards platform tools are light-weight and, when targeting online users, are likely an ideal choice. As an enterprise developer, I want to focus my learning on targeting a broad audience (customers, external business partners, and users within the business). My choice for building the Coppock Indicator Chart is Silverlight 4 with ASP.NET, and will demonstrate Silverlight's ability to encapsulate rich user experiences into a component that can be integrated with web pages. You can download the tools required for compiling and running the Coppock Charting application from the Silverlight website.

Charting Component for Silverlight

The Silverlight Toolkit contains charting components that provide design time support and also dynamic update at runtime when the underlying data source changes. These chart controls behave consistently with the standard Silverlight controls, e.g., are defined declaratively in XAML and can be styled or completely re-templated if required to achieve a desired layout. The chart components also provide extensibility points; e.g., individual parts of the chart can be replaced with custom built components if the existing functionality doesn’t meet requirements. Note: The charting components in the Silverlight Toolkit are still in the ‘Preview Band’, and could change before being added to the Silverlight SDK.

Declarative User Interface

XAML is a fundamental part of Silverlight. It ensures a separation of concern between user interface layout and application logic because in XAML, it's only possible to declare interface components and their interaction (via triggers). Business logic must be specified in code, and is wired up to elements in the XAML through databinding to properties, events, and commands. XAML can be thought of as declarative programming because every element corresponds to either a class in the .NET Framework or a class in your application.

Databinding and MVVM

The databinding mechanism in Silverlight ensures that modified values are synchronised between the user interface and the underlying code; e.g., when the date range for the Coppock Indicator chart is changed, the chart title is updated to show the new date values. Code classes implementing the INotifyPropertyChanged Interface can participate in this databinding mechanism.

An important best practice to emerge in programming for Silverlight is the MVVM (Model-View-ViewModel) design pattern. This pattern encourages separation of business logic code from code that manipulates the view directly. ViewModel classes can be statically initialised in XAML.

The ViewModel is then made available to all elements in XAML through the DataContext property.

DataContext="{Binding Source={StaticResource coppockViewModel}}"

Making the Chart Interactive

Clicking the Coppock Charts date range HyperlinkButtons will execute a command that causes the chart's datasource to be filtered to reflect the chosen date range. A binding applied to the HyperlinkButton's Command property connects it to the ChangeSeriesStart DelegateCommand which is located in the ViewModel class.

The ability to filter the chart by date range is enabled by the CollectionViewSource type. CollectionViewSource wraps the actual DataSource of the CoppockChart and exposes a View property that is implicitly used when DataBinding occurs. When CollectionViewSource is refreshed, it executes the Filter event which allows each item in the DataSource to be examined to determine if it should be included in the View. DataBinding ensures that this change to the CollectionViewSource View is reflected in the chart.

Locating the Signal Markers

The purpose of the Coppock Indicator is to provide a signal that indicates when the bear market has ended. The algorithm to determine this signal looks for DataItems where the value is less than zero but greater than the previous month's value. A LinkedList is used as the underlying datasource because of this need to inspect the previous item. When a DataItem is found that represents the Coppock Indicator signal, a line and an ellipse with a ToolTip is drawn onto a Canvas that overlays the chart (this technique is described in another article).

Chart Extensibility

Each component that makes up the chart (Series and Axis) is a control. This means that styles can be applied, templates can be modified, or the control can be derived from or even totally replaced with a custom component. To properly display the Coppock Indicator data, end of month values were required for the horizontal X axis. The DateTimeAxis available with the Silverlight Toolkit didn't support this scenario, but by creating a class derived from the standard DateTimeAxis, it was possible to override the GetMajorAxisValues method and modify the DateTime value to display.

Integration with the HTML page

This Coppock Indicator chart emphasises Silverlight as a component part of a web page. This, I think, requires the Silverlight application to be configurable by its hosting page; i.e., as the web page renders in the browser, I would like to perform custom initialisation on the Silverlight component. Initialisation parameters are specified as name value pairs in the initParams member of the object tag hosting the Silverlight application. Any number of name value pairs can be specified in the initParams value (comma separated). The Silverlight Plug-in Object Reference provides a complete reference for integration with the HTML page.

<name="initParams"value="Chart=Coppock"/>

These parameters can then be extracted from StartupEventArgs in the Application_Startup event.

Making the Business Case for Silverlight

Silverlight is a rich client technology built on the .NET Framework that can target web, desktop, and mobile platforms using the rich debugging environment provided by Visual Studio. Silverlight brings us closer to the concept of a single code base targeting multiple platforms. This article has discussed Silverlight's abilities as a component in a web page with HTML and JavaScript integration. This approach to using Silverlight opens the door to SAAS (Software as a Service), where Silverlight applications can be independently hosted, e.g., using the Windows Azure Platform and integrated into a website by specifying the web address. This enables scenarios where an enterprise may want to expose application functionality to business partners or may want to consume components built externally and integrate them into web based applications.

Share

About the Author

I've been working as a software developer since 2000 and hold a Bachelor of Business degree from The Open Polytechnic of New Zealand. Computers are for people and I aim to build applications for people that they would want to use.

Comments and Discussions

Your program sounds interesting. I tried to compile your software but did not managed to run it successfully. I have downloaded all necessary Silverlight programs from Micro$oft webpage, but VisualStudio 2010 compiler gives me 6 errors of the missing namespace.

For example Error 1 and error 6:

Error 1 The type or namespace name 'DataVisualization' does not exist in the namespace 'System.Windows.Controls' (are you missing an assembly reference?) C:\Users\\\Silverlight_Charting\Silverlight.Charting\Silverlight.Charting.Charts\Views\Charts\CoppockView.xaml.cs 11 35 Silverlight.Charting.Charts

Error 6 The type or namespace name 'LineSeries' could not be found (are you missing a using directive or an assembly reference?) C:\Users\\\Silverlight_Charting\Silverlight.Charting\Silverlight.Charting.Charts\Views\Charts\CoppockView.xaml.cs 58 17 Silverlight.Charting.Charts

Check the project references for the Silverlight.Charting.Charts project. Make sure the System.Windows.Controls assemblies are pointing to the location on your machine where you installed the Silverlight Toolkit. Or you can use the assemblies in the Dependencies folder that were included in the download.

Thanks for the reply and tip. I succeed to add references from the Dependencies folder and now i can build, compile and run (press F5 in VisualStudio) the project without errors.

I can see The "Stock Market Investing" site with the "Lorem ipsum" content. But Silverlight chart gives me error message: "The Silverlight plugin has crashed. Send crash report." and that happend with my both browsers: Firefox 12 and Internet Explorer 9.

I am such a noob with Silverlight thou C# is familiar. Guess i am the only one who did not managed to get this chart to work.

Well done. Good job. I was struggling with lineseries to show smooth curve lile bezier curve while drawing the graph. I can see your graph is smooth. What part of the code draws the linecurve smoothly?