Displaying KPI Analytics in SAP CAI Chatbot Message
Welcome to my another interesting blog ” Displaying Analytics or Dynamic Chart in SAP Conversational AI” as response. Hold on hold on if you are SAP CAI fan then you might’ve started thinking when chart control got released in SAP CAI for message. Yes you are right, there is no standard chart control available in SAP CAI as of now. Just to kill your all curiosity you have to read this blog. I promise it’s really worthy 😀
So How i got this idea to bring dynamic chart or analytics in SAP Conversational AI as response?
One day i was surfing through different question in SAP Conversational AI and one question i found how to display kpi/chart in SAP CAI Chat bot. I found this question pretty interesting because there is no standard message control for displaying chart in conversational AI. Who doesn’t love analytics people love it in SAP Fiori app and the way Chatbot is growing as Enterprise Assistant people would love to see KPI/Analytics in Chatbot too.
But how it is possible as there is no standard chart control available in SAP Conversational AI?
“when there is a will there’s a way”
Have you heard about image chart API, Image chart is a great work around in this case, Why? Because SAP CAI have standard image control as message/response.
How Image Chart API works?
You can generate image url dynamically with different chart and data point just by passing all the parameter with the help of Image Chart server, it is very similar to google image chart. It allows you to create dynamic charts using nothing more than a URL string and that is best part because we know a image url with chart works perfectly in SAP CAI. To get the feeling copy the below url and paste in the browser and hit.
To explore it in details play with it by changing the data point so it will give you good idea how you can play with it. For more details have a look at the official site.
There are another similar type of solution image chart.
Lets have a look how it looks in Embedded SAP CAI Webchat in Fiori Launchpad
Let’s get into the action, how we are going to implement it.
As i mentioned we will be using quick chart api for generating dynamic image chart and quick chart is open source that means you also can host this in SAP Cloud Platform and even docker version is also available, so you can also directly deploy to cloud foundry with very minimal effort. In this example we are going to get sales data from a particular odata service and then pass those data self hosted quick chart api server in SAP Cloud Platform CF to generate the dynamic image chart with url which will be used in SAP CAI Response using node.js based web hook message builder.
Let’s have a look at Technical Architecture
As you can see in the architecture chatbot has been designed in SAP Conversational AI which is hosted as Webchat in Fiori launchpad. Sales related analytics data is coming from SAP S/4HANA as a odata service which is being called in node.js based webhook application for building the message. For generating dynamic chart, docker container of quickchart has been deployed into SAP Cloud Platform Cloud foundry.
Let’s break this whole stuff into small pieces, so that it would be easy to understand.
Step 1: Deploying the docker container of quickchart.
Docker image of quickchart is located here
In order to deploy docker image of quickchart as a container into SAP Cloud Platform just login to CF CLI and type below command
cf push quickcdocker –docker-image ianw/quickchart
On successful deployment you will be able to open the application just like below and able to generate image based chart.
Step 2: Analysis the Sales by Region OData service which will be base of our chart here.
N.B Just for tutorial or demo purpose i have used HANA Shine content based Sales by region odata, but you can use actual odata service
Below is how my odata service looks like
Step 3: Developing Node.js based Web hook application to build message / response for SAP CAI Chat bot
As i told you our main goal is to use quickchart api to generate url of chart image dynamically so this node.js application will fetch all the data point from above odata service and use those data point to generate url for image chart. Please have a look at Github repository for code snippet.
For deploying node.js based application to cloud foundry have a look at this blog.
Step 4: Designing Chatbot in SAP CAI
If you are beginner and just have started exploring SAP Conversational AI then i would suggest you to go through this amazing tutorial
Here is my intent
My Skill’s Requirement, Chat bot will ask what type of chart user want to see, in this example two options i have maintained as entity (pie chart and donut chart)
In the action use node.js based Web hook and below is how action looks like
Step 5: Deploying this Chat bot in Fiori Launchpad, Please follow this blog
Once all the steps are finished you can test it, Below is the video of my testing.Please have look. I hope you enjoyed this trick to bring or displaying chart in SAP CAI. If you liked this blog please like comment and share with your colleague.