Home

Introduction

This is a fork of Value Labels, a Flot plugin originally developed by Petr Blahos.

The main purpose here is to be able to show the y-axis value inside the canvas, providing a better understanding of the graph. Petr’s version did this by appending DIVs to the canvas, which works perfectly. But when printing the page, these DIVs lose their absolute position, and that’s when we hear clients screaming!

Since the chart prints nicely and Flot uses HTMLCanvasElement, I thought that giving the canvas’ fillText function a try I could print these charts the way I needed. It worked.

Also, I had a requirement in which I needed to show only the last value of the series inside the chart. Check it out in the Usage section below.

Gallery

Value Labels with HTML Output (showAsHtml: true):

When you try to print using normal HTML Output, the labels aren’t aligned:

And finally, Value Labels with HTMLCanvasElement.fillText (default):

Notice you can switch back to HTML any time you want.

Usage

Value Labels is quite simple to be used. Just place the plugin in your JavaScript public directory and load it after Flot.

Options

• show: true to show the labels and false to disable
• showAsHtml: true to show labels using DIVs and false to use HTMLCanvasElement.fillText (default). You must load plot.css if using this.
• showLastValue: true only shows the last value in the series (for the y-axis); false shows all the values

Examples

var data_a = { label: "Series A", data: [ [1, 10], [2, 20], [3, 30] ] };
var data_b = { label: "Series B", data: [ [1, 30], [2, 20], [3, 10] ] };
var options = [
  valueLabels: {
   show: true
  }
];
var plot = $.plot($('#placeholder'), [data_a, data_b], options);