MilliChart_v3

Description

Interactive HTML5 chart with the following features:

• Single instrument with possibility to compare 1-4 instruments with relative or absolute scaling
• Scale can show both absolute values and percentage values
• Possible to have secondary chart area with volume
• Mouse over to show values
• Responsive

Required files

milli_chart_v3.js
milli_widget_api.js

If run from npm, these files are included in the package.

Settings

Valid fields

Priceindicator details

This setting adds a div to the righthand ylegend which will have the innerHTML set to the last price recieved. The div will have the class "millistream-chart-price-indicator" and can be styled with normal css

Tooltip details

The tooltip setting is an object with a formatter function, the formatter function can access data for the datapoint whith "this".

Available fields in this

Available field in data

Example:

tooltip: {
		formatter: function() {
			var date = formatDate(this.data.date, 'yyyy-mm-dd');
			var time = '';
			if (this.chartType == 'trades') {
				var hour = this.data.date.getHours();
				var minute = '';
				if (this.data.date.getMinutes() < 10) minute = '0';
				minute += this.data.date.getMinutes();
				time = hour + ':' + minute;
			}
			return '<span class="tooltip-name">' + this.name + '</span><br>' + this.data.price + ', '+ this.data.diff.toFixed(2) + '%</br>' + date + ' ' + time;
		}}
}

Styles

chartStyle

boxShadow

Horizontal Legend text styles

Vertical Legend text styles

Vertical Legend2 text styles

This legend inherits all other styling from verticalLegendStyle

Gridlines styles

Instrument style

backgroundLinearGradient object

CSS classes

millistream-chart-tooltip

Css for the tooltip "balloon", this is a regular div so all default css classes apply. Must have "position:absolute" to be correctly positioned in the chart

example: .millistream-chart-tooltip { position: absolute; background: #ffffff; border: 1px solid #000000; font-family: Open Sans, Helvetica, sans-serif; font-size: 10px; padding: 2px; pointer-events: none; text-align: center; border-radius: 5px; }

millistream-chart-pointer

Css for the tooltip pointer, this is a regular div so all default css classes apply. Must have "position:absolute" to be correctly positioned in the chart

example: .millistream-chart-pointer { content: ''; margin: 10px; padding: 0px; width: 6px; height: 6px; border-radius: 50%; }

millistream-chart-zoombox

Background shown while zooming.

This is a regular div so all css classes apply.Position is set to absolute and pointer-events is set to none programatically. Background color should be set with opacity so you can still see the chart while zooming, ex: '#f0f0f00a'

Create object

Creates a 1 year chart on insref 6485 (OMS Stockholm 30 index)

new Milli_Chart({
	instrument: 6485,
	token:'your-token-goes-here',
	'target': document.getElementById('chart'),
	historylen: '1y',
	chartlen: '1y'
});

Functions

destroyWidget()

Call to destroy widget.

getDateInverval()

Returns an object with startdate and enddate of the current chart.

drawChart()

Call to redraw chart with new settings or if you have set autodraw to false.

addCompare(insref)

Call to add compare instrument, a maximum of 4 is possible.

refreshData

Call to fetch new data for the chart. Not needed for streaming charts

removeCompare(insref)

Call to remove the compare instrument

removeAllCompares()

Call to remove all compare instruments

setChartLength(chartlen)

Call to change time period to show.

addQuantity()

Call to add quantity bars to the chart. If quantity is already shown, calling this function will remove the quantity bars.

addIndicator({json with indicator information})

Call to add an indicator. List of valid indicators

removeIndicator({json with indicator information})

Call to remove an indicator.List of valid indicators

removeAllIndicators()

Call to remove all indicators.

setDateInverval(startdate,enddate)

Set stardate and enddate for chart, this will set the chart to history

List of valid indicators

intradayDatePos object

Object to describe how dates should be output on intraday charts

Changelog

2022-09-15	Added absolutScaling setting
			Added analysis setting
			Added closePriceIndicator setting
			Added priceIndicator setting
			Added curveOnTop setting
			Removed intradaydates setting, which did nothing
			Added xAxisModulo setting
			Added indicators setting
			Added removeIndicator function
			Added refreshData function
			Added setDateInverval and getDateInverval functions
			Added intradayDatePos setting
			Added previousDayClose setting