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.

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post