Skip to Content
0
Sep 11, 2020 at 09:20 AM

SAPUI5 How to pass date and time to Vizframe timeseries_line chart

274 Views Last edit Sep 11, 2020 at 09:28 AM 2 rev

Hi!

I'm trying to pass date and time to Vizframe timeseries_line.

I'm trying to pass it in json format:

[{
time: new Date(year,month,day,hour,minute,second),
value: someValue
}, ...]

XML:

<viz:VizFrame id="periodMonitoringVizFrame"
	vizType='timeseries_line' legendVisible="false"
	vizProperties="{	title: {visible: false},
		                categoryAxis : {title: {visible: false}},
		                valueAxis: {title: {visible: false},
		                			label: {allowDecimals: false},
		                			axisTick: {visible: false}},
		                plotArea: {marker: {visible: false}},
		                interaction : {
						          selectability : {
						              mode : 'none'
						          }
						 	 }
		                }"
	width="100%" height="100%"
	class="sapUiSmallMarginTop"
	busy="true"
	busyIndicatorDelay="0">
	<viz:dataset>
		<viz.data:FlattenedDataset
			data="{periodMonitoringModel>/requests}">
			<viz.data:dimensions>
				<viz.data:DimensionDefinition
					name="Время" value="{periodMonitoringModel>time}" />
			</viz.data:dimensions>
			<viz.data:measures>
				<viz.data:MeasureDefinition
					name="Количество" value="{periodMonitoringModel>value}" />
			</viz.data:measures>
		</viz.data:FlattenedDataset>
	</viz:dataset>

	<viz:feeds>
		<viz.feeds:FeedItem uid="categoryAxis"
			type="Dimension" values="Время" />
		<viz.feeds:FeedItem uid="valueAxis"
			type="Measure" values="Количество" />
	</viz:feeds>
</viz:VizFrame>

With this code Vizframe displays no data:

Although I succeed with other Vizframe timeseries_line, I passed date in String "MM/dd/yyyy" format, it worked well.

Help me please, how to pass date and time to timeseries_line?

UPD: if I set data like this:

[{
time: new Date(year,month,day,hour,minute,second).getTime(),
value: someValue
}, ...]

and also add a formatter to DimensionDefinition value:

function(timestamp) {
			return new Date(timestamp);
		    }

it shows maximum value of someValue, but still shown no data: