Creating a waterfall chart showing expenses against revenue

While we were completing our research, Roshan and Sara sent us the numbers. With everything we need, we get started executing the following steps:

  1. To make a waterfall chart, we need to include the barRenderer plugin file. Tooltips do not work with negative values on waterfall charts, so we include the pointLabels plugin file, and we also add the categoryAxisRenderer plugin file:
    <script src="../js/jqplot.barRenderer.min.js"></script>
<script src="../js/jqplot.pointLabels.min.js"></script>
<script src="../js/jqplot.categoryAxisRenderer.min.js"></script>
<script src="../js/jqplot.canvasTextRenderer.min.js"></script>
<script src="../js/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="../js/functions.js"></script>
<script>
  2. We include Roshan's numbers for revenue and expenses and Sara's returns number. Roshan sent over a profit number, but jqPlot will calculate that number automatically, so we won't include it in our data arrays. Since the other three numbers are expenses, we'll need to set them to negative numbers so that our waterfall is calculated properly:
    $(document).ready(function(){
  var revenue = 9631203;
  var operating_expenses = -3497514;
  var fixed_costs = -3036541;
  var returns = -802798;
  3. Next, we create our plot and pass in the data arrays. We set the renderer to BarRenderer, and then we set the waterfall option under rendererOptions to true to make our chart a waterfall. We set useNegativeColors to true; this will color all positive values with one color and all negative values with another. Finally, we set highlightMouseOver to false. Negative value bars do not have the highlight ability, so we'll turn them off for the positive values so as not to confuse the user:
      var waterFall = $.jqplot ('waterFall', [[revenue, operating_expenses, fixed_costs, returns]],
  {
    title:'Expenses Against Revenue over Last 12 Months',
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions:{
        waterfall:true,
        useNegativeColors: true,
        highlightMouseOver: false
      },

    Note

    If we were not concerned with using colors to show negative and positive numbers, we could use varyBarColor. By setting this to true, each bar will be colored differently, and this will show that each value is independent.

  4. Since we do not have the highlight option, we will make use of pointLabels. We set location to n, so the labels will appear above the y value for each bar. Also, we don't want the labels covering some of our smaller bars, so we set ypadding to 10. This will move the labels further toward the top of the chart. Also, we set yaxis to y2axis, so the ticks and labels will appear on the right side of the chart:
          pointLabels:{ show:true, location:'n', ypadding:10 },
      yaxis:'y2axis'
    },
  5. For our y axis, we add our label and format the ticks to display the currency in dollars:
        axes:{
      y2axis:{
        label: 'Dollars',
        tickOptions: { formatString: "$%'d" }
      },
  6. For our x axis, we set renderer to CategoryAxisRenderer. We also set ticks to an array of our values. We have five ticks, but we only pass in four data arrays. This is because jqPlot will calculate the Profit bar for us automatically. We also turn off the gridlines and tick marks by setting showGridline and showMark under tickOptions to false:
          xaxis:{
        renderer:$.jqplot.CategoryAxisRenderer,
        ticks: ['Revenue', 'Operating Expenses', 'Fixed Costs', 'Inventory Losses', 'Profit'],
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
          angle: -30,
          fontSize: '9pt',
          showGridline: false,
          showMark: false
        }
      },
    },
  });
});
</script>
  7. We finish our chart by including the div container for our plot and adding some CSS to add a background and a border to our point labels:
    <div id="waterFall" style="width:500px;height:400px;"></div>
<style>
.jqplot-point-label { background: rgba(208,208,208,.6); border: 1px solid #999; padding:0px 3px;}
</style>

Once we are done, we load the chart in our browser and can see the results:

Creating a waterfall chart showing expenses against revenue

The chart shows our starting value representing Revenue, and it then subtracts each expense, bringing us to our Profit value. We're pretty sure Roshan and Sara will like this. We e-mail Calvin to see if he can plan a meeting for some time this afternoon. With that done, we head to lunch.

When we get back from lunch, we find an e-mail from Calvin. We have a meeting scheduled in 30 minutes. We prepare everything for our presentation and head down to the conference room. We show Sara and Roshan the waterfall chart, and they love it. "I didn't realize our inventory losses were that high," says Roshan. "That is the exact reaction I'm going for," says Sara. "I want to get our inventory issues out there so we can figure out ways to fix them," she continues.

Roshan speaks up again, "After my meeting tomorrow, I think we'll be in a better place to know what the team wants on the dashboard. Then, we can start compiling all these different experiments into a coherent format ready to go into production."

We leave the meeting and head back to our office. We start to compile a list of possible API feeds we'll need in order to make our charts real time. We can check this list against the finalized charts from Roshan's meeting and contact IT with our requests later.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.136.18.141