Attractive JavaScript Plotting Charts With jQuery Plugin | flot

Install & download:

# NPM
$ npm install flot --save

1. Include jQuery and the Flot.js JavaScript libraries on the web page.

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.flot.js"></script>
<!--[if lte IE 8]>
<script src="/path/to/excanvas.min.js"></script>
<![endif]-->

2. Create a placeholder aspect for the chart.

<div id="placeholder"></div>

3. Prepare your information to be plotted within the chart.

var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9]];

4. Generate a primary line chart from the information array.

$.plot("#placeholder", data);

5. All default choices to customize the chart.

$.plot("#placeholder", data,{
  // the color theme used for graphs
  colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
  xaxis: {
    show: null, // null = auto-detect, true = always, false = never
    position: "bottom", // or "top"
    mode: null, // null or "time"
    font: null, // null (derived from CSS in placeholder) or object like { size: 11, lineHeight: 13, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" }
    color: null, // base color, labels, ticks
    tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"
    transform: null, // null or f: number -> number to transform axis
    inverseTransform: null, // if transform is set, this should be the inverse function
    min: null, // min. value to show, null means set automatically
    max: null, // max. value to show, null means set automatically
    autoScaleMargin: null, // margin in % to add if autoScale option is on "loose" mode,
    autoScale: "exact", // Available modes: "none", "loose", "exact", "sliding-window"
    windowSize: null, // null or number. This is the size of sliding-window.
    growOnly: null, // grow only, useful for smoother auto-scale, the scales will grow to accomodate data but won't shrink back.
    ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks
    tickFormatter: null, // fn: number -> string
    showTickLabels: "major", // "none", "endpoints", "major", "all"
    labelWidth: null, // size of tick labels in pixels
    labelHeight: null,
    reserveSpace: null, // whether to reserve space even if axis isn't shown
    tickLength: null, // size in pixels of major tick marks
    showMinorTicks: null, // true = show minor tick marks, false = hide minor tick marks
    showTicks: null, // true = show tick marks, false = hide all tick marks
    Lines: null, // true = show grid lines, false = hide grid lines
    alignTicksWithAxis: null, // axis number or null for no sync
    tickDecimals: null, // no. of decimals, null means auto
    tickSize: null, // number or [number, "unit"]
    minTickSize: null, // number or [number, "unit"]
    offset: { below: 0, above: 0 }, // the plot drawing offset. this is calculated by the flot.navigate for each axis
    boxPosition: { centerX: 0, centerY: 0 } //position of the axis on the corresponding axis box
  },
  yaxis: {
    autoScaleMargin: 0.02, // margin in % to add if autoScale option is on "loose" mode
    autoScale: "loose", // Available modes: "none", "loose", "exact"
    growOnly: null, // grow only, useful for smoother auto-scale, the scales will grow to accomodate data but won't shrink back.
    position: "left", // or "right"
    showTickLabels: "major", // "none", "endpoints", "major", "all"
    offset: { below: 0, above: 0 }, // the plot drawing offset. this is calculated by the flot.navigate for each axis
    boxPosition: { centerX: 0, centerY: 0 } //position of the axis on the corresponding axis box
  },

  // if you need more than one x axis or y axis
  xaxes: [],
  yaxes: [],

  // customize the data series
  series: {
    points: {
        show: false,
        radius: 3,
        lineWidth: 2, // in pixels
        fill: true,
        fillColor: "#ffffff",
        symbol: 'circle' // or callback
    },
    lines: {
        // we don't put in show: false so we can see
        // whether lines were actively disabled
        lineWidth: 1, // in pixels
        fill: false,
        fillColor: null,
        steps: false
        // Omit 'zero', so we can later default its value to
        // match that of the 'fill' option.
    },
    bars: {
        show: false,
        lineWidth: 2, // in pixels
        // barWidth: number or [number, absolute]
        // when 'absolute' is false, 'number' is relative to the minimum distance between points for the series
        // when 'absolute' is true, 'number' is considered to be in units of the x-axis
        horizontal: false,
        barWidth: 0.8,
        fill: true,
        fillColor: null,
        align: "left", // "left", "right", or "center"
        zero: true
    },
    shadowSize: 3,
    highlightColor: null
  },
  grid: {
    show: true,
    aboveData: false,
    color: "#545454", // primary color used for outline and labels
    backgroundColor: null, // null for transparent, else color
    borderColor: null, // set if different from the grid color
    tickColor: null, // color for the ticks, e.g. "rgba(0,0,0,0.15)"
    margin: 0, // distance from the canvas edge to the grid
    labelMargin: 5, // in pixels
    axisMargin: 8, // in pixels
    borderWidth: 1, // in pixels
    minBorderMargin: null, // in pixels, null means taken from points radius
    markings: null, // array of ranges or fn: axes -> array of ranges
    markingsColor: "#f4f4f4",
    markingsLineWidth: 2,
    // interactive stuff
    clickable: false,
    hoverable: false,
    autoHighlight: true, // highlight in case mouse is near
    mouseActiveRadius: 15 // how far the mouse can be away to activate an item
  },
  interaction: {
    redrawOverlayInterval: 1000 / 60 // time between updates, -1 means in same flow
  },
  hooks: {}
});

Attractive Plotting Plugin, Flot JS Github, flot examples, flot autoscale margin, flot bar chart multiple series, flot line chart multiple series, flot chart bootstrap, jquery flot github, flot area chart, flot tickformatter

See Demo And Download