Skip to Content

openui5-chartjs next-gen charts for your project

January 3, 2018 | 1,327 Views |
 chartshtmljavascriptopenui5sapsapui5
Follow

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

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply