Introduction

When working with OpenUI5 (which is open source) you do not have all the libraries of SAPUI5.In most cases, you can accomplish your goals with OpenUI5. But there will be always cases that you’ll need more than what’s in OpenUI5. In that case, you’ll have multiple options. One of the most obvious choices is switching to SAPUI5 (if this has what you need). This option will have extra costs, which you do not want! So another option is looking for external open source libraries.

Charts

When you have the requirement to use Charts in your application, you will not be able to do this with OpenUI5. This is just not foreseen in OpenUI5. One of the options will be SAPUII5, because this has Chart components!

But what if you don’t have the budget for a SAPUI5 license? Or you just want to keep using open source frameworks/libraries?

Besides switching to SAPUI5, you could look for other open source libraries. For Charts, google has a great library called Google Charts! Of course, there are multiple other libraries for Charts!

Google Charts

Google Charts is a javascript library for visualizing data on your website. You can visualize your data in different kind of charts.  An overview of all charts provided by google:

https://developers.google.com/chart/interactive/docs/gallery

Google Charts in OpenUI5

Okey, so Google Charts are looking nice! But how to use this in combination with OpenUI5?

• Load Google Chart in the “index.html”

• Create an HTML component in the JS View ( I also add this HTML component to a Panel, which is not required)
  • In the HTML component I add a DIV which will be used for creating the chart.
  • In the afterRendering method I define my callback method, which is in the controller .

var html1 = new sap.ui.core.HTML("html1", {              content:                      "<div id=\"piechart_3d\" style=\"width: 900px; height: 500px;\"></div>",              preferDOM : false,                                 afterRendering : function(e) {              google.setOnLoadCallback( oController.drawChart() );              }      });

• Initialization of my data by using the google API (Controller)

data = google.visualization.arrayToDataTable([                                              ['Task', 'Hours per Day'],                                              ['SAP',     15],                                              ['Eat',      2],                                              ['Traffic',  2],                                              ['Sport', 1],                                              ['Sleep',    4]                                                     ]);

• Configure the Google Chart (Controller)

var options = {      title: 'My Daily Activities',      is3D: true,      slices: {  0: {offset: 0.2}},      legend : {position: 'left', textStyle: {color: 'blue', fontSize: 16}},    };

• Define the Chart by using the DIV element(Controller)

chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));

• Draw the Chart (Controller)

chart.draw(data, options);

• Add an event listener  to the Chart for selection with a callback function (Controller)

google.visualization.events.addListener(chart, 'select',   this.selectHandler);

• Create event listener (Controller)
  • The event listener will just alert the row, column and description of the selected value.

selectHandler: function(){   var selection = chart.getSelection();   var message = '';   for (var i = 0; i < selection.length; i++) {     var item = selection[i];     if (item.row != null && item.column != null) {       var str = data.getFormattedValue(item.row, item.column);       message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';     } else if (item.row != null) {       var str = data.getFormattedValue(item.row, 0);       message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';     } else if (item.column != null) {       var str = data.getFormattedValue(0, item.column);       message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';     }   }   if (message == '') {     message = 'nothing';   }   alert('You selected ' + message);  }

Full Code

Full code of the view:

sap.ui.jsview("openui5withchart.chart", {  /** Specifies the Controller belonging to this View.  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.  * @memberOf openui5withchart.chart  */  getControllerName : function() {  return "openui5withchart.chart";  },  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.  * Since the Controller is given to this method, its event handlers can be attached right away.  * @memberOf openui5withchart.chart  */  createContent : function(oController) {  var content = [];  var html1 = new sap.ui.core.HTML("html1", {              content:                      "<div id=\"piechart_3d\" style=\"width: 900px; height: 500px;\"></div>",              preferDOM : false,                                  afterRendering : function(e) {              google.setOnLoadCallback( oController.drawChart() );              }      });  var oPanel = new sap.ui.commons.Panel();  oPanel.setTitle(new sap.ui.core.Title({text: "Google Chart"}));  oPanel.addContent(html1);  content.push(oPanel);  return content;  }
});

Full code of the controller:

var chart = null;
var me = null;
var data = null;
sap.ui.controller("openui5withchart.chart", {
// onInit: function() {
//
// },  drawChart: function() {   me = this;   data = google.visualization.arrayToDataTable([                                              ['Task', 'Hours per Day'],                                              ['SAP',     15],                                              ['Eat',      2],                                              ['Traffic',  2],                                              ['Sport', 1],                                              ['Sleep',    4]                                                     ]);   var options = {      title: 'My Daily Activities',      is3D: true,      slices: {  0: {offset: 0.2}},      legend : {position: 'left', textStyle: {color: 'blue', fontSize: 16}},    };    chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));    chart.draw(data, options);    google.visualization.events.addListener(chart, 'select',   this.selectHandler);  },  selectHandler: function(){   var selection = chart.getSelection();   var message = '';   for (var i = 0; i < selection.length; i++) {     var item = selection[i];     if (item.row != null && item.column != null) {       var str = data.getFormattedValue(item.row, item.column);       message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';     } else if (item.row != null) {       var str = data.getFormattedValue(item.row, 0);       message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';     } else if (item.column != null) {       var str = data.getFormattedValue(0, item.column);       message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';     }   }   if (message == '') {     message = 'nothing';   }   alert('You selected ' + message);  }
});

Result

After selection:

You can find the view/controller and index in the attachment!

For the pie chart I’ve used following:

https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#3D

For the select event I’ve used following:

https://developers.google.com/chart/interactive/docs/events#The_Select_Event

Another example of using open source libraries with Openui5: http://scn.sap.com/community/developer-center/front-end/blog/2014/02/20/client-side-sort-and-search-in-openui5-with-underscorejs

Hope it's useful!

Kind regards,

Wouter