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']
}));
}
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:
controller.js:
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:
Cheers,
Niclas
Thanks for the correction. It works with this
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”.