Changing the background color of our chart

We start with the line chart showing profit and revenue because it is the simplest. We open our previous chart, 1168_01_06.html, and save it as a new file. We now have a remote data source with the revenue and profit numbers. We check the URL and find an object for both revenue and profit. Each object contains an array of arrays with the date as the x value and the dollar amount as the y value, as shown in the following code snippet:

{
  "Revenue": [
    ["2011-11-20", 800538], 
   ...
  ],
  "Profit": [
    ["2011-11-20", 192049.56], 
     ...
  ]
}
  1. We start by adding the functions.js script so that we can use remoteDataCallback to pull the revenue and profit numbers. We create our dataPull function and return the revenue and profit arrays wrapped in another array as follows:
    <script src="../js/jqplot.dateAxisRenderer.min.js"></script>
<script src="../js/functions.js"></script>
<script>
$(document).ready(function(){
  function dataPull(remoteData,options) {
    return [remoteData.Revenue, remoteData.Profit];
  }
  2. We set the data source to our JSON feed and set dataRenderer and dataRendererOptions with the same options we've used with our previous charts that use remote sources. We also set the labels for each series and set the Profit series to appear on y2axis as follows:
      var rev_profit = $.jqplot ('revenueProfitChart', 'data/12_month_rev_profit.json',
  {
    title:'Monthly Revenue & Profit',
    dataRenderer: remoteDataCallback,
    dataRendererOptions: { dataCallback: dataPull },
    series:[
       { label: 'Revenue' },
       { label: 'Profit', yaxis:'y2axis' }
    ],
  3. We create our legend and set the xaxis to use DateAxisRenderer and format our two y axes to format the strings as currency. We also use the alignTicks option on our second yaxis. This will cause the ticks and gridlines for yaxis and y2axis to line up and make a better looking chart as follows:
        legend: { show: true, placement: 'outsideGrid' },
    axes:{
       xaxis:{ renderer:$.jqplot.DateAxisRenderer },
       yaxis:{ tickOptions: { formatString: "$%'d" } },
       y2axis:{ 
        rendererOptions: { alignTicks: true },
        tickOptions: { formatString: "$%'d" } 
      }
    }
  });
});
</script>
  4. We want the background to be purple but with a low opacity. We create a class in styles.css called purple_bg and set the background color to rgba(64,0,64,0.25). We also create a class to set the width of our chart to 700 pixels as follows:
    <div id="revenueProfitChart" class="purple_bg w700"></div>

    We load the chart in our browser, where we can already see an issue with the background color. It must be a Monday morning.

    Changing the background color of our chart
..................Content has been hidden....................

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