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 { background:#008ec3;padding:20px; }

JavaScript

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

    label: "Sales",
    data: [[1990, 0], [1991, 0.7], [1992, 1.9], [1993, 2.0], [1994, 3.3], [1995, 3.8], [1996, 4.2], [1997, 5.5], [1998, 5.2], [1999, 6.5], [2000, 8.8], [2001, 11.5], [2002, 13.2], [2003, 19], [2004, 35]]
}];
    

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