Mixing renderers

With all our ideas fleshed out, we are ready to begin building our chart comparing social media conversions to monthly revenue. We can use the options from our line chart we created for the VP dashboard earlier. We create a new file and begin building our new chart as follows:

  1. We start by adding all the necessary plugin files as follows:
    <script src="../js/jqplot.categoryAxisRenderer.min.js"></script>
<script src="../js/jqplot.barRenderer.min.js"></script>
<script src="../js/jqplot.canvasTextRenderer.min.js"></script>
<script src="../js/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="../js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script src="../js/jqplot.trendline.min.js"></script>
<script src="../js/functions.js"></script>
<script src="../js/themes.js"></script>
  2. Next, we create a method to pass back the revenue and conversions from the remote data source. After that we pass in the URL for our remote source to our plot object.
    <script src="../js/jqplot.canvasAxisLabelRenderer.min.js"></script>
...
$(document).ready(function(){
  var conversionDataPull = function(remoteData,options) {
    return [remoteData.revenue, remoteData.conversions];
  }
  
  var conversionRevenue = $.jqplot ('conversionRevenue', 'data/conversion_revenue.json',
  {
  3. We now paste in the options from our line chart from the VP dashboard. We change the function passed to dataCallback under dataRendererOptions as follows:
        grid: {
      backgroundColor: 'rgba(64,0,64,0.25)',
      gridLineColor: '#fff',
      borderColor: '#000',
      shadow: false
    },
    dataRenderer: remoteDataCallback,
    dataRendererOptions: { dataCallback: conversionDataPull },
  4. We enable smooth lines for our line chart as well as setting seriesColors for the bar chart. We also set axesDefaults and include labelRenderer as follows:
        seriesDefaults: { rendererOptions: { smooth: true } },
    seriesColors: company_colors,
    axesDefaults: {
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: { 
        angle: -30 ,
        formatString: "$%'d"
      },
      padMax: 1.5,
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
      rendererOptions: { alignTicks: true }
    },
  5. We move the revenue series to y2axis and set color, width, and label for our trend line. We set the renderer to BarRenderer and set some padding and margin for our bars. Next, we set color, width, and label for our conversions series. We also enable the legend as follows:
        series:[
      { label: 'Revenue', yaxis:'y2axis',
        trendline: { 
          show: true, 
          color: '#DE6FA1', 
          lineWidth: 4, 
          label: 'Revenue Trend' 
        },
        renderer:$.jqplot.BarRenderer,
        rendererOptions: { barMargin: 5, barPadding: 5 } 
      },
      { label: 'Conversions', 
        lineWidth: 4, 
        color: '#9E059E' 
      }
    ],
    legend: { show: true, placement: 'outsideGrid'},
  6. Like our profit and revenue line chart on the VP dashboard, we turn off the borders on both our x axes. We also set showGridline to false and rotate the ticks on the x axis as follows:
        axes:{
      x2axis: { borderWidth: 0 },
      xaxis: {
        renderer:$.jqplot.CategoryAxisRenderer,
        borderWidth: 0,
        tickOptions: {
          formatString: "%b %Y",
          showGridline: false,
          angle: -45
        }
      },
  7. By setting more options under axesDefaults, we only need to change formatString for yaxis and then set label for both y axes. We set padMax to 1.5 in our defaults because we want to include our logo. We finish our code by calling the overlayLogo function to convert the image to a canvas element. The function accepts the ID of our chart, a width value, and a location value.
          yaxis: { 
        label: 'Conversions',
        tickOptions: { formatString: "%'d" }
      },
      y2axis: { label: 'Revenue' }
    }
  });
  overlayLogo('conversionRevenue', 100, 'top'),
});
</script>
  8. We finish the page by adding a headline and the div to contain the chart. To add the logo to the canvas, the logo will need to be accessible from the DOM. We add the image and then add the class hidden to hide it when the page loads as follows:
    <section class="twitter_conversions">
<h2>Revenue from Twitter Conversions</h2>
<div id="conversionRevenue"></div>
</section>
<img src="../images/logo.png" id="company_logo" class="hidden">

Before we can load our chart, we need to create the overlayLogo function. We want it to reside in functions.js.

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

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