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

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:

• Line
• Bar
• Radar
• Doughnut and Pie
• Polar Area
• Bubble
• Scatter
• 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.

Demo

Here you can find a complete demo of all chart types.

TODO

• 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

xmlns:lab=”it.designfuture.chartjs”

Add the Chart control you want to render and configure it

<lab:LineChartJS
	id="line_chart"
	datasets="{temp>/lineChart/datasets}"
	labels="{temp>/lineChart/labels}"
	titleDisplay="true"
	titleText="Line Chart Example"
	onLegendItemClick="onLegendItemClick"
	onLegendItemHover="onLegendItemHover"
	onClick="onClick"
	onHover="onHover"
	tooltipEnabled="true"
	onAnimationProgress="onAnimationProgress"
	onAnimationComplete="onAnimationComplete"
	showLines="true"
	spanGaps="true">
</lab:LineChartJS>

Documentation and Links

• openui5-chartjs | Documentation | Demo
• ChartJS | Documentation | Demo