Press "Enter" to skip to content

Attractive JavaScript Plotting Charts With jQuery Plugin | flot

Flot is a JavaScript graphic library for engineering and science applications derived from Flot. You may also want to add jQuery Flot Animator to animate your flot charts.

Flot.js is a JavaScript layout library that works with jQuery to create dynamic, engaging, and interactive charts using the HTML5 canvas element.

Create SVG Donut Charts With JavaScript/jQuery | donutty

How to make use of it:

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 bar chart multiple series, flot line chart multiple series, flot chart bootstrap, jquery flot github, flot area chart

plotting-charts-flot-1

plotting-charts-flot-2

plotting-charts-flot-3

plotting-charts-flot-4

plotting-charts-flot-5


See Demo And Download

Official Website(flot): Click Here

This superior jQuery/javascript plugin is developed by flot. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *