Full Screen Mode

Overview
Important Note
Context Menu
Full Screen Button
Resizing

Overview

AnyChart Stock supports an ability to view charts in Full Screen Mode. This feature is very useful to view chart details or for presentations. You must have version 9.0.28.0 or later of Flash Player installed to use full-screen mode and 9.0.115.0 or later for hardware-scaled full-screen mode.

End-user security was taken in consideration by Adobe Flash Player developers in the implementation of this feature, and developers need to understand the following end-user, security-related restrictions and design content accordingly. These restrictions come from the nature and design of Flash Player and AnyChart component can not overcome them.

If you don't use AnyChart Stock JS Library and want to enable full-screen mode, you must add a new <object> and <embed> tag parameter, allowFullScreen, to their HTML. This parameter defaults to false, or not allowing full screen. To allow full-screen, developers must set allowFullScreen to true in their <object>/<embed> tags.
An overlay dialog box will appear when the movie enters full-screen mode, instructing the user how to exit and return to normal mode. The dialog box appears for a few seconds and then fades out.
The keyboard shortcuts which terminate full-screen mode are Escape (Windows and Mac OS), Control+W (Windows), Command+W (Mac OS), and Alt+F4 (Windows).
Users cannot enter text in text input fields while in full-screen mode. All keyboard input and key-related functions are disabled while in full-screen mode, with the exception of the keyboard shortcuts that take the viewer out of full-screen mode. This means you can't use field based input of Range Picker. (In last releases Adobe claims these restrictions to be removed, but in fact text input in full screen is still not fully functional, AnyChart team are keepS eye on this and will do everything to remove this restriction as soon as it's possible.)
The user can disable full-screen mode for all Flash movies by adding a setting to the Flash Player configuration file mms.cfg.

These restrictions apply to the Flash plug-in and ActiveX control but not to the Flash stand-alone player or Flash projectors.

Importante Note

Since Flash Player version 11.3.300.271, launching full screen mode via context menu doesn't work, this bug has been reported to Adobe: https://bugbase.adobe.com/index.cfm?event=bug&id=3310959, but its status is still "Deferred" (as of January 2013). If you'd like to have this option be functional again we encourage you to vote for the solution in Adobe Bugtracker.

We are keeping the information about this feature intact in case anyone uses older versions of Flash Player, for everyone who keeps Flash Player up to date AnyStock version 1.8.0 and later offers Full Screen Button option.

Context menu

Full screen mode can be (see note above) activated from context menu. When user clicks on the chart with the right button, context menu appears. One of the items in context menu is "Show fullscreen...".

Illustration below shows the default context menu with fullscreen item highlighted:

Full Screen Button

Full screen mode can be activated using full screen button, you have to enable it explictly as shown below:

XML/JSON Syntax

XML Code
JSON 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
                <full_screen_button enabled="true" />
        
            05
              </utils>
        
            06
            </stock>

01{
02  utils: {
03    fullScreenButton: {
04      enabled: true
05    }
06  }
07}

Here is a sample chart with full screen button enabled, you can see it in range selector panel, next to "MAX" button:

Live Sample: Full Screen Mode - Full Screen Button Sample

Button Placement

There are two options for the placement: "Absolute" and "StickToPresetsPanel", the mode is set by position subnode:

XML/JSON Syntax

XML Code
JSON 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
                <full_screen_button enabled="true">
        
            05
                  <position mode="StickToPresetsPanel" />
        
            06
                </full_screen_button>
        
            07
              </utils>
        
            08
            </stock>

01{
02  utils: {
03    fullScreenButton: {
04      enabled: true,
05      position: {
06        mode: "StickToPresetsPanel"
07      }
08    }
09  }
10}

In case of "StickToPresetsPanel" mode button is placed in Range Selector Presets Panel and you have to enable this panel to see the button, in case of "Absolute" mode you can decide where you want to see a button using anchors and offsets:

XML/JSON Syntax

XML Code
JSON 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
                <full_screen_button enabled="true">
        
            05
                  <position mode="AbsoluteAnchor" anchor="LeftTop" offset_x="10" offset_y="10" width="10" height="10" />
        
            06
                </full_screen_button>
        
            07
              </utils>
        
            08
            </stock>

01{
02  utils: {
03    fullScreenButton: {
04      enabled: true,
05      position: {
06        mode: "AbsoluteAnchor",
07        anchor: "LeftTop",
08        offsetX: 10,
09        offsetY: 10,
10        width: 10,
11        height: 10
12      }
13    }
14  }
15}

Button Visualization

You can choose colors for the button in different states:

XML/JSON Syntax

