Charts in an enterprise/business related scenario are daily basis work.
SAPUI5 is already offering tools to deal with charts (see VizFrame). But at the very moment they are limited and a little bit outdated if compared to rest of others web framework/library.
That’s why I thought it would be a good idea (and a challenge) to wrap and port ChartJS to OpenUI5.
openui5-chartjs is a custom OpenUI5 library that wraps Chart.js.
Why I picked ChartJS?
- Open source: it’s a community maintained project
- 8 chart types: visualize data in 8 different ways; each of them animated and customisable
- HTML5 Canvas: great rendering performance across all modern browsers (IE9+)
- Responsive: redraws charts on window resize for perfect scale granularity
- Huge and detailed documentation
Supported Chat Types
ChartJS support 8 chart types:
- Doughnut and Pie
- Polar Area
NB: at the current library state we only support the first 6 chart types. The full coverage will come in the next few releases.
Here you can find a complete demo of all chart types.
- Upgrade to ChartJS 2.7.17
- Update the documentation to ChartJS 2.7.1
- Cover all Chart types
- Refactor code and add more options
How to add openui5-chartjs to your project
Step 1: add the library your project
Import the library-preload.js into your project wherever you want. In my example I’ve imported it inside ROOT/thirdparty/it/designfuture/chartjs/
Step 2: add it to your manifest.json
Add the library as a dependency on your project (this will tell to the framework to load it at the start and where it can find the library inside your resources)
Step 3: add it to your XML Views
Add the namespace
Add the Chart control you want to render and configure it
Documentation and Links
- openui5-chartjs | Documentation | Demo
- ChartJS | Documentation | Demo