Office 365 Outlook Add-in Development Using NAPA (Basics)

Before getting into the details of this article, make sure you have already followed my earlier steps from the following article:

Office 365 Outlook Add-in Development Using NAPA (Basics) - Part 1

Charting within Outlook Add-In

Since I am a big fan of dashboards and charts, I would like to have them integrated as Outlook add-ins. Just to show how we can add other components in default add-in, I will be using Chart.js charting component using the below steps:

Step1: Open our earlier Outlook Add-in solution BasicOutlookAddIn in Napa explorer,

Step 2: Now we are going to add a CDN path for our Chart.js in home.html file. Open home.html and copy paste the following code into <head> section of the page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" type="text/javascript"></script>

The code in <head> tag should look like as below:

code

Step 3: Now to render our chart within html, locate tag and remove its existing tags within it. Now use the following code lines and copy paste inside tag <div class="padding"> home.html.

<p><strong>Data Analysis</strong></p>
<canvas id="myChart" width="100" height="100"></canvas>

Now your code should be like as below,

chart.js

Step 4: Now to generate and bind the data to our chart, use the following function and call it inside office initialization function in our home.js.

// The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason)
{
$(document).ready(function ()
{
app.initialize();
displayChart();
});
};
// Displays chart with static data
function displayChart()
{
var data = [
{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Draft"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Completed"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "In-Profress"
}]
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Doughnut(data,
{
animateScale: true
});
}

I will be displaying a donut chart, so the above snippet for chart.js will render the donut chart for us.

Home.js should now look like this,

Step 5: Run the project so as to deploy these changes to Outlook add-in

Run

Step 6: Launch outlook web app and locate BasicOutlookAddIn for selected email. Click AddIn link to display donut chart right into your e-mail pane as below,

run app

This way we can integrate the charting components and also bring the context to our data. This way we can offer a unified experience to our users while they are working on emails.

In the next article, we will focus on calling REST APIs from our Outlook add-in.