Skip to Content
Author's profile photo Emanuele Ricci

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>

Documentation and Links

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Lichtinger
      Michael Lichtinger

      Great work as always. ?

      Author's profile photo Emanuele Ricci
      Emanuele Ricci
      Blog Post Author

      Thanks, Michael!

      Author's profile photo Rajesh Khed
      Rajesh Khed

      Excellent  good work

      Author's profile photo Emanuele Ricci
      Emanuele Ricci
      Blog Post Author

      Thank you very much, Rajesh!

      Author's profile photo shivam maurya
      shivam maurya

      Thank you for the graphs. It was really time save for me as the graph library is not there in Open UI5. I have a question, do you know how we can add labels to x-axis and y-axis? I can see the option in Chart js library but I find it difficult to wrap it with the library you have provided. A quick pointer will be very helpful. Cheers!

      Author's profile photo shivam maurya
      shivam maurya

      var oChart=sap.ui.getCore().byId(<chart id>);
      var oScales = oChart.__chart.options.scales;

      oScales.yAxes[0].scaleLabel.labelString='Y axis Label';
      oScales.yAxes[0].scaleLabel.display=true;
      oScales.yAxes[0].ticks.beginAtZero=true;

      oChart.setScales(oScales);

      oChart.rerender();

       

      these lines did the trick for me. Cheers!