Skip to Content
0

How to use time as measure in vizframe?

Nov 08, 2017 at 12:26 PM

138

avatar image

I have used a time picker. I want to use the selected time as measure in my vizframe chart but its not showing. I think its for the format of the value i.e. "9:00". How to use the time as measure? Please help! Thanks!

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
avatar image
Former Member Dec 27, 2017 at 09:10 AM
0

I am afraid measure accepts only numerical value. Time is not numerical value so it's not possible.

Share
10 |10000 characters needed characters left characters exceeded
Mantri Shekar Nov 08, 2017 at 12:47 PM
0

Hi Tridwip Das,

In sap.viz.ui5.controls.common.feeds.FeedItem for property uid pass timeAxis

Show 7 Share
10 |10000 characters needed characters left characters exceeded

Thanks for the quick response! I have done what you have said but now getting an error as "[50005] - valueAxis : does not meet the minimum or maximum number of feeds definition."

here is my code in controller:

var oTable = this.getView().byId("tstable");
var model= oTable.getModel();
var oVizFrame = this.getView().byId("idcolumn");
/*sap.viz.ui5.controls.common.feeds.FeedItem for property uid pass timeAxis*/
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{
name : 'type',
value : "{type}"}],
measures : [{
name : 'hours',
value : '{hours}'} ],
data : { path : "/"}});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(model);
oVizFrame.setVizType('column');
oVizFrame.setVizProperties({ 
plotArea: {colorPalette : d3.scale.category20().range() }});
var feedtimeAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "timeAxis",
'type': "Measure",
'values': ["hours"] }),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["type"] });
oVizFrame.addFeed(feedtimeAxis);
oVizFrame.addFeed(feedCategoryAxis);



0

valueaxis is valueaxis only need to replace categoryaxis to time axis

0

Thanks for the response!

I have tried that and still not getting anything! Here is my coded again:

view.xml:

	<viz:VizFrame id="idcolumn" uiConfig="{applicationSet:'fiori'}" height='50%' width="50%"
						vizType='timeseries_line'>

controller.js

onPresschart:function(){
var oTable = this.getView().byId("tstable");
var model= oTable.getModel();
var oVizFrame = this.getView().byId("idcolumn");
//oVizFrame.setModel(model);
/*sap.viz.ui5.controls.common.feeds.FeedItem for property uid pass timeAxis*/
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{
name : 'type',
value : "{type}"}],
measures : [{
name : 'hours',
value : "{hours}",
dataType:'date'
} ],
data : { path : "/"}});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(model);
oVizFrame.setVizType('column');
oVizFrame.setVizProperties({ 
plotArea: {colorPalette : d3.scale.category20().range() }});
var feedtimeAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "timeAxis",
'type': "Measure",
'values': ["hours"]
}),
feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Dimension",
'values': ["type"] });
oVizFrame.addFeed(feedtimeAxis);
oVizFrame.addFeed(feedValueAxis);



0

Hi Tridwip Das,

A graph is normally a combination of

1) valueAxis(Y-Axis) and Category Axis(X-Axis) for Normal Graph.

2)valueAxis(Y-Axis) and timeAxis(X-Axis) for time of date related Graphs.

Hope in your case this is not happening that is why it is throwing error.

onPresschart:function(){
var oTable = this.getView().byId("tstable");
var model= oTable.getModel();
var oVizFrame = this.getView().byId("idcolumn");
//oVizFrame.setModel(model);
/*sap.viz.ui5.controls.common.feeds.FeedItem for property uid pass timeAxis*/
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{
name : 'type',
value : "{type}",

dataType:'date'

}],
measures : [{
name : 'hours',
value : "{hours}"
} ],
data : { path : "/"}});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(model);
oVizFrame.setVizType('column');
oVizFrame.setVizProperties({
plotArea: {colorPalette : d3.scale.category20().range() }});
var feedtimeAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["hours"]
}),
feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "timeAxis",
'type': "Dimension",
'values': ["type"] });
oVizFrame.addFeed(feedtimeAxis);
oVizFrame.addFeed(feedValueAxis);


I Changed you controller code.Please try to run this code.This code will give some output.

Please let me show what type of output you are expecting.

0

Thanks for the response! I am having an error with this code running: "[50053] - Incomplete dimensions binding."

0

Hi Tridwip Das,

This is my mail id.

mantrishekar951@gmail.com.Could you Ping me here.

0

Thanks! I am uploading the project as zip on google drive and sending you the link.

0
Jamie Cawley
Nov 08, 2017 at 01:42 PM
0

You can find some examples at

https://sapui5.hana.ondemand.com/#/sample/sap.viz.sample.TimeAxis/code

I believe your error is due to you missing the valueAxis...

Regards,

Jamie

Show 4 Share
10 |10000 characters needed characters left characters exceeded

Thanks for the response! Here is my code will you please go through it and point the errors? Thanks!

view.xml:

	<viz:VizFrame id="idcolumn" uiConfig="{applicationSet:'fiori'}" height='50%' width="50%"
						vizType='timeseries_line'>

cotroller.js

onPresschart:function(){
var oTable = this.getView().byId("tstable");
var model= oTable.getModel();
var oVizFrame = this.getView().byId("idcolumn");
//oVizFrame.setModel(model);
/*sap.viz.ui5.controls.common.feeds.FeedItem for property uid pass timeAxis*/
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{
name : 'type',
value : "{type}"}],
measures : [{
name : 'hours',
value : "{hours}",
dataType:'date'
} ],
data : { path : "/"}});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(model);
oVizFrame.setVizType('column');
oVizFrame.setVizProperties({ 
plotArea: {colorPalette : d3.scale.category20().range() }});
var feedtimeAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "timeAxis",
'type': "Measure",
'values': ["hours"]
}),
feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Dimension",
'values': ["type"] });
oVizFrame.addFeed(feedtimeAxis);
oVizFrame.addFeed(feedValueAxis);



0

Try setting your feedValueAxis uid to categoryAxis and the feedtimeAxis to valueAxis. If that doesn't help I would need to see the data.

Regards,

Jamie

1

Thanks for the response! I made the changes. Now the code in controller is as:

onPresschart:function(){
var oTable = this.getView().byId("tstable");
var model= oTable.getModel();
var oVizFrame = this.getView().byId("idcolumn");
//oVizFrame.setModel(model);
/*sap.viz.ui5.controls.common.feeds.FeedItem for property uid pass timeAxis*/
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{
name : 'type',
value : "{type}",
//dataType:"date"
}],
measures : [{
name : 'hours',
value : "{hours}",
//dataType:"date"
} ],


data : { path : "/"}});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(model);
oVizFrame.setVizType('column');
oVizFrame.setVizProperties({ 
plotArea: {colorPalette : d3.scale.category20().range() }});
var feedvalueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["hours"]
}),
feedcategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["type"] });
oVizFrame.addFeed(feedcategoryAxis);
oVizFrame.addFeed(feedvalueAxis);

},


// model.refresh(); //oTable.bindItems("jModel>/d"); },

Its not working! the output is as output.jpg

data in vizFrame model mod-data.jpg

output.jpg (83.7 kB)
mod-data.jpg (128.3 kB)
0

If I remove the colon from valueFormat the xml like:

	                                                      <TimePicker
								id="TP1"
								value="0900"
								valueFormat="HHmm"
								displayFormat="HH:mm"
								change="handleChanget"
								/>

then the chart is being populated

output: chrt-shw.jpg

chrt-shw.jpg (88.8 kB)
0