Custom control to make a Radar Chart using Chart.js library in SAPUI5.

SAP UI5 framework has provided many built in libraries to make charts, like sap viz, vizframe, makit, micro charts etc. Hence, all the commonly used charts are already provided in these libraries like bar, line, column, combined, heatmap, scatter, bubble, donut, pie etc.

But there are some limitations too, as they don't support any other kind of charts like Radar charts, 3-d charts, and similarly many other charts. So in the blog, we will see how to incorporate some other chart libraries in sapui5 application.

In this example,we will use Chart.js library to make a Radar chart, with the help of a custom control in sapui5. Here, you would find the sample of Radar Chart we would be using in our application.


Lets start from scratch here, we build an application in sap web ide, and name it as RadarChart, and suppose we have a basic app structure already created.

Steps

1) Download the chart.js file from this Link, and import this file in your project directory under the folder control and name it as chart.js.

2) Now, we have to create Radar chart, hence we would make use of a custom control, which would extend the chart.js library. Hence we need to create 3 more js files, in the control folder, RadarChart.js, Dataset.js, Value.js.

I have uploaded the control folder structure onto Git hub for your convenience, download this folder into your project directory.

Your project structure would look something like this:


3) Now to make use of this newly created custom control, we use it in the Main.view.xml.
<p:RadarChart
                class="sapUiResponsiveMargin"
                scaleOverride="{/options/scaleOverride}"
                scaleStartValue="{/options/scaleStartValue}"
                scaleSteps="{/options/scaleSteps}"
                scaleStepWidth="{/options/scaleStepWidth}"
                height="600px" width="600px">
                <p:axes>
                    <core:Item text="January" />
                    <core:Item text="February" />
                    <core:Item text="March" />
                    <core:Item text="April" />
                    <core:Item text="May" />
                    <core:Item text="June" />
                    <core:Item text="July" />
                    <core:Item text="August" />
                </p:axes>
                <p:dataSets>
                    <p:DataSet fillColor="rgba(102,45,145,.1)" strokeColor="rgba(102,45,145,1)" pointColor="rgba(220,220,220,1)" pointStrokeColor="#fff" data="{/dataset1}">
                        <p:Value value="{value}" />
                    </p:DataSet>
                    <p:DataSet fillColor="rgba(63,169,245,.1)" strokeColor="rgba(63,169,245,1)" pointColor="rgba(151,187,205,1)" pointStrokeColor="#fff" data="{/dataset2}">
                        <p:Value value="{value}" />
                    </p:DataSet>
                </p:dataSets>
            </p:RadarChart>

4) Here in the above step we have made use of different axes, hence we have provided the different axes, similarly we have also provided the dateset which is being populated from a model. Hence we need to set the model somewhere, here I have set the model in the Main.controller.js.

        onInit: function() {
            this.getView().setModel(new JSONModel({
                dataset1: [
                    { value: 4 },
                    { value: 5 },
                    { value: 4 },
                    { value: 2.5 },
                    { value: 3 },
                    { value: 4 },
                    { value: 3.5 },
                    { value: 4 }
                ],
                dataset2: [
                    { value: 2 },
                    { value: 3 },
                    { value: 3 },
                    { value: 5 },
                    { value: 2 },
                    { value: 3 },
                    { value: 4 },
                    { value: 3 }
                ],
                options: {
                    scaleOverride: false,
                    scaleStartValue: 0,
                    scaleSteps: 5,
                    scaleStepWidth: 1
                }
            }));
        }
5) Now run the application, and you would be able to see the following output:



Hope you liked this blog, if you have any query regarding this, you may post your comments below, or you may personally contact me on sapui5tutors@gmail.com.
Previous
Next Post »

2 comments

Click here for comments
DLB
admin
11 September 2020 at 01:04 ×

chartjs should show charts on IE 11.Why?

Reply
avatar
viewgmbh
admin
6 April 2022 at 09:18 ×

Great post by the great author, it is very massive and informative about Scrum Standup Manager for Jira but still preaches the way to sounds like that it has some beautiful thoughts described so I really appreciate this post .

Reply
avatar