Getting started with Viz Charts
Dear All,
When someone joins in the UI5 clan, one of the very first area of interest observed is charts and dashboards. So here’s a simple demonstration of how one can create charts for a dashboard.
Prerequisites:
1. A raw data set
2. Flattened data sets(one each for a chart)
Steps:
1. Create a raw data set like:
var oData1 = {TechKPI:[{date:new Date(“2014-02-01T09:28:56”),TotalAvailability:87.3, WindAvailability:33.3, EngineAvailability:81.1, TotalEFOR:12.2, WindEFOR:5.2,EngineEFOR:15.9},
{date:new Date(“2014-02-02T09:28:56”),TotalAvailability:87.4, WindAvailability:34, EngineAvailability:81.1, TotalEFOR:11.5, WindEFOR:1,EngineEFOR:16.3},
{date:new Date(“2014-02-07T09:28:56”),TotalAvailability:87.8, WindAvailability:33.1, EngineAvailability:81.5, TotalEFOR:13.7, WindEFOR:8.7,EngineEFOR:15.7},
{date:new Date(“2014-02-15T09:28:56”),TotalAvailability:87.1, WindAvailability:33.1, EngineAvailability:81.4, TotalEFOR:13.2, WindEFOR:8.1,EngineEFOR:15.2},
{date:new Date(“2014-02-28T09:28:56”),TotalAvailability:87.1, WindAvailability:33.5, EngineAvailability:81.1, TotalEFOR:13.2, WindEFOR:8.1,EngineEFOR:16.4}]
};
2. Create a flattened data set: A viz chart needs a flattened data set to have it portrayed on the html page. A flattened dataset consists of dimensions and measure. Dimensions are mostly for axis and measures are for value trends.
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions:[
{
axis:1,
name: “Date”,
value: {
path : ‘date’ ,
formatter : function(fval) {
jQuery.sap.require(“sap.ui.core.format.DateFormat”);
var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({pattern: “dd-MM”});
return oDateFormat.format(new Date(fval));
}
}
}
],
measures : [
{
name : ‘Total Availability’, // ‘name’ is used as label in the Legend
value : ‘{TotalAvailability}’ // ‘value’ defines the binding for the displayed value
}
],
// ‘data’ is used to bind the whole data collection that is to be displayed in the chart
data : {
path : “/TechKPI”
}
});
Formatter function is used to display date as labels in a particular format.
Note: A pie chart has only one measure. Similarly for other charts, no of measures depends on the chart type.
3. Bind flattened data set to viz chart.
lib required: sap.viz, sap.ui.commons
var oLine = new sap.viz.ui5.Line({
width:”770px”,
height:”300px”,
selectData: function(oEvent) {
// get the event data as provided by the native sap.viz library
var oSelectData = oEvent.getParameter(“data”);
// let the dataset convert the event coordinates back to a UI5 model context
var oContext = this.getDataset().findContext(oSelectData[0].data[0].ctx.path);
updateChart1();
},
title : {
visible : true,
text : ‘Capacity Factor (CF %)’
},
dataset : oDataset //Flattened data set being referred
});
4. Clone the data set: Even if your raw dataset is same and you want to say show one line and one area chart, though the structure of flattened data set is same still you cannot use same data set. This has one dataset per chart mapping. To facilitate in such scenarios, you can use clone() method to create clone of and existing dataset and bind it to a chart.
Simply,
var oDataset1 = oDataset.clone();
Once you have cloned data set, you can proceed as step 3.
Points to note:
1. Dimensions and measure depends on the type of viz chart.
2. One-to-one mapping between flattened dataset and viz charts. Use clone() if dealing with same data set.
Hope this helps!!
Warm Regards,
Swaroop