Displaying error bars (Should know)

Now that we've learned how to create various types of charts, we can start applying Flot to our real-world data. Statistical data is often accompanied by error margins and visualized on charts using error bars. Flot's errorbars plugin is built specifically for that scenario.

Getting ready

We start with the same boilerplate code that we used to create basic charts and we include the errorbars plugin.

How to do it...

The error bars are displayed with a combination of extra data values, the errorbars and yerr settings, and other settings which help produce a properly formatted chart:

...  
  <script src="jquery.flot.errorbars.js"></script>
  <script>
    var data = [
      [1, 2, 0.5],
      [2, 5, 0.2],
      [3, 1, 0.4]
    ];

    var plot = $.plot(
      $('.chart'), 
      [ data ],
      {
        series: {
          lines: { show: true },
          points: {
            show: true,
            errorbars: 'y',
            yerr: {
              show: true,
              color: 'red',
              upperCap: '-',
              lowerCap: '-'
            }
          }
        },
        xaxis: { min: 0, max: 4 },
      }
    );
  </script>
...

Error bars are drawn in red with short horizontal lines as end caps, as specified:

How it works...

The errorbars plugin expects us to provide extra data values that specify the margin of error for each data point. The margin of error is in the same unit as the y value of the data point. In the preceding example, we've specified the values 0.5, 0.2, and 0.4 respectively.

We enable the errorbars plugin by setting the errorbars setting to y. This tells the plugin to use the extra data value as an error bar on the Y axis. The yerr settings object allows us to specify how the error bars should be displayed. We set the color, upperCap, and lowerCap settings so that the error bars are more easily visible.

We also enable the show settings on the lines and points setting objects so that both lines and points are drawn on the graph. Finally, we explicitly set the min and max settings on the xaxis settings object so that our data points are easier to see on the chart.

There's more...

The errorbars plugin has the ability to display error bars on the X axis as well. It also gives you the ability to display asymmetric errors and custom end-cap styles.

Using custom end caps on an asymmetric, horizontal error bar

Here, we use a combination of the asymmetric setting and custom functions for the upperCap and lowerCap settings to display a square end cap. The squareCap function receives a canvas context object (the DOM CanvasRenderingContext2D type) which we use to draw a square at the given X and Y coordinates:

...
    data = [
      [1, 2, 0.1, 0.4],
      [2, 5, 0.5, 0.2],
      [3, 1, 0.1, 0.2]
    ];

    var squareCap = function (ctx, x, y, radius) {
      ctx.beginPath();
      var r2 = radius / 2;
      ctx.rect(x - r2, y - r2, radius, radius);
      ctx.stroke();
    };

    var plot = $.plot(
      $('.chart'), 
      [ data ],
      {
        series: {
          lines: { show: true },
          points: {
            show: true,
            errorbars: 'x',
            xerr: {
              show: true,
              asymmetric: true,
              color: 'red',
              upperCap: squareCap,
              lowerCap: squareCap,
              radius: 10
            }
          }
        },
        xaxis: { min: 0, max: 4 },
      }
    );
...

Asymettric error bars expect two error values in the data points. The error bars are drawn independently to the left and right of the data points. Our square caps are rendered as empty red boxes on the ends of the bars: