This repository has been archived by the owner. It is now read-only.
A (simplified) polimerization of the Flot plotting libarary for jQuery
HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
.gitignore
LICENSE.txt
README.md
bower.json
flot-canvas-plugin.html
flot-categories-plugin.html
flot-chart.html
flot-colorhelpers-plugin.html
flot-crosshair-plugin.html
flot-errorbars-plugin.html
flot-fillbetween-plugin.html
flot-image-plugin.html
flot-import.html
flot-navigate-plugin.html
flot-pie-plugin.html
flot-resize-plugin.html
flot-selection-plugin.html
flot-stack-plugin.html
flot-symbol-plugin.html
flot-threshold-plugin.html
flot-time-plugin.html
jquery-import.html

README.md

Polymer Flot Element

This is a Polymer wrapper for the Flot plotting libarary.

Usage

<!-- Import element -->
<link rel="import" href="bower_components/polymer-flot/flot-chart.html">

<!-- Use element -->
<flot-chart id="some_chart" data="[ [[0, 3], [4, 8], [8, 5], [9, 13]] ]"></flot-chart>

<!-- Update chart data dynamically -->
<script>
  var some_series = [];
  for (var i = 0; i < 14; i += 0.5) {
    some_series.push([i, Math.sin(i)]);
  }

  $("#some_chart").prop('data', [some_series]);
</script>

Elements

The flot-chart element has data and options attributes that it forwards to Flot's $.plot() function. You can refer to Flot's documentation for the data format and plot options.

Plugins

You can use any of Flot's standard plugins by additionally importing any of the flot-*-plugin.html files.

Caveats

Polymer won't recognize changes (e.g. to data series) if you change the data inplace and the data array (object) stays the same.

var some_series = [/*point1, point2, ...*/];
var some_data = [some_series];
$("#some_chart").prop('data', some_data);

// ... later

// update the series, but no changes to the data array
some_series.push([/*new, point*/]);
$("#some_chart").prop('data', some_data);
// this won't update the chart since some_data is still the same

Doing a shallow copy of the data array will make it work again.

$("#some_chart").prop('data', some_data.slice());