<!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>