openui5-charts
v1.0.0-alpha
Published
OpenUI5 Charts based on d3.js wrapped into resposive bindable controls
Downloads
2
Readme
OpenUI5 Charts based on d3.js
An OpenUI5 library based on d3.js to create charts as responsive bindable fiori-like controls.
Demo
You can checkout a live demo here: https://fokind.github.io/openui5-d3-charts/demo/webapp/index.html
Project Structure
- 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
Getting started
Installation
Install openui5-charts as an npm module
$ npm install openui5-charts
Configure manifest.json
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.chart": {}
}
},
"resourceRoots": {
"openui5.chart": "./FOLDER_WHERE_YOU_PLACED_THE_LIBRARY/openui5/chart/"
}
}
}
Usage
- Prepare data model. For examle:
this.getModel().setProperty("/data", [
{ y: 0 },
{ y: -1 },
{ y: 2 },
{ y: 3 }
]);
- Add the following namespace declarations to the view with chart control:
xmlns:core="sap.ui.core"
xmlns:chart="openui5.chart"
- Add the following control to the view:
<chart:Chart items="{/data}">
<core:Item text="{y}"/>
</chart:Chart>
It's all!
It is very simple to use in style like other bindable controls. All that is required is to make two bindings: a set of points and a property that contains values.
If the model changes, or the window is resized, the chart will redrawn.
Author
Dmitry Fokin
- LinkedIn: https://www.linkedin.com/in/fokind/
License
This project is licensed under the MIT License.