Skip to content

emumanu/openui5-charting-custom-controls

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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"

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 83.7%
  • HTML 13.7%
  • CSS 2.6%