While talking about design patterns, we often came upon a different category of code solutions. Useful, reusable, good practice code solutions which are just not design patterns. They might be APIs, they might be mini-features, new platform functionality, or services.

We don't want to throw away those good ideas. On the other side, they do not belong to design patterns.

Hence, a chapter called “Recipes - The NAV C/AL Cookbook” was born, as a separate section on the Dynamics Community NAV Patterns Wiki. We hope you’ll find it as useful as we did. And find below one of the first articles on this new section. Note that we’re still using the “Meet the pattern - Know the pattern” format, just to keep an uniform approach on all articles, for the moment.

Creating Custom Charts

by Nikola Kukrika at Microsoft Development Center Copenhagen

Meet the Pattern

The goal of this pattern is to enable you to:

1. Use charts in the web client.
2. Create charts with custom functionality.

Know the Pattern

This pattern enables you to implement a business chart (Specific Chart type) in a way that is maintainable and reusable on other pages. This also enables you to provide specific functionality that is not possible with the Generic Chart type and it enables you to show charts in the web client.

The Business Chart add-in is a special because it is a combination of .NET and Javascript add-ins depending on the display target. In the Microsoft Dynamics NAV Web client, it renders a JavaScript control, while in the Microsoft Dynamics NAV Windows client, it renders a .NET control. Because of this behavior, you can expect minor differences in how the chart is presented in the two clients. Note that this implementation is specific to the Microsoft Dynamics NAV platform code, because it is not possible to create add-ins that combines .NET and JavaScript by using a framework API.

Example of the same chart in the Microsoft Dynamics NAV Windows client:

The most obvious differences in chart rendering in the two clients are: Slightly different line heights, slightly different chart height, legends in web-client charts can be used as toggle filters to show/hide groups (this is not possible in the win client).

Implementation Overview

Add-in Buffer Table

This table is used to encapsulate the logic of the Business Chart Add-in. The table handles the following logic:

• Storing chart values and conversion from .NET to C/AL and vice versa
• Handling of captions: We must use C/AL to provide multilanguage text in add-ins. In addition, the multilanguage text must be encapsulated in a single place, because we pass/read the same dataset from/to the add-in.
• DrillDown logic
• Other helper data related functions, for displaying date, periods, etc. 

Note: It is recommended that you reuse the Business Chart Buffer table (485) as a buffer table or extend. It is a generic table which should cover most of the use cases. Implement a new buffer table only if this table does not meet your needs.

CardPart page

The CardPart page hosts the Business Chart add-in and must use the add-in buffer table as a source table.

On the page, you must implement the following triggers:

• AddInReady – Executed when the page is done rendering. Used to initialize the add-in.
• DataPointClicked – Single-click on an element on the chart.
• DataPointDoubleClicked – Double-click on an element on the chart

The CardPart usually contains a StatusText variable to provide more information about the chart or dataset and a set of actions to control the chart.

The most commonly used actions are: ... Read more on NAV Wiki...