Procharts News Feature Tips Video | Advinion ProChart | Best chart solution

Price legend collapse

API

Demo

Add to layout file , block “collapselegend”

...............
},
            legend: {
                view: true,
                height: 'inherit',
                top: 12,
                left: 23,
                right: 110,
                padding: [0, 0, 0, 0],
                more:true
            },
            collapselegend: {
                view: true,
                height: 15,
                top: 12,
                left: 5,
                width: 15,
                collapseopen:false,
                title_1:"+",
                title_2:"-"
            }, 
            watermark: {
                view: true,
                bottom: 30,
                left: 40,
                width:200,
                height:40,
                padding: [0, 0, 0, 0]
            },

..............

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

...............

},

legend: {

view: true,

height: 'inherit',

top: 12,

left: 23,

right: 110,

padding: [0, 0, 0, 0],

more:true

},

collapselegend: {

view: true,

height: 15,

top: 12,

left: 5,

width: 15,

collapseopen:false,

title_1:"+",

title_2:"-"

},

watermark: {

view: true,

bottom: 30,

left: 40,

width:200,

height:40,

padding: [0, 0, 0, 0]

},

..............

Where
collapseopen:false|true
Status for start show legend or hide

title_1and title_2
Symbol for show / hide legend

Mobile support

API

For best performance on mobile system , chart supports enabling off/on the following modules:

Off|On

Add to “ProChart_InitLayout” event

  objChartMain1.apiinit.guipart.enabled.menu = false|true;
  objChartMain1.apiinit.guipart.enabled.toolbar = false|true;
  objChartMain1.apiinit.guipart.enabled.header = false|true;
  objChartMain1.apiinit.guipart.enabled.zoom = false|true;
  objChartMain1.apiinit.guipart.enabled.signals = false|true;
  objChartMain1.apiinit.guipart.enabled.plugs = false|true;

1

2

3

4

5

6

objChartMain1.apiinit.guipart.enabled.menu = false|true;

objChartMain1.apiinit.guipart.enabled.toolbar = false|true;

objChartMain1.apiinit.guipart.enabled.header = false|true;

objChartMain1.apiinit.guipart.enabled.zoom = false|true;

objChartMain1.apiinit.guipart.enabled.signals = false|true;

objChartMain1.apiinit.guipart.enabled.plugs = false|true;

Price as Area with Gradient Fill

Starting from version 5.3.x it is possible to enable gradient fill for Area price-type.
It requires editing the relevant “chart.css.json.js for” file, and adding a “fill2” and “fillOpacity” attributes with the required color and opacity.

You can locate the entry via price->area.

Solid fill:

"area": {
"strokeWidth": "1",
"stroke": "#8888FF",
"fill": "#8888FF"
},

1

2

3

4

5

"area": {

"strokeWidth": "1",

"stroke": "#8888FF",

"fill": "#8888FF"

},

Gradient fill version 5.3.x:

"price" > "area": {
"strokeWidth": "1",
"stroke": "#6666FF",
"fill": "#8888FF",
"fill2": "#FFFFFF",
"fillOpacity": 0.8
},

1

2

3

4

5

6

7

"price" > "area": {

"strokeWidth": "1",

"stroke": "#6666FF",

"fill": "#8888FF",

"fill2": "#FFFFFF",

"fillOpacity": 0.8

},

Gradient fill version 5.4.x:

"price" > "area": {
"strokeWidth": "1",
"stroke": "#6666FF",
"fill": "#8888FF",
"fill2": "#FFFFFF",
"fillOpacity": 0.8,
"fillOpacity2": 0.0
},

1

2

3

4

5

6

7

8

"price" > "area": {

"strokeWidth": "1",

"stroke": "#6666FF",

"fill": "#8888FF",

"fill2": "#FFFFFF",

"fillOpacity": 0.8,

"fillOpacity2": 0.0

},

stroke is the line color.
fill and fill2 are the gradient’s starting and ending colors.
fillOpacity is the gradient opacity.
fillOpacity2 is the gradient opacity for fill 2 (supported from version 5.4.0 and above).

Switch Expiration Mode

API

Expiry Mode

The “Expiration Mode” enables the Chart to stop data updates, based on a specified “expire” date. Any new data afterwards will not update the Chart.
In regular mode the Chart shifts the data to the left. In “Expiration Mode” the Chart fills from left to right, showing all the data including the future dates area.
The following API enables switching this mode ON or OFF on the fly.

StopExpiration
Disable expiration mode and reset buffers accordingly.

objChartMain1.chart.StopExpiration();
objChartMain1.chart.SetNumberOfBars(1000); //Reduce buffer size
objChartMain1.chart.SetNumVisibleItems(90); //How many candle to show (default zoom in)
objChartMain1.chart.SetNumFuturesBars(1,1); //Reduce the number of future bars (iNumOfFutureBars, iNumVisibleFutureBars)

1

2

3

4

objChartMain1.chart.StopExpiration();

objChartMain1.chart.SetNumberOfBars(1000); //Reduce buffer size

objChartMain1.chart.SetNumVisibleItems(90); //How many candle to show (default zoom in)

objChartMain1.chart.SetNumFuturesBars(1,1); //Reduce the number of future bars (iNumOfFutureBars, iNumVisibleFutureBars)

UpdateExpirationField
Update the expiration date and enable expiration mode if not already enabled.

objChartMain1.chart.UpdateExpirationField("date","2017-01-01 10:00:00");
objChartMain1.chart.SetNumberOfBars(300000); //Increase buffer size
objChartMain1.chart.SetNumVisibleItems(30000); //How many candle to show (default zoom in)

1

2

3

objChartMain1.chart.UpdateExpirationField("date","2017-01-01 10:00:00");

objChartMain1.chart.SetNumberOfBars(300000); //Increase buffer size

objChartMain1.chart.SetNumVisibleItems(30000); //How many candle to show (default zoom in)

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);
 }

1

2

3

4

5

// 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;

1

2

3

4

5

6

7

8

//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
    };

1

2

3

4

5

6

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' }
     ];

1

2

3

4

5

6

7

8

9

10

// 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 }
                    ]
  },
{
....

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

....

}

{

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" } 

                        ]
                    },

....

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

....

},

{

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.

Solid fill:

Gradient fill version 5.3.x:

Gradient fill version 5.4.x:

Expiry Mode

Loader

Chart (Layout)

Chart object

Chart (Shape)

Chart (Study|Indicators)

Loclization

Features, Versions

Features, Versions

API, Features

Toolbar

Menu

Drop-down toolbar

Features, Versions