Using the second xaxis and smoothing lines

We save the previous chart as a new file and begin making our modifications as follows:

  1. We want an array containing various shades of the purple used by the company. We can use these colors for our lines, bars, pie wedges, and even our backgrounds. We also want this in a central place along with the functions to help us theme our charts. With that in mind, we create a file called themes.js and add an array called company_colors to hold our shades of purple as follows:
    var company_colors = [ "#400040", "#8C008C", "#D8BFD8", "#DE6FA1", "#9400D3" ];
  2. Next, we return to our file containing our HTML, 1168_10_03.html. We include the themes.js file in our HTML. After setting dataRendererOptions, we set seriesDefaults. Inside this object, we set rendererOptions and then set smooth to true. We also set seriesColors to the company_colors array in themes.js as follows:
    <script src="../js/themes.js"></script>
...
  dataRendererOptions: { dataCallback: dataPull },
  seriesDefaults: { rendererOptions: { smooth: true } },
  seriesColors: company_colors,
  3. We removed the grid lines for the xaxis in our previous version. Now, we want to turn off the border at the top and bottom of our chart. We will need to set borderWidth to 0 for both x2axis and xaxis. The yaxis appears on the left of our chart and y2axis appears on the right. Since xaxis is at the bottom of our chart, x2axis corresponds to the top of our chart. So by setting these options, the border at the top and bottom of our chart will disappear. This can be implemented as follows:
        axes:{
      x2axis: { borderWidth: 0 },
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
        borderWidth: 0,
  4. Finally, we create a rule in styles.css using the .jqplot-title selector. Our title is being centered to the entire chart div and it doesn't look right. We move it to the left to make it look like it is centered over the drawn chart:
    #purpleRevenueProfit .jqplot-title {
  left: -55px !important;
}

    We refresh the chart in our browser. Now, the lines match the company color scheme and they are curved:

    Using the second xaxis and smoothing lines

We have gotten the revenue and profit chart to a good point. We decide to move on to the waterfall chart.

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

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