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.)

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