Setting negative colors on a bar chart

Just as there is a default array of colors for data series in jqPlot, there is a separate array of colors used for negative values. We want the color of the negative bars in our waterfall chart to match our color scheme. We also want to modify the layout of the chart. We open our previous waterfall chart, 1168_08_03.html, as a new file and begin making the following modifications:

  1. We add in themes.js and create a version of the dataPull function to pass each JSON object to our data array. We also connect the data to our remote JSON feed as follows:
    <script src="../js/themes.js"></script>
<script>
$(document).ready(function(){
  function dataPull(rd,options) {
    return [[rd.revenue, 
      rd.operating_expenses, 
      rd.fixed_costs, 
      rd.returns]];
  }

  var waterFall = $.jqplot ('waterFall', 'data/revenue_expenses.json',
  {
  2. We set backgroundColor for our grid and set the options to pull our remote data. We also set seriesColors to use company_colors, which is located in themes.js as follows:
        
grid: { backgroundColor: 'rgba(64,0,64,0.25)' },
    dataRenderer: remoteDataCallback,
    dataRendererOptions: { dataCallback: dataPull },
    seriesColors: company_colors,
  3. In themes.js, we create a new variable to hold our array of negative colors. We make a copy of company_colors and then reverse the array. It looks like the following line of code:
    n_company_colors = company_colors.slice(0).reverse();
  4. We return to our HTML file and assign our new array n_company_colors to negativeSeriesColors as follows:
        
negativeSeriesColors: n_company_colors,
  5. Since our point labels are formatted as currency, we can remove the ticks and axis label by setting showTicks and showLabel to false. We also set showGridline to false as shown in the following code snippet:
        axes:{
      y2axis:{
        showTicks: false,
        showLabel: false,
        min: 0,
        tickOptions: { formatString: "$%'d", showGridline: false }
      },
  6. We finish by adding an h2 tag for our title and by adding classes to our chart div to decrease its width and height as follows:
    <h2>Expenses Against Revenue - Last 12 Months</h2>
<div id="purpleWaterFall" class="w400 h300"></div>
  7. We then move over to styles.css. We add the following rule to make the background of our point labels more opaque and increase readability:
    #purpleWaterFall .jqplot-point-label { 
  background: rgba(255,255,255,.8); 
  border: 1px solid #999; 
  padding:0px 3px;
}

    We pull up the chart in our browser and see that it is still easy to understand even after removing the ticks from the y axis. The various shades of purple also work well as shown in the following screenshot:

    Setting negative colors on a bar chart

We have removed unnecessary parts and changed the style so that it no longer looks like the bar charts we originally created. With the ticks and point labels of the x axis alone, we are able to tell a clear story.

We look up from our code and realize that it's lunch time. We are at a good spot to stop so we head to the sandwich shop down the street. We enjoy a long lunch and get back to the office ready to finish up our new charts.

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

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