Representing Business data with SAPUI5 VIZ chart – some useful Tips and Tricks
The sap.viz charting library provides a set of flexible chart controls that allow to easily
representing business data in a feature rich, graphical manner.
Quick Coding to get a BAR Chart
(Probably most of you know how to build a basic chart. Do not worry this is just starting.
Something more is waiting for you. 🙂 )
|
var oModel = new sap.ui.model.xml.XMLModel();
oModel.loadData(“/XMII/Illuminator?QueryTemplate=…… var oDataset = new sap.viz.ui5.data.FlattenedDataset(); var DimensionList = new sap.viz.ui5.data.DimensionDefinition(); (Y Axis) DimensionList.setAxis(1); DimensionList.setName(“Plot”); DimensionList.bindProperty(“value”,”YTDLabel”); oDataset.addDimension(DimensionList); var MeasureListActual = new sap.viz.ui5.data.MeasureDefinition();(X Axis) MeasureListActual.setName(“Actual”); MeasureListActual.bindProperty(“value”,”YTD”); oDataset.addMeasure(MeasureListActual); var MeasureListPlan = new sap.viz.ui5.data.MeasureDefinition();(X Axis) MeasureListPlan.setName(“Plan”); MeasureListPlan.bindProperty(“value”,”YTDPlanned”); oDataset.addMeasure(MeasureListPlan); oDataset.bindData(“/Rowset/Row/”); var oChartCompare = new sap.viz.ui5.Bar ({ id : “ChartCompare”, width :”310px”, height : “100px”, dataset : oDataset }); oChartCompare.setModel(oModel); |
XML structure <Rowset> <Columns>…</Columns> <Row> <YTDLabel>YTD</YTDLabel> <YTD>89966</YTD> <YTDPlanned>440320</YTDPlanned> </Row> </Rowset> |
We get Simple meaning less Bar Chart from above code 😕
- I will add X axis.
|
|
|
- Also Y Axis
|
var YAxis = oChartCompare.getYAxis(); YAxis.setVisible(true); |
|
- “We don’t understand the meaning of green & blue color without legend” 😡
|
|
var ProdLegendYTD = oChartCompare.getLegend(); ProdLegendYTD.setVisible(true); |
- Can you give me a tooltip please ?
|
var ProdTooltipYTD = oChartCompare.getToolTip(); ProdTooltipYTD.setVisible(true); |
|
- But
(My mind wants more) “3D round corner bar”
|
|
………… height : “100px”, plotArea:{ drawingEffect: sap.viz.ui5.types.Bar_drawingEffect.glossy, isRoundCorner:true, colorPalette:[color1,color2] }, dataset : oDataset ………… |
- My charts are not C
L
RFUL
|
var color1 = “#EAC117”; var color2 = “#38ACEC”; var color3 = “#838B83”; var color4 = “#728C00”; ………… height : “100px”, plotArea:{ drawingEffect: sap.viz.ui5.types. Bar_drawingEffect.glossy, isRoundCorner:true, colorPalette:[color1,color2] }, dataset : oDataset ………… |
|
- Please show me value on the top of bar, please….
|
|
plotArea:{ ………………………….. }, dataLabel: { visible:true, positionPreference : true, position : sap.viz.ui5.types. Datalabel_position.outside, }, dataset : oDataset ………………………….. |
- Last one -comma separated value for better visibility
|
………………………….. dataLabel: { ……………………… position : sap.viz.ui5.types. Datalabel_position.outside, formatString : [[“##,0”],[“en-US”]] }, dataset : oDataset ………………………….. |
|
Great Blog Sudipta !!!!!!
One of the most funniest blog I have ever seen. This kind of humor sense is required in all. 🙂 😉
Thnaks for the Tutorial, have any solutions to changing the default postion of the X and Y axis , by setting a value for thier position for instance in Highcharts I could do this
yAxis: {
plotLines: [{
color: '#000000',
width: 1,
value: 5
}],
labels: {
enabled: false
},
and achieve this
Thanks for the suggestions
Hi is it possible to ever build a Bubble chart with the code below, What could I be missing
sap.ui.jsview("views.BubbleCoy", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf views.Bubble
*/
getControllerName : function() {
return null;
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf views.Companies
*/
createContent : function(oController) {
var mainCoyBubbleChart = new sap.viz.ui5.types.Bubble("mainCoyBubbleChart", {
width : "100%",
height : "50%",
line : {
//'colorPalette' : d3.scale.category20().range()
},
title : {
visible : true,
text : 'Copmpany Aggregation'
},
xAxis: {
//title: { visible: true, text : "Friend Aggregation" },
//scale: new sap.viz.ui5.types.Axis_scale({fixedRange:true, Value: 5, minValue: 0, maxValue: 12})
},
dataset : topSalesDataset = new sap.viz.ui5.data.FlattenedDataset({
// a Bar Chart requires exactly one dimension (x-axis)
dimensions : [ {
axis : 1, // must be one for the x-axis, 2 for y-axis
name : 'Company',
value : "{Name}"
}],
// it can show multiple measures, each results in a new set of bars
// in a new color
measures : [
{
group:1,
name : 'Business Value', // 'name' is used as label in the Legend
value : '{BusinessValue}' // 'value' defines the binding for the
},
{
group:2,
name : 'Friend Value', // 'name' is used as label in the Legend
value : '{friendValue}' // 'value' defines the binding for the
}
],
// 'data' is used to bind the whole data collection that is to be
// displayed in the chart
data : {
path : "/"
}
})
});
// var YAxis = mainBubbleChart.getYAxis();
// YAxis.setVisible(true);
return mainCoyBubbleChart;
}
});
A well articulated blog. Great work Sudipta!!
Warm Regards,
Swaroop
Manali,
Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question. The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable. Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem. If a blog or document is related, put in a link. Read the Getting Started documents (link at the top right) including the Rules of Engagement.
NOTE: Getting the link is easy enough for both the author and Blog. Simply MouseOver the item, Right Click, and select Copy Shortcut. Paste it into your Discussion. You can also click on the url after pasting. Click on the A to expand the options and select T (on the right) to Auto-Title the url.
Thanks, Mike (Moderator)
SAP Technology RIG
Nice Blog Sudipta! Thanks for it!
First of all awesome work ,
I am facing one issue if anyone can help, I need to display a data like "Ashburn/Orchestrator1/blahblah".....But when i try to set is not coming complete and shows "..." below the graph axis Y.
Can someone help me with this, i dont wanna use CSS just for one step, and i am unable to find any property or code related to it