Posts published on March 2017

API-Events

API

Events demo

Loader

LoaderInitComplete
Complete load the Chart’s library files

[loadeobject].LoaderInitComplete = function(){};

1	[loadeobject].LoaderInitComplete = function(){};

Chart (Layout)

readyComplete
Complete read all files for the layout

[chartobject].events.layout.readyComplete = function(){}

1	[chartobject].events.layout.readyComplete = function(){}

initComplete
Complete init all properties and objects for the layout

[chartobject].events.layout.initComplete = function(){}

1	[chartobject].events.layout.initComplete = function(){}

onFullPage
Event when the chart opens to full screen or not

[chartobject].events.layout.onFullPage = function(true|false){}

1	[chartobject].events.layout.onFullPage = function(true\|false){}

onPreloadStart
Event when the “preload” (wait animation) start

[chartobject].events.layout.onPreloadStart = function(parent, width, height){}

1	[chartobject].events.layout.onPreloadStart = function(parent, width, height){}

onPreloadFinished
Event when the “preload” (wait animation) finished

[chartobject].events.layout.onPreloadFinished = function(parent){}

1	[chartobject].events.layout.onPreloadFinished = function(parent){}

Chart object

createComplete
The chart object is successfully created and ready to work

[chartobject].events.chart.createComplete = function(){}

1	[chartobject].events.chart.createComplete = function(){}

onChangeMajorsFavorites
Change majors favorites in the chart

[chartobject].events.chart.onChangeMajorsFavorites = function(returnFavprites, SymbolID, status){}

1	[chartobject].events.chart.onChangeMajorsFavorites = function(returnFavprites, SymbolID, status){}

onChangeComparesFavorites
Change compares favorites in the chart

[chartobject].events.chart.onChangeComparesFavorites = function(returnFavprites, SymbolID, status){}

1	[chartobject].events.chart.onChangeComparesFavorites = function(returnFavprites, SymbolID, status){}

onChangeIndicatorsFavorites
Change indicators favorites in the chart

[chartobject].events.chart.onChangeIndicatorsFavorites = function(returnFavprites, SymbolID, status){}

1	[chartobject].events.chart.onChangeIndicatorsFavorites = function(returnFavprites, SymbolID, status){}

onChangeSymbol
Change current symbol in the chart

[chartobject].events.chart.onChangeSymbol = function(parentid, SymbolObject){}

1	[chartobject].events.chart.onChangeSymbol = function(parentid, SymbolObject){}

onChangeTimeframe
Change current timeframe in the chart

[chartobject].events.chart.onChangeTimeframe = function(parentid,  TimeFrameID){}

1	[chartobject].events.chart.onChangeTimeframe = function(parentid, TimeFrameID){}

onTimeZoneChanged
Change current time zone in the chart

[chartobject].events.chart.onTimeZoneChanged = function(parentid, LongSecondsOffset){}

1	[chartobject].events.chart.onTimeZoneChanged = function(parentid, LongSecondsOffset){}

onPriceTypeChange
Change current price type in the chart

[chartobject].events.chart.onPriceTypeChange = function(parentid, PriceType){}

1	[chartobject].events.chart.onPriceTypeChange = function(parentid, PriceType){}

onLastUpdateChange
The event occurs when the data is updated

[chartobject].events.chart.onLastUpdateChange = function(parentid, StringLastUpdateDate){}

1	[chartobject].events.chart.onLastUpdateChange = function(parentid, StringLastUpdateDate){}

Chart (Shape)

onStartDrawing
The event happens when we start drawing a shape

[chartobject].events.shape.onStartDrawing = function(){}

1	[chartobject].events.shape.onStartDrawing = function(){}

onStopDrawing
The event occurs when we have finished drawing a shape

[chartobject].events.shape.onStartDrawing = function(){}

1	[chartobject].events.shape.onStartDrawing = function(){}

onDeleted
The event occurs when we delete a shape

[chartobject].events.shape.onDeleted = function(){}

1	[chartobject].events.shape.onDeleted = function(){}

onSelectChange
An event occurs when we select another shape

[chartobject].events.shape.onSelectChange = function(){}

1	[chartobject].events.shape.onSelectChange = function(){}

onEndDrag
The event occurs when we finish moving the shape

[chartobject].events.shape.onSelectChange = function(){}

1	[chartobject].events.shape.onSelectChange = function(){}

onEndSize
The event occurs when we finish moving the resizing of the shape

