Using tabs to build a dashboard and print reports

Welcome to part 3 of BI with SharePoint and JavaScript. This is an ongoing series about building  dashboard reports in SharePoint with just a few  simple JavaScript frameworks and a Content Editor Web Part.

Here are the articles in the series.

1. Simple online column chart  (Demo)
2. Combination charts: Stacked bar chart with line. (Demo)
3. Using tabs to build a dashboard and printing reports. (Demo)
4. Visualization: Packing a lot of data into a simple chart to yield  maximum benefits.
5. Slice and Dice data while using a  page from social media  to build intelligence into your reports. 
6. Analytics  -  What If Analysis.
7. Tips for extracting, transforming and loading data for online reports.
 

  The code for all reports can be found here

In this post we will cover the following topics:

1. Creating a tabbed  report to maximize real estate in the browser.

2. Expanding the tabbed report so it can be printed with page breaks.

3. Introduce a new JavaScript library called Underscore.js.

4. Add mouse over to view the values in the simple graph. 

Here's the link to the demo. Here's the link to the code.  I have hard coded the data into the HTML instead of retrieving the data from SharePoint to make this post easy to understand. If you want to look at an example of retrieving data from a SharePoint list look at the  previous two posts.

 The code is quite self-explanatory, so I will go over just the main portions.

 The entire contents of the reports are enclosed in a div  called "tabs" . Look at the init() - line 287 function to understand how the tabs work using jQuery. 

The PrintReport method (line 268) toggles between  showing all the page contents and showing the tabs. 

Notice that we make use of the  Underscore.js library's each method here to cycle through each element in the array and either hide or show the tabs.  In a later post we will look at another great use with the Underscore library , which is the groupby method. 

 Finally, notice the code in line 75 and 81.  The page break in 81 makes the report print in two pages.