How-to create custom timeframe?
Toolbar
1st step
Add to layout file ( until version 5.3.1 ) property “timeframeview”
|
1 2 3 4 5 6 |
var objCurrentLayout = { layout: null, ..... ..... timeframeview:"text" // icon/text }; |
2 step:
Change time scale properties in html
|
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' } ]; |
|
1 |
{ 'n': '10 Minutes', 'id': '10M', 'f': 1, 't1': '10', 't2': 'm' } |
Menu
Layout file , object menu
|
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
|
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" } ] }, .... |