[chartobject].events.shape.onEndSize = function(){}

1	[chartobject].events.shape.onEndSize = function(){}

onDeleted
The event occurs when we have already deleted the figure

[chartobject].events.shape.onDeleted = function(){}

1	[chartobject].events.shape.onDeleted = function(){}

Chart (Study|Indicators)

onUpdated
The event occurs when we change the parameters in the indicator

[chartobject].events.study.onUpdated = function(){}

1	[chartobject].events.study.onUpdated = function(){}

onAdded
The event occurs when the indicator is added

[chartobject].events.study.onAdded = function(){}

1	[chartobject].events.study.onAdded = function(){}

onDeleted
The event occurs when we delete the indicator

[chartobject].events.study.onDeleted = function(){}

1	[chartobject].events.study.onDeleted = function(){}

Loclization

onChange
The event occurs when the language changes

[chartobject].events.localization.onChange = function(parentid, LanguageID, rtl|ltr){}

1	[chartobject].events.localization.onChange = function(parentid, LanguageID, rtl\|ltr){}

Version 5.3.3

Features, Versions

Updates:

Added more events callback for Shape and Indicators to notify on adding, modifying, dragging and resizing.
Can be used to collect BI or persist user state after each change.

Change Size

API

 // arg1 - width
 // arg2 - height
 function changeSize(arg1,arg2) {
    objChartMain1.api.layout.set('width||height', arg1 + "||" + arg2);
 }

// arg1 - width

// arg2 - height

function changeSize(arg1,arg2) {

objChartMain1.api.layout.set('width||height', arg1 + "||" + arg2);

}

Version 5.3.2

Features, Versions

New Features:

Responsive Mode.
A new property objChartMain3.apiinit.parentRelativeObjectID enables referencing a relative parent for automatic resizing.
This feature is mainly for responsive web platforms, which embed the Chart inside an internal container.
The Chart will resize to accommodate new real-estate size among the rest of the page containers.

 //Enable Responsive mode via setting the relative parent
  objChartMain3.apiinit.parentRelativeObjectID = <ID of relative parent>

1 2	//Enable Responsive mode via setting the relative parent objChartMain3.apiinit.parentRelativeObjectID = <ID of relative parent>

Light Mode.
This feature offers a solution for reducing loading file size signature, by marking the none required modules.

 //use both API settings inside the <objChartMain>.events.layout.readyComplete event.

  //Enable/Disable the light mode
  <objChartMain>.apiinit.guipart.litemode = true/false;

  //Configure specific modules to load or prevent from loading.
  //<object> is one from the following objects: menu, toolbar, zoom , signals , plugs or header
  <objChartMain>.apiinit.guipart.enabled.<object> = true/false;

//use both API settings inside the <objChartMain>.events.layout.readyComplete event.

//Enable/Disable the light mode

<objChartMain>.apiinit.guipart.litemode = true/false;

//Configure specific modules to load or prevent from loading.

//<object> is one from the following objects: menu, toolbar, zoom , signals , plugs or header

<objChartMain>.apiinit.guipart.enabled.<object> = true/false;

Custom timeframes

API, Features

How-to create custom timeframe?

Toolbar

1st step

Add to layout file ( until version 5.3.1 ) property “timeframeview”

    var objCurrentLayout = {
        layout: null,
        .....
        ..... 
        timeframeview:"text" // icon/text
    };

var objCurrentLayout = {

layout: null,

.....

timeframeview:"text" // icon/text

};

2 step:
Change time scale properties in html

// time scale
    objChartMain1.apiinit.timeframes = [
       { 'n': 'tick', 'id': '1T', 'f': 1, 't1': 't', 't2': '' },
       { 'n': '1 Minute', 'id': '1M', 'f': 1, 't1': '1', 't2': 'm' },
       { 'n': '5 Minutes', 'id': '5M', 'f': 1, 't1': '5', 't2': 'm' },
       { 'n': '10 Minutes', 'id': '10M', 'f': 1, 't1': '10', 't2': 'm' },
       { 'n': '15 Minutes', 'id': '15M', 'f': 0, 't1': '15', 't2': 'm' },
       ...
       { 'n': '1 Year', 'id': '1Y', 'f': 0, 't1': '1', 't2': 'y' }
     ];

// time scale

