Creating reusable plot objects

We begin to prepare everything for our next chart, but we stop ourselves. Our last two charts for the VPs are bar charts and have very similar options. Several of the charts for the divisional managers could use the same code but with a different data source.

You mention we should DRY up our code. I give you a look. You continue by telling me it means, "Don't Repeat Yourself." I continue to look at you with slight bewilderment. "What?" you say, "I've been reading The Pragmatic Programmer."

This is sound advice. There may be a bit more up-front work to create these objects, but the savings in time and energy for each subsequent chart will be worth it.

We look back at our existing bar charts and distill the most common options. We open themes.js so we can get started creating an object to contain our default settings:

  1. We start by creating the defaultBarObj variable as a function expression. This means we'll store an unnamed function in a variable. We will pass in seriesObj, the renderer object for our x axis and dataPull. We can't pass in a named function called dataPull because we can't store a regular function into our object. So, we'll change our function to an expression and store it in a variable named dataPull. The creation of defaultBarObj is as follows:
    var defaultBarObj = function(seriesObj, renderer, dataPull) {
  2. Inside our function, we create barObj to hold all our options. We can reuse the options that would normally be set within our jqPlot object. We set dataCallback to our new variable dataPull. Our code to pull remote data will work as before. We also set our seriesDefaults as follows:
      
var barObj = {
    dataRenderer: remoteDataCallback,
    dataRendererOptions: { dataCallback: dataPull },
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
        barMargin: 5,
        barPadding: 5
      }
    },
  3. On the initial build, seriesObj will be empty but will be populated when dataPull is called. We set axesDefaults to use CanvasAxisTickRenderer. We want our ticks to be black instead of gray, so we set textColor to black. Again, we can't use CSS to style ticks that are rendered as canvas elements:
        series: seriesObj,
    axesDefaults: {
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: { 
        angle: -30,
        textColor: '#000'
      }
    },
  4. Since we can use either dates or categories on our x axis, we will pass in the jqPlot renderer object. Most of our charts deal with currency so we set formatString to format those values properly. We can always override any of these values later:
        axes:{
      xaxis:{ renderer: renderer },
      yaxis: {
        min: 0,
        tickOptions: { formatString: "$%'d" }
      }
    },
  5. We include a legend and then return the entire object.
        legend: { show: true, placement: 'outside', location: 'e' }
  };

  return barObj;
};
  6. Our function defaultBarObj handles most of the structure for our chart. We also create a function called color_theme. We'll pass in the object created by defaultBarObj and also an array of colors. This can be the company_colors array or the color arrays for our divisions that we'll create in a bit. We set seriesColors to the colors array we pass in as follows:
    var color_theme = function(obj,colors) {
  obj.seriesColors = colors;
  7. Next, we set the grid options. Instead of storing a separate background color, we will just use the first color in our colors array. We also want to change the opacity of the background, so we use the hex2rgb method in jqPlot. It will return the converted color and opacity in rgba notation. After this, we turn off the grid lines and the shadow and set the border color to black:
      obj.grid = {
    backgroundColor: $.jqplot.hex2rgb(colors[0], 0.1),
    drawGridlines: false,
    shadow: false,
    borderColor: '#000'
  };

  return obj;
};
  8. Now that we have our theming function, we need an object with colors for each division. Since most of our remote JSON data matches this format, we can pull an array of colors based on which division is returned in our JSON as follows:
    division_colors = {
  "Nerd Corral": [ "#00007F", "#0BA2D6", "#40407F" ],
  "Media/Software": [ "#6B7F6F", "#007F19", "#69FF86", "#A1BFA7", "#0DFF66"],
  "Electronics": [ "#7F0000", "#FF0000", "#FF7F7F", "#7F6666", "#4C2626"]
};

With this complete, all our default options are set in objects that we can include when creating our charts. This will greatly shorten the amount of code needed to create our charts.

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

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