How to show a chart or visualization on Alexa Echo Show?

Question

There are several Alexa skills that include charts - CNBC's Alexa skill is even highlighting the fact that their integration with the Alexa Presentation Language (APL) allows users to view charts:

Now with APL integration, the CNBC skill can do more on your favorite Alexa devices. Visualize market movements with charts, see a market snapshot, watch the latest videos from CNBC, and more!

Yet I can find no documentation or code on Github on how to create such visualizations using the APL. Is CNBC using a beta feature of the APL that is not publicly available at this time?

Answer 1

Yes, as of now, APL is still in beta; and yes, skills with charts means that they are using the beta feature. However, beta is publicly available.

If you wish to build a skill with APL, you need to turn on the Alexa Presentation Language and Display Interface options in Interfaces in the Custom section for your skill in the Amazon Developer Console.

Secondly, APL supports only a set of components, at least for now. Of them, Image is one, which is the equivalent of HTML's img tag. Any visualisation item on the screen—graphs, charts, etc.—can only be and are therefore inherently Image. If you observe, such charts are not interactive, or if they are, then they would be wrapped in a TouchWrapper (onClick)—leading to another intent. So, they would have a routine batch converting charts into images.

As for building skills with APL, you have two options: one, you may use Alexa Developer Console's APL builder tool, which is also in beta. To access it, click on Display in the Custom pane. Once built, you can copy the UI's JSON into your source code; two, you can write the UI components directly in your source code pursuant to APL requirements. You may also build your own parser, if you're feeling adventurous.