Mobilize ALV Reports - Part 3 Visualize ALV Data w...

basarozgur_kahraman · ‎10-01-2012

In my previous blog post, we created a mobile application to show ALV data. Now we will visualize data with Highcharts .

Before begin, i recommend you to read previous posts.

Part 1 - Create RESTful service

Part 2 - Create JQueryMobile Web Application with Datatables plugin

Pre-requisites:

Check over Highcharts documentation

Steps:

Modify index.html for charting
Create charting rule selections dynamicly based on ALV Metadata
Create chart data according to rule selections
Initialize highcharts

index.html

<!DOCTYPE html>

<html>

<head>

$.support.cors = true;

jQuery.support.cors = true;

</script>

</head>

<body>

<h1>MySapReport</h1>

<a href="#settings" data-role="button" data-icon="gear" data-theme="b">Settings</a>

</div>

<label for="transaction">Transaction:</label>

</div>

<label for="variant">Variant:</label>

</div>

<a href="javascript:getALV()" data-role="button" data-icon="grid" data-theme="b">Call Report</a>

<br>

</div>

<label for="connectUrl">Connect to:</label>

<label for="username">Username:</label>

<label for="password">Password:</label>

<br>

</div>

<a href="#chartRules" data-role="button" data-icon="star" data-theme="e" data-back="true">Chart</a>

</div>

</div>

<h1>Chart Rules</h1>

</div>

<label for="select-choice-ctype" class="select">Chart Type</label>

<option value="line">Basic Line</option>

<option value="area">Basic Area</option>

<option value="bar">Basic Bar</option>

<option value="column">Basic Column</option>

<option value="pie">Pie chart</option>

</select>

<label for="select-choice-b" class="select">Series</label>

<label for="select-choice-f" class="select">Series Filter</label>

</div>

<a href="#pageChart" data-role="button" data-icon="grid" data-theme="e" data-back="true">Show Chart</a>

</section>

</div>

<h1>Chart</h1>

</header>

</section>

</div>

</body>

</html>

Create charting rule selections

