Context Menu

Overview

AnyChart Stock adds special context menu items to the flash player's context menu. When user clicks on an AnyChart Stock Flash movie, the following context menu shows up:

The items on the menu are:

All of the context menu settings are configured in the <context_menu> item of the <utils> node.

Here is a sample XML for configuring the context menu:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <utils>
04     <context_menu version_info="false" />
05   </utils>
06 </stock>
01{
02  utils: {
03    contextMenu: {
04      versionInfo: false
05    }
06  }
07}

to top

Limitations

Flash player context menu can contain only 15 elements, including those described in Overview.

If you need to add more slots in context menu you can disable some of the items AnyStock adds to the menu, like "About AnyChart Stock", "Version" or any other.

to top

Turning Context Menu Items On/Off

To turn on an item of AnyChart Stock's context menu, set the corresponding attributes to 'true'. To turn an item off, set the corresponding attribute to 'false'. Here is the description of the context menu attributes:

Attribute Possible Values Description
version_info true
false
Turns On/Off the menu item that displays version info.
print true
false
Turns On/Off the "Print Chart" menu item.
about true
false
Turns On/Off the "About AnyChart Stock" menu item.
export_as_png_image true
false
Turns On/Off the "Save as PNG " menu item.
export_as_jpg_image true
false
Turns On/Off the "Save as JPG " menu item.
export_as_pdf true
false
Turns On/Off the "Save as PDF " menu item.
export_as_interactive_pdf true
false
Turns On/Off the "Save as Interactive PDF" menu item.

This XML syntax demonstrates turning off all items of the context menu in AnyChart Stock:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <utils>
04     <context_menu version_info="false" print="false" about="false" export_as_png_image="false" export_as_jpg_image="false" export_as_pdf="false" export_as_interactive_pdf="false" fullscreen="false" />
05   </utils>
06 </stock>
01{
02  utils: {
03    contextMenu: {
04      versionInfo: false,
05      print: false,
06      about: false,
07      exportAsPngImage: false,
08      exportAsJpgImage: false,
09      exportAsPdf: false,
10      exportAsInteractivePdf: false,
11      fullscreen: false
12    }
13  }
14}

to top

Customization and Localization

The following standard items of the context menu can be customized and localized:

Here is an XML sample for localizing all these items to Russian:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <utils>
04     <context_menu version_info="false" about="false">
05       <print_item_text><![CDATA[Печать Графика...]]></print_item_text>
06       <fullscreen_item_text><![CDATA[Полноэкранный Режим...]]></fullscreen_item_text>
07       <export_as_png_item_text><![CDATA[Сохранить как PNG...]]></export_as_png_item_text>
08       <export_as_jpg_item_text><![CDATA[Сохранить как JPG...]]></export_as_jpg_item_text>
09       <export_as_pdf_item_text><![CDATA[Сохранить как PDF...]]></export_as_pdf_item_text>
10       <export_as_interactive_pdf_item_text><![CDATA[Сохранить как Интерактивный PDF...]]></export_as_interactive_pdf_item_text>
11     </context_menu>
12   </utils>
13 </stock>
01{
02  utils: {
03    contextMenu: {
04      versionInfo: false,
05      about: false,
06      printItemText: "Печать Графика...",
07      fullscreenItemText: "Полноэкранный Режим...",
08      exportAsPngItemText: "Сохранить как PNG...",
09      exportAsJpgItemText: "Сохранить как JPG...",
10      exportAsPdfItemText: "Сохранить как PDF...",
11      exportAsInteractivePdfItemText: "Сохранить как Интерактивный PDF..."
12    }
13  }
14}

The live example below demonstrates that all the items on the context menu have got a new look:

Live Sample:  Context Menu Customization

to top

Using Custom Items

Besides the standard menu items added by the component, you can add your own items to the menu. For the custom menu items, you can specify the required text and define event handlers for user's selection.

The illustration below demonstrates the order how custom menu items are placed against the standard ones added by the component and the flash player:

Adding Items

Custom menu items are supplied as a list; each item must have a text. Besides, you can optionally add a separator bar preceding the item and an identifier that would be used for handling the selection event.

The XML sample below demonstrates adding two custom items with text "Custom Item #1" and "Custom Item #2":

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <utils>
04     <context_menu>
05       <custom_items>
06         <item add_separator="true">
07           <text><![CDATA[Custom Item #1]]></text>
08         </item>
09         <item>
10           <text><![CDATA[Custom Item #2]]></text>
11         </item>
12       </custom_items>
13     </context_menu>
14   </utils>
15 </stock>
01{
02  utils: {
03    contextMenu: {
04      customItems: [
05        {
06          addSeparator: true,
07          text: "Custom Item #1"
08        },
09        {
10          text: "Custom Item #2"
11        }
12      ]
13    }
14  }
15}

Here is the live example demonstrating the customized context menu in action:

Live Sample:  Adding Custom Items to Context Menu

to top

Handling Events

For handling the click event for a specific item, the item must have an identifier. Identifier is defined by the id attribute in the <item> node. Below is a sample XML for adding custom items with identifiers:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <utils>
04     <context_menu>
05       <custom_items>
06         <item id="customItem1" add_separator="true">
07           <text><![CDATA[Custom Item #1]]></text>
08         </item>
09         <item id="customItem2">
10           <text><![CDATA[Custom Item #2]]></text>
11         </item>
12       </custom_items>
13     </context_menu>
14   </utils>
15 </stock>
01{
02  utils: {
03    contextMenu: {
04      customItems: [
05        {
06          id: "customItem1",
07          addSeparator: true,
08          text: "Custom Item #1"
09        },
10        {
11          id: "customItem2",
12          text: "Custom Item #2"
13        }
14      ]
15    }
16  }
17}

For handling the events for the added items, the HTML page with the chart has a special event handler in the JavaScript library supplied with the component.

Online HTML/JavaScript Sample

to top