This article will help you add annotations to igDataChart using HTML Canvas. This approach can be used to add graphic elements to other components using HTML Canvas
In this example you will learn how to add annotation as Fibonacci retracement to the Infragistics jQuery Chart. Fibonacci retracement is created by taking two extreme points on a chart and dividing the vertical distance by the key Fibonacci ratios. 0.0% is considered to be the start of the retracement, while 100.0% is a complete reversal to the original part of the move. Fibonacci ratios are mathematical relationships, expressed as ratios, derived from the Fibonacci sequence. The key Fibonacci ratios are 0%, 23.6%, 38.2%, and 100%. More details about Fibonacci retracement you could find in Wikipedia.
The focus in this blog is on how to add annotations, not on Fibonacci retracement. Code comments are mainly related to technical implementation.
Using the code
To start you need to have references to Infragistics NetAdvantage for jQuery scripts and styles. The easiest approach is to use Infragistics Content Delivery Network (CDN) for NetAdvantage for jQuery. The files on the CDN are arranged with the same folder structure as is installed locally on a development machine. The best approach is add only Infragistics Loader (igLoader) as reference and after that to use this component to load references in the proper order.
It is a good practice to have a helper, that contains all required code to add annotations. Helper is named “FibRetracer” (from Fibonacci retracement). This helper contains a method “attachCanvas” that adds an additional HTML canvas over the canvas elements, used inside the igDataChart.
For annotations you need to translate coordinates from canvas coordinates to igDataChart axis values and back. Fortunately igDataChart widget has methods “scaleValue” and “unscaleValue” that can do all this work.
The main part (to generate annotations) is implemented in the method “draw”. In this method new elements are added inside the attached canvas
When Infragistics igDataChart component is created you can attach a function to “refreshCompleted” event. In this function the new canvas is attached.
You need also to add several methods to support mouse events when add annotations. Now you just could use Infragistics jQuery Chart fiddle to look at the code and play with this sample.
For this demo you do not need to install anything. Sample is placed in JS FIDDLE (http://jsfiddle.net ).
When you click on button “Annotate” you could add a Fibonacci retracement as an annotation , dragging your mouse.
To add new elements to your jQuery control is not difficult – you just need to add to it’s DOM required HTML element. Data Visualization related components like charts, maps etc. use canvas to render graphics. You could add own canvas with additional elements.