Flot example

by AaronLayton

HTML

<script src="http://www.designpreview.co.uk/js/jquery.flot.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>

CSS

body { padding:20px; }

JavaScript

var data = [
{
    color:'#ff0000',
          
    lines: { 
        fill:true, 
        fillColor: {
            colors: ["rgba(255, 255, 255, 0.4)", "rgba(255, 103, 31, 0)"]
        },
        show: true
    },
    points: { show: true },

    label: "Sales",
    data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]
}];
    

$.plot($("#placeholder"), data , {
               
               grid: { hoverable: true, clickable: true }
             });