function fillChartingRules(){

var outputx = [];

var outputy = [];

var outputb = [];

if (!$('#select-choice-x').is(':empty')){

return;

}

outputx.push('<option>X-Axis</option>');

outputy.push('<option>Y-Axis</option>');

outputb.push('<option>Base</option>');

for(i=0;i<alvMetadata.length;i++){

if (alvMetadata[i].inttype === 'P' || alvMetadata[i].inttype === 'I' ||

alvMetadata[i].inttype === 'F' || alvMetadata[i].inttype === 'b' ||

alvMetadata[i].inttype === 's'){

outputy.push('<option value="' + alvMetadata[i].fieldname.toLowerCase() + '">' + alvMetadata[i].coltext + '</option>');

}else{

outputx.push('<option value="' + alvMetadata[i].fieldname.toLowerCase() + '">' + alvMetadata[i].coltext + '</option>');

outputb.push('<option value="' + alvMetadata[i].fieldname.toLowerCase() + '">' + alvMetadata[i].coltext + '</option>');

}

$('#select-choice-x').empty();

$('#select-choice-y').empty();

$('#select-choice-b').empty();

$('#select-choice-f').empty();

$('#select-choice-x').append(outputx.join(''));

$('#select-choice-y').append(outputy.join(''));

$('#select-choice-b').append(outputb.join(''));

try{

$('#select-choice-x').selectmenu("refresh");

$('#select-choice-y').selectmenu("refresh");

$('#select-choice-b').selectmenu("refresh");

$('#select-choice-f').selectmenu("refresh");

}catch(err){ }

}

function fillSeriesFilterData(){

var outputf = [];

var optionf;

outputf.push('<option>Base Filter</option>');

for(i=0;i<alvData.length;i++){

optionf = '<option value="' + alvData[i][$("#select-choice-b").val()] + '">' + alvData[i][$("#select-choice-b").val()] + '</option>';

if (jQuery.inArray(optionf, outputf) === -1)

outputf.push(optionf);

}

outputf.sort(function(a,b) {

return (a > b) ? 1 : ((b > a) ? -1 : 0);

} );

$('#select-choice-f').empty();

$('#select-choice-f').append(outputf.join(''));

$('#select-choice-f').selectmenu('refresh', true);

}

Create chart data

function setXaxisCategories(pOptions){

alvData.sort(function(a,b) {

return (a[$("#select-choice-x").val()] > b[$("#select-choice-x").val()]) ? 1 : ((b[$("#select-choice-x").val()] > a[$("#select-choice-x").val()]) ? -1 : 0);

} );

for(i=0;i<alvData.length;i++){

if (jQuery.inArray(alvData[i][$("#select-choice-x").val()], pOptions.xAxis.categories) === -1)

pOptions.xAxis.categories.push(alvData[i][$("#select-choice-x").val()]);

}

function setSeries(pOptions){

var seriesData = [];

var seriesFilter = $("#select-choice-f").val() || [];

var hasFilter = false;

var _series = {

name:"",

data:[]

};

//initialize data array for each category

var _initData = [];

for(i=0;i<pOptions.xAxis.categories.length;i++){

_initData.push(0);

}

if (seriesFilter.length < 1){

_series.name = "";

_series.data = _initData.slice();

seriesData.push(_series);

}else{

hasFilter = true;

for(i=0;i<seriesFilter.length;i++){

var _seriesF = {

name:"",

data:[]

};

_seriesF.name = seriesFilter[i];

_seriesF.data = _initData.slice();

seriesData.push(_seriesF);

}

var xValue;

var yValue;

var _index;

var _seriesindex;

var _filter;

for(i=0;i<alvData.length;i++){

xValue = alvData[i][$("#select-choice-x").val()];

yValue = alvData[i][$("#select-choice-y").val()];

_index = jQuery.inArray(xValue, pOptions.xAxis.categories);

_seriesindex = 0;

if (hasFilter) {

_filter = alvData[i][$("#select-choice-b").val()];

if (jQuery.inArray(_filter, seriesFilter) !== -1){

for(j=0;j<seriesData.length;j++){

if (_filter === seriesData[j].name){

_seriesindex = j;

break;

}

}else{

continue;

}

if (isNaN(seriesData[_seriesindex].data[_index]))

seriesData[_seriesindex].data[_index] = parseFloat(yValue);

else

seriesData[_seriesindex].data[_index] = seriesData[_seriesindex].data[_index] + parseFloat(yValue);

//set 2 decimal point

seriesData[_seriesindex].data[_index] = parseFloat(seriesData[_seriesindex].data[_index].toFixed(2));

}

pOptions.series = seriesData;

}

Initialize Highcharts

function basicChart(){

var options = {

chart: {

renderTo: 'chartContainer',

defaultSeriesType: $("#select-choice-ctype").val()//pie, column, bar, line

},

title: {

text: reportDescription

},

subtitle: {

text: $('#select-choice-x option:selected').text() + ' / ' + $('#select-choice-y option:selected').text()

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -10,

y: 100,

borderWidth: 0

},

xAxis: {

categories: [],

labels: {

rotation: -45,

align: 'right',

style: {

fontSize: '13px',

fontFamily: 'Verdana, sans-serif'

}

},

title: {

text: $('#select-choice-x option:selected').text()

}

},

yAxis: {

title: {

text: $('#select-choice-y option:selected').text()

}

},

series: []

};

setXaxisCategories(options);

setSeries(options);

// Create chart

var chart = new Highcharts.Chart(options);

}

Test

You may use MySapReport for testing.

Rule definions of chart;

Chart Type (Mandatory): There are 5 kind of charts predefined (Line, Area, Bar, Column, Pie).
X-Axis (Mandatory): Used as category axis. Only non-numerical alv columns can be chosen.
Y-Axis (Mandatory): Used as value type axis. Only numeric alv columns can be chosen.
Series (Optional): Used as collection of datapoints in category axis.
Series Filter (Optional): Used as filter for series, filled by selection event of Series and values are derived dynamicly from alv data.

You can find all sources codes on https://github.com/basarozgur/MySapReport

Screen Shots:

Chart rule definition

Basic Line

Basic Area

Basic Bar

Basic Column

Pie

Mobilize ALV Reports - Part 3 Visualize ALV Data with Highcharts for iPad

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z