<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Markings</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../lib/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../lib/jquery.colorhelpers.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.image.js"></script>
<script type="text/javascript">
$(function () {
var yAxisLabels = ["", "Pre A1", "A1", "A2", "B1.1", "B1.2", "B2.1", "C1.1", "C1.2", "Level", "", ""];
var xAxisLabels = ["", "", "Age", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", ""];
function yAxisLabelGenerator(y) {
return yAxisLabels[y];
}
function xAxisLabelGenerator(x) {
return xAxisLabels[x];
}
var markings = [
// markings that has 3 pixels rounded and with single line html
{ color: "rgba(87, 181, 255, 1)", xaxis: { from: 6, to: 10 }, yaxis: { from: 1.8, to: 2.2 }, text: "6 to 10", rounded: 3, aboveGrid: true, font: { color: "#fff" }, textAlign: "center", textBaseline: "middle" },
{ color: "#57b5ff", xaxis: { from: 9.5, to: 10.5 }, yaxis: { from: 2.8, to: 3.2 }, text: "10", rounded: 3, aboveGrid: true, font: { color: "#fff" }, textAlign: "center", textBaseline: "middle" },
{ color: "#57b5ff", xaxis: { from: 10, to: 14 }, yaxis: { from: 3.8, to: 4.2 }, text: "10 to 14", rounded: 3, aboveGrid: true, font: { color: "#fff" }, textAlign: "center", textBaseline: "middle" },
{ color: "#57b5ff", xaxis: { from: 14, to: 15 }, yaxis: { from: 4.8, to: 5.2 }, text: "14 to 15", rounded: 3, aboveGrid: true, font: { color: "#fff" }, textAlign: "center", textBaseline: "middle" },
{ color: "#d7048a", xaxis: { from: 15, to: 17 }, yaxis: { from: 5.8, to: 6.2 }, text: "15 to 17", rounded: 3, aboveGrid: true, font: { color: "#fff" }, textAlign: "center", textBaseline: "middle" },
{ color: "#838383", xaxis: { from: 17, to: 19 }, yaxis: { from: 6.8, to: 7.2 }, text: "17 and up", rounded: 3, aboveGrid: true, font: { color: "#fff" }, textAlign: "center", textBaseline: "middle" },
{ color: "#838383", xaxis: { from: 17, to: 19 }, yaxis: { from: 7.8, to: 8.2 }, text: "17 and up", rounded: 3, aboveGrid: true, font: { color: "#fff" }, textAlign: "center", textBaseline: "middle" },
{ color: "#57b5ff", xaxis: { from: 6.9, to: 7 }, yaxis: { from: 1.2, to: 1.8 }, aboveGrid: true },
// markings with multiline html.
{ color: "#e2f0f9", xaxis: { from: 7, to: 8 }, yaxis: { from: 1.2, to: 1.8 }, aboveGrid: true, text: "<strong>HF</strong><br />2A-2B", textAlign: "left", textBaseline: "middle", font: { color: "#000", size: "12px", family: "Arial" } },
{ color: "#57b5ff", xaxis: { from: 7.9, to: 8 }, yaxis: { from: 2.2, to: 2.8 } },
{ color: "#e2f0f9", xaxis: { from: 8, to: 9 }, yaxis: { from: 2.2, to: 2.8 }, aboveGrid: true, text: "<strong>HF</strong><br />2A-2B", textAlign: "left", textBaseline: "middle", font: { color: "#000", size: "12px", family: "Arial" } },
{ color: "#57b5ff", xaxis: { from: 8.9, to: 9 }, yaxis: { from: 2.2, to: 2.8 } },
{ color: "#e9e9e9", xaxis: { from: 9, to: 10 }, yaxis: { from: 2.2, to: 2.8 }, aboveGrid: true, text: "<strong>HF</strong><br />2A-2B", textAlign: "left", textBaseline: "middle", font: { color: "#000", size: "12px", family: "Arial" } },
{ color: "#e2f0f9", xaxis: { from: 10, to: 10.5 }, yaxis: { from: 2.2, to: 2.8 }, aboveGrid: true, text: "<strong>TB</strong><br />BX4", textAlign: "left", textBaseline: "middle", font: { color: "#000", size: "12px", family: "Arial" } },
{ color: "#57b5ff", xaxis: { from: 10.4, to: 10.5 }, yaxis: { from: 3.2, to: 3.8 }, aboveGrid: true },
{ color: "#e2f0f9", xaxis: { from: 10.5, to: 11.5 }, yaxis: { from: 3.2, to: 3.8 }, aboveGrid: true, text: "<strong>TB</strong><br />BX7-8", textAlign: "left", textBaseline: "middle", font: { color: "#000", size: "12px", family: "Arail" } },
{ color: "#b8b8b8", xaxis: { from: 11.4, to: 11.5 }, yaxis: { from: 4.2, to: 4.8 }, aboveGrid: true },
{ color: "#e6e6e6", xaxis: { from: 11.5, to: 12.5 }, yaxis: { from: 4.2, to: 4.8 }, aboveGrid: true, text: "<strong>TB</strong><br />BX7-8", textAlign: "left", textBaseline: "middle", font: { color: "#000", size: "12px", family: "Arial" } },
{ color: "#b8b8b8", xaxis: { from: 12.4, to: 12.5 }, yaxis: { from: 5.2, to: 5.8 }, aboveGrid: true },
{ color: "#e6e6e6", xaxis: { from: 12.5, to: 13.5 }, yaxis: { from: 5.2, to: 5.8 }, aboveGrid: true, text: "<strong>FR</strong><br />BX3-10", textAlign: "left", textBaseline: "middle", font: { color: "#000", size: "12px", family: "Arial" } },
{ color: "#b8b8b8", xaxis: { from: 13.4, to: 13.5 }, yaxis: { from: 6.2, to: 6.8 }, aboveGrid: true },
{ color: "#e6e6e6", xaxis: { from: 13.5, to: 14.5 }, yaxis: { from: 6.2, to: 6.8 }, aboveGrid: true, text: "<strong>FR</strong><br />BX11-12", textAlign: "left", textBaseline: "middle", font: { style: "", variant: "", weight: "", color: "#000", size: "12", lineHeight: "12", family: "Arial" } },
{ color: "#b8b8b8", xaxis: { from: 14.4, to: 14.5 }, yaxis: { from: 7.2, to: 7.8 }, aboveGrid: true },
{ color: "#e6e6e6", xaxis: { from: 14.5, to: 15.5 }, yaxis: { from: 7.2, to: 7.8 }, aboveGrid: true, text: "<div style='margin: 0 0 0 1px;'><strong>FR</strong><br />BX13-14</div>", textAlign: "left", textBaseline: "top", font: { color: "#000", size: "10", family: "Arial" } },
// A example marking that is behind the grid (by specify a color with a opacity value).
// By default the markings will be above the grid.
{ aboveGrid: false, color: "rgb(170, 170, 170)", xaxis: { from: 3.5, to: 6.5 }, yaxis: { from: 5.5, to: 8.5 }, text: "<strong>I'm behind the grid</strong>,<br />others are above it.", font: { color: "#00f", size: "13", family: "Arial" }, textAlign: "center", textBaseline: "middle" }
];
var data = [[
["you_are_here.png", 10, 3.9, 11.1, 5.4]
]];
var options = {
series: { images: { show: true } },
xaxis: {
ticks: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
tickFormatter: xAxisLabelGenerator,
min: 2,
max: 19
},
yaxis: {
ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
tickFormatter: yAxisLabelGenerator,
min: 0,
max: 9
},
grid: {
show: true,
markings: markings,
markingsAboveGrid: true,
borderColor: "#000",
backgroundColor: { colors: ["#fff", "#fff"] }
}
};
$(document).ready(function () {
$.plot.image.loadDataImages(data, options, function () {
$.plot("#goal-map-canvas-wrapper", data, options);
});
});
});
</script>
</head>
<body>
<div id="header">
<h2>Adding text into markings</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="goal-map-canvas-wrapper" class="demo-placeholder"></div>
</div>
<p>This example shows how to add text into markings, and how to draw markings with rounded corner.</p>
<p>The chart here is actually a goal ladder map, and it also shows how to use image plugin to draw icons on to your chart (Notice the "You are here" icon <img src="you_are_here.png" height="30" alt="You are here"/> on this chart.). If you don't need to draw images/icons onto your chart, you don't need to reference the image plugin.</p>
</div>
<div id="footer">
Copyright © 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>