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.
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.
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
}
}));
}
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.
2 comments
Click here for commentschartjs should show charts on IE 11.Why?
ReplyGreat 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 .
ReplyConversionConversion EmoticonEmoticon