Technical Articles
Charts and graphs in SAP AppGyver(and creating Fiori-like dashboard)
Not sure how to visualize data in AppGyver? This is just the blog for you.
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.
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😃
Hi Aocheng Yang,
Thank you for such a wonderful blog.
I tried to replicate the steps, and I'm able to get the data in chartData.
But the value of page variable "chartFunctionString" I'm getting as empty string.
Can you please suggest in which component should I check?
Regards,
Umesh Mudaliar.
Do you have "Set page variable" after the Javascript? Are you assigning the output of that Javascript? Could you share how your function flow logic looks like?
Thanks for sharing, i would request if you can post the blog for web .
Thanks,
Taseeb Saeed
Thanks for sharing good material.I look at the blog and check it over and over and try the same thing
when running on cellphone
The chart is not drawn and only a blank screen appears.
There is no error message.
Can you tell me which part I need to check more?
Regards,
woo.
You can check in debugger if ‘chartFunctionString’ and ‘chartData’ have values filled. If no value or wrong value are filled, probably you are doing something wrong on ‘Set page variable’ functions.
Let me know if you need more help.
Thanks for the advice.
As you advised, I checked the variable in debug mode as shown in the figure below.
Please tell me where the problem is.
Regards,
woo.
charData looks good but chartFunctionString has nothing in it so that's the problem. Check "Step 4.Adding JavaScript code" again and make sure output parameter funcAsString is set as value type=object and property type=text.
In addition, make sure to set correct assigned value in the following "set page variable" function, like below.
Thank you again.
I checked it again as you advised.
The result is still blank.
Could you please check it one more time?
Hmm.. are you sure you're assigning it to "chartFunctionString"? I see from your debugger you're using "charFunctionString" and "charData" instead of "chartFunctionString" and "chartData". Try aligning the variable names throughout the app first and see if it works.
Hi Aocheng Yang ,
I am also getting blank screen while opening the app.What could be the reason? Please help me with this.
Thanks & Regards,
Keerthana
Hi, are you running on the mobile preview app? This chart is not supported on web, as mentioned in the blog.
If indeed running on mobile device, could you paste the whole chartFunctionString here? Let me see if I can reproduce your issue.
Hi,
Thank you for the reply.
Yes i am running on mobile device.
"chartFunctionString":
Checked now and my chartFunctionString was exactly the same so no issue there. I'd check next:
I'm using IOS mobile device. Are you using IOS or Android?
Hi ,
Thanks for your reply.
The data is correctly bound,using the latest preview app,and cleared cache, nothing worked in Android. But it is working in IOS .
Regards,
Keerthana
I see. I don’t have android device near me now but it looks like a android specific issue. It’s worth reporting to AppGyver community here.
Hello,
In the JavaScript "Generate Google Charts function" I changed
to
And now it also works for Android.
Thank you very much Alwin, I've updated the blog to consider Android as well.
Hello
I have followed the steps for the bar graph and everything is perfect.
But when I include another google chart view component to create the pie chart (on the same page), nothing comes out (blank).
I've used four other different page variables for the pie chart: chartData1, chartFunctionString1, listHeader1 and listItem1.
Is it correct to do this?
I understand that for each new type of graph, you have to create new page variables.
Could you help me to solve it?
Hello @Aocheng Yang,
Fantastic blog and contribution to SAP Build Apps/Appgyver community. It happens to be, I wanted to use the Appgyver charting widget in my app. However, it is a web app, not a mobile map. The native (react native) plugins support is still in the making but there is a way to use Google charts with SAP Build Apps/Appgyver crafted web applications using the Inline Frame web component as described here
Happy charting!
Hello Piotr, this is a great finding!
I’ll add a use case for web app and change the limitation section of this blog. Let me find some time to try this out.
Best regards, Aocheng