Skip to content

Instantly share code, notes, and snippets.

@mojoaxel

mojoaxel/flot-events.time.html

Created June 18, 2015 12:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mojoaxel/eb2aa0a3fe97ce3f3119 to your computer and use it in GitHub Desktop.
Save mojoaxel/eb2aa0a3fe97ce3f3119 to your computer and use it in GitHub Desktop.
Download ZIP
flot-events example using time axes
Raw
flot-events.time.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flot-Events Example</title>
<!-- required -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.selection.min.js"></script>
<!-- optional -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.navigate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<!-- flot-events plugin -->
<script type="text/javascript" src="../jquery.flot.events.js"></script>
</head>
<body>
<div id="plot" style="width:640px; height:320px;"></div>
<script type="text/javascript">
$(document).ready(function() {
/* generates an array of x/y points in a sine curve */
var sine_data = function() {
var a = [];
var v = 1
for(var i=moment('01.01.1980'); i<=moment('01.01.1980').add(35, 'years'); i+=(1000*60*60*24*365)) {
v += Math.random()*10-5;
a.push([i, v]);
}
return a;
}();
/* define the series */
var serie1 = {
data: sine_data,
label: "value"
};
var series = [serie1];
var types = [{
eventType: "Simple",
color: "blue",
markerShow: false, // [true], false
}, {
eventType: "CriticalPoint",
color: "black", // e.g red, #F00, #FF0000
markerSize: 10, //[5]px
markerShow: true, // [true], false
position: 'BOTTOM', //[TOP], BOTTOM
lineStyle: 'solid', //dotted, [dashed], solid
lineWidth: 2 //[1]px
}, {
eventType: "InflectionPoint",
color: "gray",
markerTooltip: false
}];
var events = [{
min: moment('09.04.1995').valueOf(),
max: moment('09.04.1995').valueOf(),
eventType: "Simple",
title: "09.04.1995",
description: ""
}, {
min: moment('05.01.1986').valueOf(),
max: moment('05.01.1986').valueOf(),
eventType: "InflectionPoint",
title: "05.01.1986",
description: ""
}, {
min: moment('02.03.2005').valueOf(),
max: moment('02.03.2005').valueOf(),
eventType: "CriticalPoint",
title: "02.03.2005",
description: ""
}, {
min: moment('02.03.1990').valueOf(),
max: moment('02.03.1990').valueOf(),
eventType: "CriticalPoint",
title: "02.03.1990",
description: ""
}, {
min: moment('23.03.2020').valueOf(),
max: moment('23.03.2020').valueOf(),
eventType: "Info",
title: "Outside Point",
description: ""
}];
var plot = $.plot($('#plot'), [ serie1 ], {
xaxis: {
mode: "time"
},
events: {
data: events,
types: types
},
selection: {
color: "#e8cfac"
},
zoom: {
interactive: true
},
pan: {
interactive: true,
cursor: "move"
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment