cancel
Showing results for 
Search instead for 
Did you mean: 

VizFrame: Dates & Colors

Former Member
0 Kudos

Hello,

I'm currently refactoring an application from using a MAKIT-Chart to using a VizFrame.
The DataSource is an OdataV2 Model - bound to the Application itself.

My Data looks like this (usually a large dataset with the same dates and different values):

[{
  "ValueA":"01",
  "Result":"205.000",
  "CreatedOn":"\/Date(1474358616000)\/"
},
{
  "ValueA":"02",
  "Result":"214.000",
  "CreatedOn":"\/Date(1474358616000)\/"
}]

Here is what MAKIT made out of it after simply defining XML (Just the interesting part)

<columns>
	<Column xmlns="sap.makit"
		name="date"
		value="{path : 'CreatedOn' , formatter: '.formatter.convertDate'}">
	</Column>
	<Column xmlns="sap.makit"
		name="valueA"
		value="{ValueA}"
		type="string">
	</Column>
	<Column xmlns="sap.makit"
		name="result"
		value="{Result}"
		type="number">
	</Column>
</columns> <!-- sap.makit.Column -->
<series>
	<Series xmlns="sap.makit" column="valueA"/>
</series> <!-- sap.makit.Series -->
<values> <!-- sap.makit.Value -->
	<Value xmlns="sap.makit"
		id="axisValue"
		expression="result"
		format="number">
	</Value>
</values>
<categoryRegions>
	<Category xmlns="sap.makit"
		id="dateCategory"
		column="date">
	</Category>
</categoryRegions>

And here is what I've got with VizFrame so far (using the "column"-Viztype already set in XML):

_initVizFrame: function() {
	
	var oVizFrame = this.getView().byId("idVizFrame");
	var oPopOver = this.getView().byId("idPopOver");
	oPopOver.connect(oVizFrame.getVizUid());
	oPopOver.setFormatString(VizFormat.FIORI_LABEL_FORMAT_2);
		
	var oDataset = new sap.viz.ui5.data.FlattenedDataset({
		dimensions : [{
			name : "CreatedOn",
			value : {  
				  parts : [ "CreatedOn" ],  
				  formatter : function(oCreatestamp) {
					if(oCreatestamp === null) {
						return oCreatestamp;
					}
					var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({pattern: "dd.MM.yyyy HH:mm"});
					return oDateFormat.format(oCreatestamp);
				  }
			}
		},
		{
			name : "ValueA",
			value : "{ValueA}"
		}],
		measures : [
		{
			name : "Result",
			value : "{Result}"
		}],
		data : {
			path : "/odataPath"
		}
	});
	
	oVizFrame.setDataset(oDataset);
	oVizFrame.setVizProperties({
		plotArea: {
			dataLabel: {
				visible: false
			}
		},
		categoryAxis: {
			title: {
				visible: true
			}
		},
		valueAxis: {
		label: {
			formatString: VizFormat.FIORI_LABEL_FORMAT_2
			}
		},
		title: {
			visible: false
		},
		legend: {
			visible: false
		}
	});
	
	var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
		"uid"	: "valueAxis",
		"type"	: "Measure",
		"values": ["Result"]
	}),
	
	feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
		"uid" : "categoryAxis",
		"type" : "Dimension",
		"values" : ["CreatedOn", "ValueA"]
	});
	oVizFrame.addFeed(feedValueAxis);
	oVizFrame.addFeed(feedCategoryAxis);
}

You'll notice the Bars are all using the same color. That makes it rather hard to read and I want to use different Colors for different "ValueA Groupings" - just like the MAKIT-Frame example.

Setting the plotArea.colorPalette in the VizProperties will not work.

Now to the Questions:

- Looking at my Data and my provided source-code - am I using the right approach for my case? I have trouble setting up any other VizTypes because I'll get an 50053 Error.

- Why can't the VizFrame understand the Dates from my provided JSON? If I'm setting the "datatype: 'date'" on the dimension "CreatedOn" it'll not work. It'll just render out the value between the "Date()" Column. I think I'm forced to use my custom Formatting in the flattenedDataset- or am I wrong?

I am looking forward for any answers and thank you for your time.

Accepted Solutions (1)

Accepted Solutions (1)

former_member196805
Contributor
0 Kudos
		dimensions : [{
			name : "CreatedOn",
			value : {  
				  parts : [ "CreatedOn" ],  
				  formatter : function(oCreatestamp) {
					if(oCreatestamp === null) {
						return oCreatestamp;
					}
					var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({pattern: "dd.MM.yyyy HH:mm"});
					return oDateFormat.format(oCreatestamp);
				  }
			}
		},
		{
			name : "ValueA",
			value : "{ValueA}"
		}],
		measures : [
		{
			name : "Result",
			value : "{Result}"
		}],

I believe Mike had pointed out the solution somehow. The fact is that you have field "ValueA" defined as 2nd dimension so, on info/column chart, you only have one color but a two layers of hierarchy dimension on categoryAxis. In order to show 2 measure values in different color, try define ValueA as 2nd measure.

Actually, in order to achieve what Mike had proposed, you could define ValueA as another Dimension but feed it as color

var feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "color",
'type' : "Dimension",
'values' : ["ValueA"]
  })

As Mike had mentioned, timeseries_column might another option to you. However, please keep in mind that

1. Date field rendered to vizFrame must be in the valid format. You could check by execute

new Date(1474358616000)

Apprently, "\/Date(1474358616000)\/"is not a valid format.

2. You could still feed ValueA as color to timeseries_column but this wasn't supported until SAPUI5 1.44.

if you have 1.44, please try execute the code on "http://jsbin.com/qapasocafo/edit?html,output" and it should look like this.


Chart is not shown because the latest available version on https://sapui5.hana.ondemand.com/resources/sap-ui-core.js is 1.40.

Former Member
0 Kudos

Hi,

thank you for your answer - this is the easiest way to color the bars so I've marked this as the answer.

Answers (1)

Answers (1)

Former Member
0 Kudos

For anybody who finds this - the current version as I write this is 1.40.12:

Regarding the Dates:

VizFrames seems to only prepare Dates in "timeseries"-Chars.If you want to render a date with a specific pattern - you can use the example above from my "CreatedOn"-Dimension.

Regarding the general Problem:

To have different colors for bars you need different Values (Measures).
In my example above I "grouped" values by the specific "ValueA"-value by having multiple dimensions.

I fixed my case by doing the following:

1. Read my data from my oData-service manually.
2. Rearrange the data in a new object
3. Put this Object into a JSONModel and use this with my VizFrame

This is the original Data coming from the service:

[{
  "ValueA":"01",
  "Result":"205.000",
  "CreatedOn":"\/Date(1474358616000)\/"
},
{
  "ValueA":"02",
  "Result":"214.000",
  "CreatedOn":"\/Date(1474358616000)\/"
}]

This is the new object I arrange:

[{
  "01": "205.00"
  "02": "214.00"
  "Date":"\/Date(1474358616000)\/"
}]

And after some other changes, I came to my final result:

Greetings,

Mike