Connecting the cursor with the legend

As we experiment, we come across the option to pass the data points from the cursor tooltip to the legend. We revisit the chart we just worked on, and save it as a new file, 1168_06_05.html:

  1. We include the canvas plugins so that we can rotate our ticks and labels. We need to do this since our legend will be taking up more space than normal:
    <script src="../js/jqplot.cursor.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>
  2. We set showTooltip to false so that we don't show data points in multiple places. We set showVerticalLine to true. By connecting the cursor to the legend, values will only appear when the cursor crosses data points. When our vertical line crosses a data point, the values will appear in the legend. So, showVerticalLine must be set in order for this to work:
        cursor: {
      show: true,
      showTooltip: false,
      showVerticalLine: true,
  3. We set the new option, showCursorLegend, to true. By default, the format string for the cursor legend is %s x:%s, y:%s. We just want the label and the dollar amount. Since the label, the x value, and the y value are passed in this order, we wrap the date in a span to hide it when it is displayed:
          showCursorLegend: true,
      cursorLegendFormatString: '%s <span class="hidden">%s</span><span class="right">%s</span>'
    },
...
  4. Next, we set labelRenderer under axesDefaults, so it will affect all the axes:
    axesDefaults: { 
  labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
},
axes:{
...
  5. Finally, we create several CSS styles for the legend. We give fixed widths to the table cells so that they don't expand and contract as we move the cursor:
    <div id="revenueProfitChart" style="width:750px;"></div>
<style>
table.jqplot-legend { 
  right: -65px; 
  min-width: 165px;
}
table.jqplot-legend td { border: 0;}
td.jqplot-cursor-legend-swatch { width: 24px;}
td.jqplot-cursor-legend-label { padding-left: 10px;}
td.jqplot-cursor-legend-label .right { 
  float:right; 
  padding-right: 10px;
}
</style>

We move our cursor over April, and though the cursor is not actually on the data points, the vertical line intersects the points. We can see that our legend shows the dollar amount for each data point in April in the following screenshot:

Connecting the cursor with the legend

We have created several charts using the cursor plugin in different ways. We'll let Roshan and the rest of the management team try them out and see which works best for them.

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

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