Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ericci
Active Contributor

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


7 Comments
Labels in this area