openui5-chartjs next-gen charts for your project

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>