How to implement a Timeseries_line chart in SAPUI5

How to implement a Timeseries_line chart in SAPUI5: 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.)

       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: ''  } } }">        

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'] })); }