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>
Great work as always.
Thanks, Michael!
Excellent good work
Thank you very much, Rajesh!
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!
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!