I spent two days figuring out how to change a line chart to a timeseries_line chart. so here is an example, hoping that it will save you some time and confusion.
I use the chartContainer to have the toolbar on top of the vizFrame.
Here the XML file in a fragment: (The specific properties needed for the timeseries_line chart are highlighted in bold.)
<!DOCTYPE xml>
<core:FragmentDefinition
xmlns="sap.m"
xmlns:commons="sap.suite.ui.commons"
xmlns:viz="sap.viz.ui5.controls"
xmlns:layout="sap.ui.layout">
<commons:ChartContainer showFullScreen="true"
autoAdjustHeight="false"
showLegend="true"
id="chartContainer">
<commons:content>
<commons:ChartContainerContent
icon="sap-icon://line-chart">
<commons:content>
<viz:VizFrame id="vizFrame"
vizType="timeseries_line"
width="100%"
uiConfig="{applicationSet:'fiori'}"
vizProperties="{
plotArea:{
window: {
start: 'firstDataPoint',
end: 'lastDataPoint'
}
},
legend:{
visible: true
},
title:{
visible: false
},
valueAxis:{
title:{
visible: true
}
},
timeAxis:{
title:{
visible: true
},
levels:[ 'month', 'day', 'year' ],
interval:{
unit: ''
}
}
}">
</viz:VizFrame>
</commons:content>
</commons:ChartContainerContent>
</commons:content>
<commons:toolbar>
<OverflowToolbar>
<Button text="{i18n>BUT_UPDATE_CHART}"
press="showChart">
</Button>
<ToolbarSpacer/>
</OverflowToolbar>
</core:FragmentDefinition>
The next thing we need is a function to draw the chart in our controller. To make it easy, we call this function on pressing a button. We get the dates as timestamp and convert them in the formatter to Date.
const dataModel = {
data: [
{
"timestamp": 1497322203254,
"measure": {
"Steps": 50
}
},
{
"timestamp": 1497332203254,
"measure": {
"Steps": 57
}
}
]
}
var dataJsonModel = new sap.ui.model.json.JSONModel(dataModel );
showChart: function () {
this.vizFrame = Fragment.byId(fragmentName, 'vizFrame');
this.vizFrame.removeAllFeeds();
const dataSet = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: 'time',
value: {
path: 'timestamp',
formatter: function ( timestamp ) {
return new Date(timestamp);
}
},
dataType: "date"
}],
measures: [{
name : 'measure',
value: '{measure}'
}],
data: {
path: '/data'
}
});
this.vizFrame.setDataset(dataSet);
this.vizFrame.setModel(dataJsonModel );
this.vizFrame.addFeed(new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': 'timeAxis',
'type': 'Dimension',
'values': ['time']
}));
this.vizFrame.addFeed(new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': 'valueAxis',
'type': 'Measure',
'values': ['measure']
}));
}
