Skip to Content
avatar image
Former Member

VizFrame: Dates & Colors

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.

makit.png (41.7 kB)
viz.png (23.8 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Nov 16, 2016 at 04:11 AM
    		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.

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi,

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

  • avatar image
    Former Member
    Nov 15, 2016 at 01:01 PM

    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

    Add comment
    10|10000 characters needed characters exceeded