Skip to Content
Author's profile photo Former Member

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

    

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Tridwip Das
      Tridwip Das

      Hi,

      In this example time is represented via dimension but I want to show time as measure in my vizframe and getting error of " incomplete dimension binding". Can you help me? Here is the code in:

      view.xml:

      	<viz:VizFrame id="idcolumn" uiConfig="{applicationSet:'fiori'}" height='50%' width="50%">

      controller.js:

      onPresschart:function(){
      var oTable = this.getView().byId("tstable");
      var model= oTable.getModel();
      var oVizFrame = this.getView().byId("idcolumn");
      //oVizFrame.setModel(model);
      /*sap.viz.ui5.controls.common.feeds.FeedItem for property uid pass timeAxis*/
      var oDataset = new sap.viz.ui5.data.FlattenedDataset({
      dimensions : [{
      name : 'type',
      value : "{type}",
      //dataType:"date"
      }],
      measures : [{
      name : 'hours',
      value : "{hours}",
      
      } ],
      
      data : { path : "/"}});
      oVizFrame.setDataset(oDataset);
      oVizFrame.setModel(model);
      oVizFrame.setVizType('column');
      oVizFrame.setVizProperties({ 
      plotArea: {colorPalette : d3.scale.category20().range() }});
      var feedvalueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
      'uid': "valueAxis",
      'type': "Measure",
      'values': ["hours"]
      }),
      feedcategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
      'uid': "categoryAxis",
      'type': "Dimension",
      'values': ["type"] });
      oVizFrame.addFeed(feedcategoryAxis);
      oVizFrame.addFeed(feedvalueAxis);
      
      // model.refresh();
      //oTable.bindItems("jModel>/d"); 
      }
      
      Author's profile photo Niclas von Caprivi
      Niclas von Caprivi

      Thank you very much!

      I had to declare the constants (const) as variables (var). If you want to plot the measure "Steps" you have to adjust one line in the controller.js:

      var 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/Steps}"
      	}],
      	data: {
      		path: "/data"
      	}
      });

      Cheers,
      Niclas

      Author's profile photo Marie-Pierre MELA
      Marie-Pierre MELA

      Thanks for the correction. It works with this

      Author's profile photo Nagaraj J
      Nagaraj J

      hi,

      my json is as follows

      var dataModel = [
      {
      “Forecast_Value”: 17.535363641833886,
      “Current_Value”: 15.53632456,
      “month”: “April”
      },
      {
      “Forecast_Value”: 16.545201094134246,
      “Current_Value”: 12.6756786,
      “month”: “May”
      },
      {
      “Forecast_Value”: 15.336255133410218,
      “Current_Value”: 0,
      “month”: “June”
      }
      ]

      I am unable to show to “timeseries_line” viz type chart. i am getting “[50005] – timeAxis : does not meet the minimum or maximum number of feeds definition”.