Blog / 2011 / May / 15

JavaScript Charts with Flot

May 15, 2011

Here's a simple line chart built with flot. The data is hardcoded into the page and is generated using a Django template.

HTML

We need to import jquuery and flot, and also excanvas for ie support.

<!--[if lte IE 8]><script type="text/javascript" src="/site_media/flot/excanvas.min.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="/site_media/flot/jquery.flot.min.js" type="text/javascript"></script>

We then need to have a div to place the chart in:

<div id="flot_chart"></div>

CSS

We need to style this div with a width and height:

#flot_chart {
  width: 100%;
  height: 300px;
}

JavaScript

We are going to build a line chart. We want to have a date range on the x (bottom) axis, and a number between 1 and 25 for the y axis. We have different colours for the points if the number is one (gold), two (silver) or three (bronze), and a default colour if any other.

First, we need to create a variable to hold the data. We're going to have five separate data sets. One covers the lines, and has all points listed; the other four are the points, one for each colour, with just a subset of the points required.

var lFlotData = [ 
  {
    label: "lines",
    lines:  { show: true },
    color: '#99ccff',
    data: [
        [new Date("2007/05/19"), 19],
        [new Date("2006/05/13"), 4],
        [new Date("2006/03/19"), 9],
        [new Date("2005/05/07"), 1],
        [new Date("2005/03/20"), 3],
        [new Date("2004/10/16"), 15],
        [new Date("2004/03/21"), 2],
        [new Date("2003/10/18"), 19],
        [new Date("2003/03/16"), 2],
        [new Date("2002/03/17"), 5],
        [new Date("2001/09/22"), 2],
        [new Date("2001/03/18"), 1],
    ] 
  },
  {
    label: 'points',
    points: { show: true, fillColor: "#3d7dbd" },
    color: '#3d7dbd',
    data: [
        [new Date("2007/05/19"), 19],
        [new Date("2006/05/13"), 4],
        [new Date("2006/03/19"), 9],
        [new Date("2004/10/16"), 15],
        [new Date("2003/10/18"), 19],
        [new Date("2002/03/17"), 5],
    ] 
  },
  {
    label: "gold-points",
    points: { show: true, fillColor: "#ffc600" },
    color: '#ffc600',
    data: [
        [new Date("2005/05/07"), 1],
        [new Date("2001/03/18"), 1],
    ] 
  },
  {
    label: "silver-points",
    points: { show: true, fillColor: "#919191" },
    color: '#919191',
    data: [
        [new Date("2004/03/21"), 2],
        [new Date("2003/03/16"), 2],
        [new Date("2001/09/22"), 2],
    ] 
  },
  {
    label: "bronze-points", 
    points: { show: true, fillColor: "#7a6e55" },
    color: '#7a6e55',
    data: [
        [new Date("2005/03/20"), 3],
    ] 
  }
  ];

The use of fillColor on the above code means that the default circles have a solid centre, rather than the default white.

Next, we need to create a variable with the flot options in:

var lFlotOptions = { 
    grid: {
        borderWidth: 0
    },
    legend: {
        show: false
    },
    yaxis: {
        transform: function (v) { return -v; },
        inverseTransform: function (v) { return -v; },
        ticks: [1, 5, 10, 15, 20, 25],
        color: "#000000"
    },
    xaxis: { 
        mode: "time",
        color: "#000000"
    }
};
  • grid/borderWidth 0 turns off the black border around the entire chart
  • legend/show false disables the legend - as we're using multiple series on one chart, this would be confusing
  • yaxis/transform inverts the y axis, so 1 is at the top and 25 is at the bottom.
  • yaxis/ticks specifies what numbers should be shown on the Y axis
  • axis/mode specified that the x axis contains time elements

Finally we need to create the chart:

$.plot($("#flot_chart"), lFlotData, lFlotOptions);

References

Tags: flot javascript chart canvas