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
![index.png]()
(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
![12.png]()
L![12.png]()
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 ………………………….. |
|
