Save.
Not sure how to visualize data in AppGyver? This is just the blog for you.
The goals of this blog are:
As of this moment that I'm writing this blog, "D3.js/Google chart" is the only component to display multiple forms of charts in SAP AppGyver.
AppGyver's view components are usually easy to use and input properties are self-explanatory. However, input properties of "D3.js/Google chart" are not so straightforward and will probably leave you with questions marks. This is because the view component requires specific format of chart data and chart definition.
If you are interested in technicality of it, visit Google Chart and see the different kind of charts it supports, the data format and the parameters to modify the charts appearance.
Now without further ado, let's dive into the hands-on exercise.
Please note that the syntax for instantiating "chart" is different between IOS device and Android device, as described in the comment session by Alwin.
Good job! Preview your app on your mobile device and you will should get something like this. This will only work on the mobile devices.
In the same principle we can create other kind of charts. Let's create a pie chart by following the steps of bar chart.
Finally use UNION to combine these two variables into one list of lists variable "chartData". This part is same as bar chart.
Lets take look at another chart from Google Chart. Geo chart requires JavaScript and it's slightly different but it's the same template. Just have to change the red squares below from the template in this blog. That's all the change in the JavaScript code but note that Map requires its specific data structure(blue square), which is Country code and whatever numeric fields you want to show in the chart. The Google Chart example is hard coding the data that's been fed. On the other hand, in our case in AppGyver, we have to modify the data set to listHeader and listItem because our dataset comes from OData with JSON format(and this format is interpreted as list of objects type in AppGyver).
As of now, "D3.js/Google chart" only works on mobile devices. It will NOT render the charts on the web browser. In my opinion, this make the "D3.js/Google chart" much less attractive. Still it's the only chart component and we should savor it.
If you really want to visualize the data on the webpage, there is a workaround(at least for simple chart like bar chart). Use components to create shapes and we can create our own logic to calculate the length/height. If there is a request, I will write a blog about it but for now, it's best that we wait for AppGyver to release an update on "D3.js/Google chart" to work on webpage.
Dear AppGyver team, hopefully this is on the roadmap😃
The goals of this blog are:
- To demonstrate that app creator who doesn't have JavaScript experience can also easily use this chart component, even though it requires custom JavaScript codes.
- this blog can be referred as a documentation on how to use the Chart components in AppGyver. (I did not find official documentation in SAP or AppGyver webpage)
Data visualization component in SAP AppGyver
As of this moment that I'm writing this blog, "D3.js/Google chart" is the only component to display multiple forms of charts in SAP AppGyver.
AppGyver's view components are usually easy to use and input properties are self-explanatory. However, input properties of "D3.js/Google chart" are not so straightforward and will probably leave you with questions marks. This is because the view component requires specific format of chart data and chart definition.
If you are interested in technicality of it, visit Google Chart and see the different kind of charts it supports, the data format and the parameters to modify the charts appearance.
Now without further ado, let's dive into the hands-on exercise.
Bar chart
Step 1.Downloading component from market place
Step 2.Adding data source
Step 3.Adding variables and logic
[['Country', 'UnitPrice', 'Freight']]MAP<item>(data.Invoices1, [ LOOKUP(item, "Country"), NUMBER(LOOKUP(item, "UnitPrice")), NUMBER(LOOKUP(item, "Freight")) ] )Step 4.Adding JavaScript code
// function name must be chartExecutor
function chartExecutor() {
// any Google Charts libraries can be used
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = google.visualization.arrayToDataTable("$chartData");
const options = {
chart: {
title: 'Unit Price & Freight comparison for Product 63',
subtitle: 'from invoice data'
},
hAxis: {
title: 'Country',
minValue: 0,
},
vAxis: {
title: 'Price'
},
bars: 'horizontal',
height: 400,
colors: ['#1b9e77', '#d95f02']
};
// element ID must be chart_data_div
// For IOS device, use google.charts.Bar
const chart = new google.charts.Bar(document.getElementById('chart_data_div'));
// For Android device, use google.visualization.BarChart
// const chart = new google.visualization.BarChart(document.getElementById('chart_data_div'));
chart.draw(data, options);
}
}
// The chart component consumes the chart function as a string
const funcAsString = chartExecutor.toString();
return { funcAsString }Please note that the syntax for instantiating "chart" is different between IOS device and Android device, as described in the comment session by Alwin.
Good job! Preview your app on your mobile device and you will should get something like this. This will only work on the mobile devices.
Pie chart
In the same principle we can create other kind of charts. Let's create a pie chart by following the steps of bar chart.
[['Category', 'Sales']]MAP<item>(data.Category_Sales_for_19971, [ LOOKUP(item, "CategoryName"), NUMBER(LOOKUP(item, "CategorySales")) ] )Finally use UNION to combine these two variables into one list of lists variable "chartData". This part is same as bar chart.
'chart_data_div'. AppGyver are rendering the charts behind the scenes using specifically these names. The chart will not show if these two parameters are in any other names.
It's all about adapting to Google Charts
Lets take look at another chart from Google Chart. Geo chart requires JavaScript and it's slightly different but it's the same template. Just have to change the red squares below from the template in this blog. That's all the change in the JavaScript code but note that Map requires its specific data structure(blue square), which is Country code and whatever numeric fields you want to show in the chart. The Google Chart example is hard coding the data that's been fed. On the other hand, in our case in AppGyver, we have to modify the data set to listHeader and listItem because our dataset comes from OData with JSON format(and this format is interpreted as list of objects type in AppGyver).
Limitation
As of now, "D3.js/Google chart" only works on mobile devices. It will NOT render the charts on the web browser. In my opinion, this make the "D3.js/Google chart" much less attractive. Still it's the only chart component and we should savor it.
Fiori-like dashboard
- Fiori Theme "Home" is used for the page layout
- Background color of the tiles uses Fiori Theme "Base".
- Boarder of the tiles are set with "Large rounding"
- Width and Height of the tiles are 150x150px
Next step
If you really want to visualize the data on the webpage, there is a workaround(at least for simple chart like bar chart). Use components to create shapes and we can create our own logic to calculate the length/height. If there is a request, I will write a blog about it but for now, it's best that we wait for AppGyver to release an update on "D3.js/Google chart" to work on webpage.
Dear AppGyver team, hopefully this is on the roadmap😃
- SAP Managed Tags:
21 Comments
