Canvas versus CSS

jqPlot uses a combination of HTML styled by CSS and canvas elements added to the HTML. Canvas elements are created using JavaScript and jqPlot simplifies the creation of these canvas elements. When it creates a plot, it creates several different canvas elements. A separate canvas element is created for each series along with an element for the grid. If our lines or bars have shadows, there is an element for each shadow. Also, if we use the canvas renderers for our ticks or labels, those are created as canvas elements.

In the past, we modified the default jqPlot CSS styles for our legend, tooltips, and ticks. This is thanks to jqPlot creating divs or tables that we can alter using CSS styling. However, with canvas elements, the only thing we can change with CSS is the positioning of the entire canvas or change the display status. Our shadows, lines, bars, and rotated ticks are drawn on the canvas using JavaScript and, just like a painting, each piece is now part of the whole and cannot be removed or changed using CSS.

With this understanding, we find the grid element where we can set the background color, turn off grid lines, and other options:

  1. We turn back to the code. We want to rotate the ticks of our axes, so we include those plugin files as follows:
    <script src="../js/jqplot.canvasTextRenderer.min.js"></script>
<script src="../js/jqplot.canvasAxisTickRenderer.min.js"></script>
  2. Next, we set the grid option and start by setting backgroundColor to rgba(64,0,64,0.25). We set gridLineColor to #fff because the default gray color will be hard to see. We also set borderColor to #000 to add contrast. We set tickRenderer and tickOptions under axesDefaults as follows:
      
grid: {
    backgroundColor: 'rgba(64,0,64,0.25)',
    gridLineColor: '#fff',
    borderColor: '#000'
  },
...
  axesDefaults: {
     tickRenderer: $.jqplot.CanvasAxisTickRenderer,
     tickOptions: { angle: -30 }
  3. There are a few extra options under our xaxis that we want to change. We set showGridline to false so that only the yaxes grid lines will appear. We also set the angle for our ticks to be a little steeper as follows:
        axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions: {
         formatString: "%b %Y",
         showGridline: false,
         angle: -45
      }
      },
  4. We finish by creating classes to make the width and height of our div smaller so that it fits on our dashboard better:
    <div id="revenueProfitChart" class="w500 h250"></div>

    We load the chart and view the results; we are making progress, but we've also introduced some formatting problems. The title is being centered to the entire canvas element and not the rendered chart, so it is out of alignment as shown in the following screenshot:

    Canvas versus CSS

We've also been thinking about this line chart. The lines do not show actual values in between our markers. We can use the smooth option which will round out the lines. This way they will appear more as decoration than denoting intervening increases or decreases between our markers.

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

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