An OpenUI5 control library based on d3.js to create financial charts like candlestick diagramm, indicators e.t.c.
You can checkout a live demo here: https://fokind.github.io/fc/demo/webapp/index.html
- demo - Demo site for the library
- dist - Distribution folder that contains the library ready to use
- src - Development folder
- test - Testing framework for the library
Install openui5-financial-charts as an npm module
$ npm install openui5-financial-charts
Add the library to sap.ui5/dependencies/libs and set its path in sap.ui5/resourceRoots in your manifest.json file, as follows:
{
"sap.ui5": {
"dependencies": {
"libs": {
"openui5.financial.chart": {}
}
},
"resourceRoots": {
"openui5.financial.chart": "./FOLDER_WHERE_YOU_PLACED_THE_LIBRARY/openui5/financial/chart/"
}
}
}
-
Prepare data model.
-
Add callback method refresh when the model is ready.
var sUri = "./data/buffer.json";
var oChart0 = this.byId("chart0");
oModel.loadData(sUri).then(() => {
oChart0.refresh();
});
-
Add the following to the same view's namespace declarations:
xmlns:chart="openui5.financial.chart"
-
In the view you want to use chart, insert the following:
<chart:Chart id="chart0"
height="400px"
padding="5 20 25 60"
start="{/start}"
end="{/end}"
timeframe="15">
<chart:CandlestickChart items="{/candles}">
<chart:Candle time="{time}"
open="{open}"
high="{high}"
low="{low}"
close="{close}"/>
</chart:CandlestickChart>
</chart:Chart>
Dmitry Fokin
- LinkedIn: https://www.linkedin.com/in/fokind/
This project is licensed under the MIT License.