pbulteel/openui5-charting-custom-controls

This project shows how to use C3.js and Chart.js within OpenUI5 projects

End of Life

This project has been identified as obsolete, and SAP will remove it from our samples repository soon.

The last day for this project is: July 1, 2018

All existing users are encouraged to make a copy of this project before that date.

---

OpenUI5 Custom Controls for charting

This sample OpenUI5 Web app demonstrates how to build custom UI controls that act as wrapper for thirdparty libraries. It shows you how to integrate simple charts drawn by ChartJS into OpenUI5 apps.

Note: This repository is for illustration purposes only, if you are looking for a ChartJS implementation to be used in your application projects take a look at https://github.com/StErMi/openui5-chartjs/ by @StErMi!

Installation

Clone this repository locally, open up the command line/terminal in the root folder and execute the following command to download required dependencies:

npm install

Note: You need to have NodeJS installed

Next, execute the following command to run a local server with the sample application:

grunt

Finally, access http://localhost:8080/index.html from your browser.

C3.js

Custom UI control wrapping C3.js, a D3-based reusable chart library.

Usage

Here's how to use the C3.js custom control:

<agraebe.custom.control:ChartJSControl width="400" height="200" responsive="true" chartType="Line" data="{some>/path}"/>

Notes: -Width & height only used for ratio of the chart. However, it is ignored in case responsive="true"

• All chart types listed in the documentation can be used

Chart.js

Custom UI control wrapping Chart.js, a simple, clean and engaging chart library for designers and developers.

Usage

Here's how to use the Chart.js custom control:

<agraebe.custom.control:C3JSControl data="{some>/path}"/>

Todos

• Advance C3.js control to use data-binding for labels
• Advance C3.js control to include further chart types