Dear All,
After I have invested a good amount of time on finding a way to implement formatting on Date datatype, I hereby want to share my findings so that it can help all those need.
This would help in implementing date formats in a simpler way. Please find the steps below:
1. Let's say you have a raw JSON Data with following format:
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}]};
2. Now you need to create a flattened dataset so that the data can be parsed to the chart objects. Here you go,
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
// a Bar Chart requires exactly one dimension (x-axis)
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: "yyyy/MM/dd"});
return oDateFormat.format(new Date(fval));
}
}
}
],
// it can show multiple measures, each results in a new set of bars in a new color
measures : [
// measure 1
{
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"
}
});
3. Now you need to assign the same to the chart as:
var oLine = new sap.viz.ui5.Line({
width:"770px",
height:"300px",
title : {
visible : true,
text : 'Availability'
},
dataset : oDataset
});
oLine.setModel(varModel);
Now the chart would have x-=axis labels as "2014/02/01" for date value "2014-02-01T09:28:56".
*Formatter function was required here as chart could not interpret values in given date format.
**IMPORTANT FOR DEBUGGING**
- A point that put me in wonder was, "fval" keeps on showing value as null(in debug mode) until one round of iteration was completed through raw dataset. This held me back with trying different approach and modifying the formatter function in all in-human ways. Reason behind this behavior is still not know to me.
- Ultimately my conclusion(completely out of observation) was if you are sure the there is nothing wrong with your formatter function code, keep on iterating through a specific number till the point you get either a value in it or an error.
Hope you find it useful...!!!
Warm Regards,
Swaroop
