Skip to Content
avatar image
Former Member

vizFrame timeseries_column chart horizontal scrollbar

Hi All,

I am facing an issue with "timeseries_column" viztype.

not able to see the column chart on a dashboard,

Please find the below snapshot of current output:

But I am excepting the result like below snapshot

I tried in SAPUI5 Explored also but not able find it.

Code :

View:

<mvc:View controllerName="ZCOST_SALES.controller.cost_sales" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m" xmlns:layout="sap.ui.layout" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
	xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:core="sap.ui.core">
<App>
<pages>
<Page title="{i18n>title}" showHeader="false">
<content>
<layout:FixFlex id='chartFixFlex' minFlexSize="400">
<layout:flexContent>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='timeseries_column'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/data}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="FiscalYear/FiscalPeriod" value="{Date}" dataType="date"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Cost/Sales% and Cost/Sales%(Ref Year)" value="{Revenue}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Cost/Sales% and Cost/Sales%(Ref Year)"/>
<viz.feeds:FeedItem id='categoryAxisFeed' uid="timeAxis" type="Dimension" values="FiscalYear/FiscalPeriod" isScrollable="true"/>
</viz:feeds>
</viz:VizFrame>
</layout:flexContent>
</layout:FixFlex>
</content>
</Page>
</pages>
</App>
</mvc:View>

Controller:

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
	"use strict";
return Controller.extend("ZCOST_SALES.controller.cost_sales", {
		product1: {
			"data": [{
				"Date": "1/25/2017",
				"Revenue": 1016000.07
			}, {
				"Date": "2/26/2017",
				"Revenue": 1075000.71
			}, {
				"Date": "3/27/2017",
				"Revenue": 1130000.77
			}, {
				"Date": "4/28/2017",
				"Revenue": 1210000.99
			}, {
				"Date": "5/29/2017",
				"Revenue": 1264000.85
			}, {
				"Date": "6/30/2017",
				"Revenue": 1280000.93
			}, {
				"Date": "7/31/2017",
				"Revenue": 1400000.02
			}, {
				"Date": "8/1/2017",
				"Revenue": 1471000.97
			}, {
				"Date": "6/10/2017",
				"Revenue": 1280000.93
			}, {
				"Date": "7/14/2017",
				"Revenue": 1400000.02
			}, {
				"Date": "8/11/2017",
				"Revenue": 1471000.97
			}, {
				"Date": "9/2/2017",
				"Revenue": 1500000.17
			}, {
				"Date": "10/3/2017",
				"Revenue": 1619000.75
			}, {
				"Date": "11/4/2017",
				"Revenue": 1696000.5
			}, {
				"Date": "12/5/2017",
				"Revenue": 1850000.43
			
			}]
		},
		onInit: function() {
		var model = new JSONModel();
		model.setData(this.product1);
		this.getView().byId("idVizFrame").setModel(model);
		this.getView().byId("idVizFrame").setVizProperties({
				title: {
					text: "Cost Vis a Vis Sales"
				},
				plotArea: {
					dataLabel: {
						visible: true
					},
					window: {
						start: "firstDataPoint",
						end: "lastDataPoint"
					},
					isScrollable: true
				},
				legend: {
					visible: true,
					isScrollable: true
				},
				valueAxis: {
					label: {
						visible: true
					},
					title: {
						visible: true
					}
				},
				timeAxis: {
					// levels: ["month", "year"],
					label: {
						visible: true
					},
					title: {
						visible: true
					},
					axisLine:{
						size:1
					}
				},
				categoryAxis: {
					title: {
						visible: true
					}
				}
			});
		}
	});
});

Please help me on this.

Thanks,

Satya

vizchart.png (48.2 kB)
vizchart2.png (68.6 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • avatar image
    Former Member
    Sep 26, 2017 at 05:05 AM

    Can anyone help me on this pls...

    Add comment
    10|10000 characters needed characters exceeded