JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<script src="http://yourjavascript.com/5022388132/jquery-flot-dashes.js"></script>
<div id="flot" style="height:500px; width:200px"></div>
JavaScript
// jquery.flot.treshold.multiple.js
(function ($) {
function init(plot) {
function plotWithMultipleThresholds(plot, s, datapoints) {
if (s.data && s.data.length > 0 && s.constraints && s.constraints.length > 0) {
var series = new Graph(s.data, s.constraints).getPlotData();
for (var i = 0; i < series.length; i++) {
var ss = $.extend({}, s);
ss.constraints = [];
ss.data = series[i].data;
ss.color = series[i].color;
plot.getData().push(ss);
}
}
}
function Graph(dataset, constraints) {
this._constraints = _getSortedConstraints(dataset, constraints);
this._dataset = dataset;
this._plotData = [];
this.getPlotData = function () {
if (this._constraints.length == 0) return [];
for (var i = this._constraints.length - 1; i >= 0; i--) {
var constraint = this._constraints[i];
if (null != constraint.threshold) {
var set = new Resolve(this._dataset).using(constraint.threshold, constraint.evaluate);
this._plotData.push({
data: set,
color: constraint.color
});
}
}
return this._plotData;
};
function Resolve(originalPonits) {
this._originalPoints = originalPonits;
this._data = [];
this._getPointOnThreshold = _getPointOnThreshold;
this.using = using;
function using(threshold, evaluate) {
var count = 0;
for (var i = 0; i < this._originalPoints.length; i++) {
var currentPoint = this._originalPoints[i];
...