Welcome to the ultimate SAP UI5, BTP, Fiori, CAPM, RAP, ABAP blog! Explore comprehensive tutorials, interview questions, and real-world examples to master SAP development. Elevate your skills in creating stunning UI5 apps, harnessing the power of BTP, and building Fiori applications. Unlock the potential of CAPM, RAP, and ABAP, and learn to integrate seamlessly with the enterprise portal. Whether you're a beginner or an experienced developer, this blog is your go-to resource for SAP expertise!
Hi, in this tutorial, we will learn how to design viz frame
charts. Unlike Viz charts, Vizframe charts are a bit different. SAP no longer
supports Viz charts, it emphasize developers to use VizFrame, since viz charts
are now depreciated since 1.32.0, are no longer actively developed and won’t be
getting any new features.
VizFrame is available in sap.viz.ui5.controls. We will go
through this new control with the help of a simple example of a bar chart
depicting the no. of cars bought on an yearly basis.
Watch the video example after reading the blog, for better understanding:
Example
Alto:
"758620"
Zen:
"431160"
Santro:
"515100"
Matiz:
"293780"
Wagon R: "974010"
Steps
1)Create SAPUI5 application in Eclipse and
provide an appropriate name to it.
2) In
the View folder create a VizChart.view.xml and refer the code
<!-- only load the mobile lib
"sap.m" and the "sap_bluecrystal" theme -->
<script>
// sap.ui.localResources("view");
var app = new
sap.m.App({initialPage:"id_vizChart"});
var page =
sap.ui.view({id:"id_vizChart",
viewName:"VizFrame.view.VizChart",
type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<bodyclass="sapUiBody"role="application">
<divid="content"></div>
</body>
</html>
5)
Execute index.html file
Chart type can be changed according to
need,just change the viz type in viz
Propertiesto column, line etc, just
like we have used “bar” here.
oVizFrame.setVizType('bar');
Points
to keep in mind
·Create data set
·Flattend dataset consists of dimensions and
measures. Dimensions are generally used for axis, and measures are used for
value trends.
·Bind flattend dataset to chart
·Dimesions and Measure depends on the type of
chart. It mostly depends on the type of requirement.
·VizProperties genrally describe the look and
feel of the chart. We can define the title of the chart here, or maybe use
different colours for different bar, and similarly.
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.
Hi when am trying to create same charrt in js view in index.html am declaring library as sap.viz.ui5.controls.It is throwing error.Could you please let me know how to declare library in js for viz frame controls
We need your help to support www.sapui5tutors.com. Please consider disabling your ad blocker while visiting this website so that we can continue to provide this content to you free of charge.
For details on turning off your ad blocker, or to add www.sapui5tutors.com to your whitelist, please read these
instructions
6 comments
Click here for commentsHi when am trying to create same charrt in js view in index.html am declaring library as sap.viz.ui5.controls.It is throwing error.Could you please let me know how to declare library in js for viz frame controls
ReplyIt should be the same in js view also, could you tellme what is the error that you are getting?
ReplyFrom what I understood, you might have missed the namespace in the index file
Reply<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
ReplyShouldn't it be
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
As View is under mvc package
Hello can u help me find solution of this "http://stackoverflow.com/questions/43744368/how-to-create-a-column-chart-with-multiple-series-in-sapui5"
ReplyHi,
ReplyI want to consume Bex Query Data as raw data for chart. I tried but no luck so far. Could you please guide me.
Arpan
ConversionConversion EmoticonEmoticon