/usr/share/doc/libjs-jquery-flot-docs/examples/ajax/index.html is in libjs-jquery-flot-docs 0.8.1+dfsg-2.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 | <!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: AJAX</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/usr/share/javascript/excanvas/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery-flot/jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
tickDecimals: 0,
tickSize: 1
}
};
var data = [];
$.plot("#placeholder", data, options);
// Fetch one series, adding to what we already have
var alreadyFetched = {};
$("button.fetchSeries").click(function () {
var button = $(this);
// Find the URL in the link right next to us, then fetch the data
var dataurl = button.siblings("a").attr("href");
function onDataReceived(series) {
// Extract the first coordinate pair; jQuery has parsed it, so
// the data is now just an ordinary JavaScript object
var firstcoordinate = "(" + series.data[0][0] + ", " + series.data[0][1] + ")";
button.siblings("span").text("Fetched " + series.label + ", first point: " + firstcoordinate);
// Push the new data onto our existing data array
if (!alreadyFetched[series.label]) {
alreadyFetched[series.label] = true;
data.push(series);
}
$.plot("#placeholder", data, options);
}
$.ajax({
url: dataurl,
type: "GET",
dataType: "json",
success: onDataReceived
});
});
// Initiate a recurring data update
$("button.dataUpdate").click(function () {
data = [];
alreadyFetched = {};
$.plot("#placeholder", data, options);
var iteration = 0;
function fetchData() {
++iteration;
function onDataReceived(series) {
// Load all the data in one pass; if we only got partial
// data we could merge it with what we already have.
data = [ series ];
$.plot("#placeholder", data, options);
}
// Normally we call the same URL - a script connected to a
// database - but in this case we only have static example
// files, so we need to modify the URL.
$.ajax({
url: "data-eu-gdp-growth-" + iteration + ".json",
type: "GET",
dataType: "json",
success: onDataReceived
});
if (iteration < 5) {
setTimeout(fetchData, 1000);
} else {
data = [];
alreadyFetched = {};
}
}
setTimeout(fetchData, 1000);
});
// Load the first series by default, so we don't have an empty plot
$("button.fetchSeries:first").click();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
</head>
<body>
<div id="header">
<h2>AJAX</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
<p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below:</p>
<p>The data is fetched over HTTP, in this case directly from text files. Usually the URL would point to some web server handler (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that extracts it from a database and serializes it to JSON.</p>
<p>
<button class="fetchSeries">First dataset</button>
[ <a href="data-eu-gdp-growth.json">see data</a> ]
<span></span>
</p>
<p>
<button class="fetchSeries">Second dataset</button>
[ <a href="data-japan-gdp-growth.json">see data</a> ]
<span></span>
</p>
<p>
<button class="fetchSeries">Third dataset</button>
[ <a href="data-usa-gdp-growth.json">see data</a> ]
<span></span>
</p>
<p>If you combine AJAX with setTimeout, you can poll the server for new data.</p>
<p>
<button class="dataUpdate">Poll for data</button>
</p>
</div>
<div id="footer">
Copyright © 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
|