Visualization: Packing a lot of data into a simple chart to yield maximum benefits

Welcome to part 4 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 (Demo)
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  try and pack as much data into a single chart as possible (and I'll try not to make it too cluttered).

Let's revisit the Donut sales chart from and add a few more features.

Here's the link to the code.  Running this should  display the following chart: 

Here are the new features added to the chart.

1. A  set of targets have been added - Low range and high range.   Let's imagine that these targets were set at the beginning of the year and it was decided that  if sales fall at or below the red range (8000 units), then it is to be interpreted as cause for panic. If sales fall above the green range (1000 units), then  sales have exceeded target and  measures have to be taken to  meet demand.    

2.You will also notice that a trend line has been added. This helps us in predicting a year end sales figure and plan accordingly. This trend is  calculated based on a simple linear regression.  

The code in lines 92-112  are fairly straightforward in explaining how this chart is rendered.  

Here's the link to the demo.

One thing to look out for in this chart is  the order in which the data is  added  and the parameter called "fill" in lines 100 and 101 as well as the colors chosen to represent the various data points.    The fill parameter specifies the opacity.  Yo will notice that the areas (low range and high range) are overlaid on top of each other, and the lines (sales and trend) are overlaid on top of these, so changing the order of these might make one of these data points disappear.