XML Code
JSON 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
                <full_screen_button>
        
            05
                  <fill />
        
            06
                  <background>
        
            07
                    <fill />
        
            08
                    <border />
        
            09
                    <corners />
        
            10
                    <inside_margin />
        
            11
                  </background>
        
            12
                  <states>
        
            13
                    <normal>
        
            14
                      <fill />
        
            15
                      <background>
        
            16
                        <fill />
        
            17
                        <border />
        
            18
                        <corners />
        
            19
                        <inside_margin />
        
            20
                      </background>
        
            21
                    </normal>
        
            22
                    <hover>
        
            23
                      <fill />
        
            24
                      <background>
        
            25
                        <fill />
        
            26
                        <border />
        
            27
                        <corners />
        
            28
                        <inside_margin />
        
            29
                      </background>
        
            30
                    </hover>
        
            31
                    <full_screen_normal>
        
            32
                      <fill />
        
            33
                      <background>
        
            34
                        <fill />
        
            35
                        <border />
        
            36
                        <corners />
        
            37
                        <inside_margin />
        
            38
                      </background>
        
            39
                    </full_screen_normal>
        
            40
                    <full_screen_hover>
        
            41
                      <fill />
        
            42
                      <background>
        
            43
                        <fill />
        
            44
                        <border />
        
            45
                        <corners />
        
            46
                        <inside_margin />
        
            47
                      </background>
        
            48
                    </full_screen_hover>
        
            49
                  </states>
        
            50
                </full_screen_button>
        
            51
              </utils>
        
            52
            </stock>

01{
02  utils: {
03    fullScreenButton: {
04      fill: {},
05      background: {
06        fill: {},
07        border: {},
08        corners: {},
09        insideMargin: {}
10      },
11      states: {
12        normal: {
13          fill: {},
14          background: {
15            fill: {},
16            border: {},
17            corners: {},
18            insideMargin: {}
19          }
20        },
21        hover: {
22          fill: {},
23          background: {
24            fill: {},
25            border: {},
26            corners: {},
27            insideMargin: {}
28          }
29        },
30        fullScreenNormal: {
31          fill: {},
32          background: {
33            fill: {},
34            border: {},
35            corners: {},
36            insideMargin: {}
37          }
38        },
39        fullScreenHover: {
40          fill: {},
41          background: {
42            fill: {},
43            border: {},
44            corners: {},
45            insideMargin: {}
46          }
47        }
48      }
49    }
50  }
51}

Resizing

When chart switches into Fullscreen mode it resizes to the maximum size available on users PC. So, from the small chart sized, for example, 400x300 px on the page, user can see big chat sized, for example, 1680x1050 px.

Developer can define the mode of chart resizing. Sample XML below shows where resizing mode is configured:

XML/JSON Syntax

XML Code
JSON 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
                <full_screen_mode resizing_mode="Recalculate" />
        
            05
              </utils>
        
            06
            </stock>

01{
02  utils: {
03    fullScreenMode: {
04      resizingMode: "Recalculate"
05    }
06  }
07}

As you can see resizing_mode attribute in <full_screen_mode> node sets the resizing mode.

resizing_mode can have the following values Recalculate, Stretch or Fit. These modes are described below.

Resizing Mode: Recalculate

In Recalculate mode chart uses all available place in fullscreen mode - plotting area recalculates its size, and text and all other elements remain the same size. This mode is useful when you have a lot of series and indicators on the chart and want to take a closer look at them.

Click on the image below to see how chart changes when it is switched into fullscreen mode in Recalculate mode and screen size 1680x1050:

Sample XML to enable Recalculate mode:

XML/JSON Syntax

XML Code
JSON 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
                <full_screen_mode resizing_mode="Recalculate" />
        
            05
              </utils>
        
            06
            </stock>

01{
02  utils: {
03    fullScreenMode: {
04      resizingMode: "Recalculate"
05    }
06  }
07}

Live sample of chart in Recalculate mode. As soon as chart is displayed click the right mouse button and select "Show Full screen...":

Live Sample: Full Screen Mode - Resizing Mode - Recalculate

Resizing Mode: Stretch

In Stretch mode chart stretches over the screen and most of the elements, such as text, lines and other elements are scaled and chart in fullscreen mode looks almost like in original size, but stretched to the fullscreen.

Click on the picture below to see how chart changes in Stretch mode and screen sized 1680x1050:

Sample XML to enable Stretch mode:

XML/JSON Syntax

XML Code
JSON 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
                <full_screen_mode resizing_mode="Stretch" />
        
            05
              </utils>
        
            06
            </stock>

01{
02  utils: {
03    fullScreenMode: {
04      resizingMode: "Stretch"
05    }
06  }
07}

Live sample of the chart in Stretch mode. As soon as chart is displayed click the right mouse button and select "Full screen...":

Live Sample: Full Screen Mode - Resizing Mode - Stretch

Resizing Mode: Fit

In Fit mode chart resizes taking an account the screen dimensions and chart proportions remain unchanged, so if, for example, chart was square on the page - it will be square in fullscreen as well. This mode is set by default.

Click on the picture below to see how chart changes in Fit mode and screen sized 1680x1050:

Sample XML to set Fit mode:

XML/JSON Syntax

XML Code
JSON 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
                <full_screen_mode resizing_mode="Fit" />
        
            05
              </utils>
        
            06
            </stock>

01{
02  utils: {
03    fullScreenMode: {
04      resizingMode: "Fit"
05    }
06  }
07}

Live sample of Fit mode. As soon as chart is displayed click the right mouse button and select "Full screen...":

Live Sample: Full Screen Mode - Resizing Mode - Fit