Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
flot-sparklines element for Polymer (with Demo)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<title>Flot Sparklines for Polymer</title>
<link rel="stylesheet" href="bower_components/semantic-ui/dist/semantic.min.css">
<style>
#chart {
height: 50px;
width: 250px;
}
</style>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="jquery-import.html">
<link rel="import" href="flot-sparklines.html">
</head>
<body>
<flot-sparklines
id="chart"
item-name="thing(s)"
data="[ [[1,0],[2,15],[2,50],[3,150],[4,175],[5,95]] ]"
options='{"series":{"color":"#f44336","threshold":[{"below":500,"color":"#ffb300"},{"below":300,"color":"#43a047"}]}}'
>
</flot-sparklines>
<script src="bower_components/semantic-ui/dist/semantic.min.js"></script>
<script>
"use strict";
$(function() {
$("#chart")
.prop("data", [ [[0,198],[1,207],[2,357],[3,548],[4,125],[5,206]] ])
.prop("options", {"series":{"color":"#f44336","threshold":[{"below":500,"color":"#ffb300"},{"below":300,"color":"#43a047"}]}});
});
</script>
</body>
</html>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/polymer-flot/flot-chart.html">
<link rel="import" href="bower_components/polymer-flot/flot-threshold-plugin.html">
<link rel="import" href="bower_components/polymer-flot/flot-time-plugin.html">
<link rel="import" href="jquery-dateformat-plugin.html">
<dom-module id="flot-sparklines">
<style>
:host {
display: inline-block;
}
#chart {
width: 100%;
height: 100%;
}
</style>
<template>
<flot-chart id="chart"></flot-chart>
</template>
</dom-module>
<script>
"use strict";
Polymer({
is: "flot-sparklines",
properties: {
data: {
type: Object,
value: function() { return []; },
observer: '_dataChanged',
},
itemName: {
type: String,
value: "item(s)",
observer: '_itemNameChanged',
},
defaultOptions: {
type: Object,
readOnly: true,
value: function() {
return {
grid: {
borderWidth: 0,
margin: 0,
hoverable: true,
},
legend: {show: false},
lines: {
show: true,
},
shadowSize: 0,
xaxis: {
show: false,
mode: 'time',
timezone: 'browser',
},
yaxis: {
show: false,
},
};
},
},
options: {
type: Object,
value: function() { return {}; },
observer: '_optionsChanged',
},
},
_dataChanged: function(newValue, oldValue) {
this.$.chart.data = newValue;
},
_itemNameChanged: function(newValue, oldValue) {
$(this.$.chart)
.off('plothover', this._onPlotHover)
.on('plothover', this._onPlotHover.bind(this));
},
_optionsChanged: function (newValue, oldValue) {
let options = $.extend(true, this.defaultOptions, newValue);
this.$.chart.options = options;
},
_isSamePlotItem: function(d1, d2) {
return d1 != null
&& d2 != null
&& d1.seriesIndex === d2.seriesIndex
&& d1.dataIndex === d2.dataIndex;
},
_onPlotHover: function (event, pos, item) {
let chart_elem = $(this.$.chart);
if (item) {
let date = new Date(item.datapoint[0]);
let count = item.datapoint[1];
let tooltip_html = "" + count + " " + this.itemName + " " + $.format.prettyDate(date);
if (item.series.label) {
tooltip_html = item.series.label + "<br/>" + tooltip_html;
}
if (!this._isSamePlotItem(this._last_plothover_item, item)) {
chart_elem.popup({
html: tooltip_html,
position: 'bottom center',
variation: 'inverted',
on: 'manual',
});
chart_elem.popup('show');
this._last_plothover_item = item;
}
} else {
chart_elem.popup('hide');
this._last_plothover_item = null;
}
},
});
</script>
<link rel="import" href="jquery-import.html">
<script src="bower_components/jquery-dateFormat/dist/jquery-dateFormat.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
Owner

riyad commented Oct 8, 2015

This is building on Polymer-Flot and was built to be able to handle time series data. Have a look at the demo.html on how to put it to use.

FYI: It also uses jQuery's dateFormat plugin and Semantic UI for fun and profit.

Screen shot:
flot-sparklines example

Owner

riyad commented Oct 8, 2015

If you use Bower you can add the following dependencies:

{
  "dependencies": {
    "jquery": "jquery#>= 2.1.4",
    "jquery-dateFormat": "jquery-dateFormat#>= 1.0.1",
    "polymer": "Polymer/polymer#^1.1.0",
    "polymer-flot": "riyad/polymer-flot",
    "semantic-ui": "semantic-ui#^2.0.0"
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment