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