<html>
<head>
    <title>Adding/Removing Annotations Programmatically</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" language="javascript" src="./../js/AnyChartStock.js?v=1.9.0r9317"></script>
    <!-- chart size settings -->
    <style type="text/css">
        #chartContainer
        {
            width: 800px;
            height: 550px;
            float: left;
        }
        input
        {
            width: 100%;
        }
    </style>
    <script type="text/javascript" language="javascript">
			
			// Creating new chart object. 
			var chart = new AnyChartStock("./../swf/AnyChartStock.swf?v=1.9.0r9317", "./../swf/Preloader.swf?v=1.9.0r9317");
			// Setting XML config file.
			chart.setXMLFile("config.xml");
			// Writing the flash object into the page DOM.
			chart.write("chartContainer");

			// Enabling disabled buttons when chart has rendered
			chart.onChartDraw = function() {
			    document.getElementById("btnAddAnnotationAsJSON").removeAttribute("disabled");
			    document.getElementById("btnAddAnnotationAsXML").removeAttribute("disabled");
			    document.getElementById("btnAddLabel").removeAttribute("disabled");
			    document.getElementById("btnRemoveAllAnnotations").removeAttribute("disabled");
			}

			// Enable btnRemoveSelectedAnnotation button when any annotation has been selected
			chart.onAnnotationSelect = function(id) {
			    document.getElementById("btnRemoveSelectedAnnotation").removeAttribute("disabled");
			}

			// Disable btnRemoveSelectedAnnotation button when no annotation is selected. 
			// This event also fires when the selected annotation has been removed, so we don't 
			// need to duplicate this disabling code to the removeSelectedAnnotation() function
			chart.onAnnotationDeselect = function(id) {
			    document.getElementById("btnRemoveSelectedAnnotation").setAttribute("disabled", "disabled");
			}

            // Returns a random number inside a data range
			function getRandomValue() {
			    return Math.floor(Math.random() * 16 * 100) / 100 + 16;
			}

			// Adds a red horizontal line annotation to the chart at random position using JSON.
			// Annotation settings object doesn't contain id property, so an annotation will be added
            // as many times as this function will be called.
			function addHorizontalLineAnnotationAsJSON() {
				chart.addAnnotation({
					type: "HorizontalLine",
					chart: "idMainChart",
					horizontalLineAnnotation: {
						valueAnchor: getRandomValue(),
						color: "#FF0000"
					}
				});
			}

			// Adds a blue horizontal line annotation to the chart using XML.
            // We have set an id attribute, so each new call of this function will replace an existing annotation 
			// with a new one. 
			function addHorizontalLineAnnotationAsXML() {
			    chart.addAnnotation("<annotation type='HorizontalLine' chart='idMainChart' id='MyHLine'><horizontal_line_annotation value_anchor='" + 
                    getRandomValue() + "' color='#0000FF'/></annotation>");
			}

			// Adds a big predefined label without any interactivity
			function addLabel() {
			    chart.addAnnotation({
			        id: "MyLabel",
			        type: "Label",
			        chart: "idMainChart",
			        allowEdit: false,
			        allowResize: false,
			        labelAnnotation: {
			            valueAnchor: 31.8,
			            timeAnchor: "2008-10-11",
			            settings: {
			                height: 132,
			                width: 248,
                            font: {
                                align: "Center",
                                size: 18
                            },
                            format: "This is a big non-interactive predefined label with orange background",
                            background: {
                                fill: {
                                    type: "Solid",
                                    color: "Orange",
                                    opacity: 0.4
                                },
                                insideMargin: {
                                    top: 18
                                }
                            }
			            }
			        }
			    });
                document.getElementById("btnAddLabel").setAttribute("disabled", "disabled");
                document.getElementById("btnRemoveLabel").removeAttribute("disabled");
			}

			// Since the label is not selectable, it can be removed only by this function or by removeAllAnnotations() 
			function removeLabel() {
			    chart.removeAnnotation("MyLabel");
			    document.getElementById("btnRemoveLabel").setAttribute("disabled", "disabled");
			    document.getElementById("btnAddLabel").removeAttribute("disabled");
			}

            // Removes selected annotation
			function removeSelectedAnnotation() {
				var id = chart.getSelectedAnnotationId()
				chart.removeAnnotation(id);
			}

            // Removes all annotations from the chart
			function removeAllAnnotations() {
			    chart.removeAllAnnotations();
			    document.getElementById("btnRemoveLabel").setAttribute("disabled", "disabled");
			    document.getElementById("btnAddLabel").removeAttribute("disabled");
			}
			
    </script>
    <!-- table settings -->
    <style type="text/css">
        table.settings
        {
            border-style: solid;
            border-width: 1px;
            border-color: #D0CDC9;
        }
        
        table.settings tr th
        {
            font: normal 60% Verdana;
            background-color: #DCD9D5;
            font-weight: bold;
            padding-bottom: 5px;
            padding-top: 5px;
            padding-left: 10px;
            text-align: left;
        }
        table.settings tr td
        {
            background-color: #F8F4F0;
            font: normal 70% Verdana;
            padding-bottom: 2px;
            padding-top: 2px;
            padding-left: 10px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="chartContainer">
        <!-- Chart Container -->
    </div>
    <table class="settings">
        <tr>
            <th>
                Annotations
            </th>
        </tr>
        <tr>
            <td>
                <input id="btnAddAnnotationAsJSON" type="button" value="Add horizontal line at random position using JSON"
                    onclick="addHorizontalLineAnnotationAsJSON();" autocomplete="off" disabled="disabled" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="btnAddAnnotationAsXML" type="button" value="Add horizontal line with id at random position using XML"
                    onclick="addHorizontalLineAnnotationAsXML();" autocomplete="off" disabled="disabled" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="btnAddLabel" type="button" value="Add a big non-interactive label"
                    onclick="addLabel();" autocomplete="off" disabled="disabled" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="btnRemoveLabel" type="button" value="Remove the big non-interactive label"
                    onclick="removeLabel();" autocomplete="off" disabled="disabled" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="btnRemoveSelectedAnnotation" type="button" value="Remove selected annotation"
                    onclick="removeSelectedAnnotation();" autocomplete="off" disabled="disabled" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="btnRemoveAllAnnotations" type="button" value="Remove all annotations"
                    onclick="removeAllAnnotations();" autocomplete="off" disabled="disabled" />
            </td>
        </tr>
    </table>
</body>
</html>

Sample Description

How to use this sample?

This sample shows how to programmatically add annotations to the chart and remove them from the chart.

To add annotations use buttons placed to the right of the chart. If you have added a label annotation, you can remove it using "Remove the big non-interactive label" button. To remove selected annotation or all annotations press appropriate buttons.

to top

How it works

This sample is based on the annotations engine described in Drawing Tools and Annotations article.

When you press one of three enabled buttons, JavaScript method addAnnotation is called. It adds an annotation to the chart. We also pass some custom settings to the component such as anchor points position, otherwise an annotation won't be added.

Note: Each time you press "Add horizontal line with id at random position using XML" button, new annotation is added with the same identifier. When it happens, the old one with this identifier is replaced with the new one. So there will never be two annotations with the same identifier. The "Add horizontal line at random position using JSON" button adds an annotation without defining an id for it, so it is generated automatically, and no annotation is removed.

"Add a big non-interactive label" button press handler illustrates how to add a fully customized annotation. This annotation can be removed only by a "Remove the big non-interactive label" or "Remove all annotations" buttons because the annotation is made non-interactive, so it cannot be selected. This illustrates how an annotation identifier can be used to remove the annotation.

to top

AnyChartStock JavaScript API

This sample uses the following methods, properties and events from AnyChartStock JavaScript API:

Item Type Description
addAnnotation Method Adds new annotation to the chart.
This function can be called only onChartDraw event has been fired, if you call addAnnotation prior to that - no annotation is added.
getSelectedAnnotationId Method Returns id of the selected annotation.
removeAllAnnotations Method Removes all annotations from all charts.
removeAnnotation Method Removes an annotation from the chart.
setXMLFile Method Sets chart XML configuration file path.
write Method Adds the chart to HTML DOM as a child of the specified container.
onAnnotationDeselect Event This event is dispatched when an annotation looses focus.
onAnnotationSelect Event This event is dispatched when an annotation is selected.
onChartDraw Event This event is dispatched when the AnyChart Stock is drawn.

to top

Prerequisites

This section lists all configuration, data and auxiliary files required for this sample.

Configuration file

CSV files

SWF files

  • AnyChartStock.swf - AnyChart Stock component.
  • Preloader.swf - AnyChart Stock helper component that loads the main component (AnyChartStock.swf) and displays loading progress.

JavaScript Libraries

  • AnyChartStock.js - A JavaScript library that is shipped with AnyChart Stock component. It is used to embed the component into HTML DOM and to comunicate with the Flash part.

to top

The information contained in this website is for general information purposes only. All sample data provided on this site is for demonstration purposes only.

The logos and names of other companies and products mentioned on this site are copyright and/or trademarks of their respective owners.

The content on this site, including news, quotes, data and other information, is provided for your personal information only, and is intended for demonstration purposes only. Content on this site is not appropriate for the purposes of making a decision to carry out a transaction or trade. Nor does it provide any form of advice (investment, tax, legal) amounting to investment advice, or make any recommendations regarding particular financial instruments, investments or products.

In no event AnyChart will be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.

This site may point to other Internet sites that may be of interest to you, however AnyChart does not endorse or take responsibility for the content on such other sites

Market data and News provided by and copyright RediNews, Incorporated.