objChartMain1.apiinit.timeframes = [

{ 'n': 'tick', 'id': '1T', 'f': 1, 't1': 't', 't2': '' },

{ 'n': '1 Minute', 'id': '1M', 'f': 1, 't1': '1', 't2': 'm' },

{ 'n': '5 Minutes', 'id': '5M', 'f': 1, 't1': '5', 't2': 'm' },

{ 'n': '10 Minutes', 'id': '10M', 'f': 1, 't1': '10', 't2': 'm' },

{ 'n': '15 Minutes', 'id': '15M', 'f': 0, 't1': '15', 't2': 'm' },

...

{ 'n': '1 Year', 'id': '1Y', 'f': 0, 't1': '1', 't2': 'y' }

];

{ 'n': '10 Minutes', 'id': '10M', 'f': 1, 't1': '10', 't2': 'm' }

1	{ 'n': '10 Minutes', 'id': '10M', 'f': 1, 't1': '10', 't2': 'm' }

....
}
{
   type: "menu-item-group",
   id: "timeframe",
    caption: "Time scales",
    localize: "menu.timescale.title",
    group: {
                        possition: "bottom",
                        alignv: "auto",
                        alignh: "auto",
                        columns: 1,
                        css: ""
     },
     items: [
         { type: 'menu-group-timeframe', id: "group-timeframe", favorites: true, icons: true }
                    ]
  },
{
....

....

}

{

type: "menu-item-group",

id: "timeframe",

caption: "Time scales",

localize: "menu.timescale.title",

group: {

possition: "bottom",

alignv: "auto",

alignh: "auto",

columns: 1,

css: ""

items: [

{ type: 'menu-group-timeframe', id: "group-timeframe", favorites: true, icons: true }

]

{

....

Drop-down toolbar

Layout file , object toolbar

....
},
                    {
                        type: "button-group",
                        id: "group-timescale",
                        localize: "menu.timescale.1T",
                        icon: "tick",
                        caption: "tick",
                        title1:"",
                        title2:"",
                        group: {
                            type: "tooltip",
                            possition: "bottom",
                            alignv: "auto",
                            alignh: "auto",
                            columns: 3,
                            css: "",
                            closebyclick: true,
                            changegroupicon: true,
                            grouptype: "timescale",
                            viewtype:"text"
                        },
                        items: [
                            { type: "button-group-timeframe", id: "timeframe" } 

                        ]
                    },

....

....

{

type: "button-group",

id: "group-timescale",

localize: "menu.timescale.1T",

icon: "tick",

caption: "tick",

title1:"",

title2:"",

group: {

type: "tooltip",

possition: "bottom",

alignv: "auto",

alignh: "auto",

columns: 3,

css: "",

closebyclick: true,

changegroupicon: true,

grouptype: "timescale",

viewtype:"text"

items: [

{ type: "button-group-timeframe", id: "timeframe" }

]

....

Version 5.3.1 (Build 5)

Features, Versions

New Features:

A new function parameter to AddImage and AddVLine will prevent its drawing outside indicator area, when using panel padding.

Version 5.3.1 (Build 4)

Features, Versions

New Features:

Load time property TextDblDraw, which reduces text anti-aliasing.
Accessed via:

Prevent Text Anti-Aliasing

objChartMain1.chart.TextDblDraw = true;

1

objChartMain1.chart.TextDblDraw = true;

Bugs Fix:

Prevent cases where two date labels have no spacing in between.

Version 5.3.1 (Build 3)

Features, Versions

New Features:

API SetNumFuturesBars to change the future bars buffer’s size and zoom length after switching off expiration mode.
Two new properties for vAxis to limit drawing range away from top and bottom.
vMarginPixelsBottom and vMarginPixelsTop.
API doc has new hAxis and vAxis sections.
ZoomOnDateRange API to zoom on a specific time-range.
API AddImage / DeleteImage to add / delete an image shape.

Bugs Fix:

Only first text shape is loaded if more than one.
MFI indicator, when negative flow is zero showed 99.01 instead of 100.
The Chart doesn’t show the right number of dates when the number of candles is small.

Advinion ProChart

Posts published on March 2017

API-Events

API

Loader

Chart (Layout)

Chart object

Chart (Shape)

Chart (Study|Indicators)

Loclization

Version 5.3.3

Features, Versions

Change Size

API

Version 5.3.2

Features, Versions

Custom timeframes

API, Features

Toolbar

Menu

Drop-down toolbar

Version 5.3.1 (Build 5)

Features, Versions

Version 5.3.1 (Build 4)

Features, Versions

Version 5.3.1 (Build 3)

Features, Versions