flot.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define("/charts/flot", ["jquery", "Site"], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory(require("jquery"), require("Site"));
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory(global.jQuery, global.Site);
  11. global.chartsFlot = mod.exports;
  12. }
  13. })(this, function (_jquery, _Site) {
  14. "use strict";
  15. _jquery = babelHelpers.interopRequireDefault(_jquery);
  16. (0, _jquery.default)(document).ready(function ($$$1) {
  17. (0, _Site.run)();
  18. }); // Example Flot Realtime
  19. // ---------------------
  20. (function () {
  21. if (!_jquery.default.isFunction(_jquery.default.fn.plot) || (0, _jquery.default)("#exampleFlotRealtime").length === 0) {
  22. return;
  23. }
  24. var data = [];
  25. var totalPoints = 250;
  26. function getRandomData() {
  27. if (data.length > 0) {
  28. data = data.slice(1);
  29. } // Do a random walk
  30. while (data.length < totalPoints) {
  31. var prev = data.length > 0 ? data[data.length - 1] : 50;
  32. var y = prev + Math.random() * 10 - 5;
  33. if (y < 0) {
  34. y = 0;
  35. } else if (y > 100) {
  36. y = 100;
  37. }
  38. data.push(y);
  39. } // Zip the generated y values with the x values
  40. var res = [];
  41. for (var i = 0; i < data.length; ++i) {
  42. res.push([i, data[i]]);
  43. }
  44. return res;
  45. }
  46. var labelColor = Config.colors("grey", 600); // Set up the control widget
  47. var updateInterval = 30;
  48. var plot = _jquery.default.plot((0, _jquery.default)("#exampleFlotRealtime"), [{
  49. data: getRandomData()
  50. }], {
  51. colors: [Config.colors("blue-grey", 100)],
  52. series: {
  53. shadowSize: 0,
  54. lines: {
  55. show: true,
  56. lineWidth: 0,
  57. fill: true,
  58. fillColor: Config.colors("blue-grey", 100)
  59. }
  60. },
  61. legend: {
  62. show: false
  63. },
  64. xaxis: {
  65. show: false,
  66. font: {
  67. color: labelColor
  68. }
  69. },
  70. yaxis: {
  71. tickColor: "#edeff2",
  72. color: "#474e54",
  73. min: 0,
  74. max: 100,
  75. font: {
  76. size: 14,
  77. color: labelColor,
  78. weight: "300" // family: "OpenSans Light"
  79. }
  80. },
  81. grid: {
  82. color: "#474e54",
  83. tickColor: "#e3e6ea",
  84. backgroundColor: {
  85. colors: ["#fff", "#fff"]
  86. },
  87. borderWidth: {
  88. top: 0,
  89. right: 0,
  90. bottom: 1,
  91. left: 0
  92. },
  93. borderColor: "#eef0f2"
  94. }
  95. });
  96. function update() {
  97. plot.setData([getRandomData()]); // Since the axes don't change, we don't need to call plot.setupGrid()
  98. plot.draw();
  99. setTimeout(update, updateInterval);
  100. }
  101. update();
  102. })(); // Example Flot Full-Bg Line
  103. // -------------------------
  104. (function () {
  105. var b = [[1262304000000, 0], [1264982400000, 500], [1267401600000, 700], [1270080000000, 1300], [1272672000000, 2600], [1275350400000, 1300], [1277942400000, 1700], [1280620800000, 1300], [1283299200000, 1500], [1285891200000, 2000], [1288569600000, 1500], [1291161600000, 1200]];
  106. var a = [{
  107. label: "Fish values",
  108. data: b
  109. }];
  110. _jquery.default.plot("#exampleFlotFullBg", a, {
  111. xaxis: {
  112. min: new Date(2009, 12, 1).getTime(),
  113. max: new Date(2010, 11, 2).getTime(),
  114. mode: "time",
  115. tickSize: [1, "month"],
  116. monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  117. tickLength: 0,
  118. // tickColor: "#edeff2",
  119. color: "#474e54",
  120. font: {
  121. size: 14,
  122. weight: 300 // family: "OpenSans Light"
  123. }
  124. },
  125. yaxis: {
  126. tickColor: "#edeff2",
  127. color: "#474e54",
  128. font: {
  129. size: 14,
  130. weight: "300" // family: "OpenSans Light"
  131. }
  132. },
  133. series: {
  134. shadowSize: 0,
  135. lines: {
  136. show: true,
  137. // fill: true,
  138. // fillColor: "#ff0000",
  139. lineWidth: 1.5
  140. },
  141. points: {
  142. show: true,
  143. fill: true,
  144. fillColor: Config.colors("primary", 600),
  145. radius: 3,
  146. lineWidth: 1
  147. }
  148. },
  149. colors: [Config.colors("primary", 400)],
  150. grid: {
  151. // show: true,
  152. hoverable: true,
  153. clickable: true,
  154. // color: "green",
  155. // tickColor: "red",
  156. backgroundColor: {
  157. colors: ["#fcfdfe", "#fcfdfe"]
  158. },
  159. borderWidth: 0 // borderColor: "#ff0000"
  160. },
  161. legend: {
  162. show: false
  163. }
  164. });
  165. })(); // Example Flot Curve
  166. // ------------------
  167. (function () {
  168. var dt1 = [];
  169. for (var i = 0; i < Math.PI * 2; i += 0.25) {
  170. dt1.push([i, Math.sin(i)]);
  171. }
  172. var dt2 = [];
  173. for (i = 0; i < Math.PI * 2; i += 0.25) {
  174. dt2.push([i, Math.cos(i)]);
  175. }
  176. var f_chart = (0, _jquery.default)("#exampleFlotCurve");
  177. _jquery.default.plot(f_chart, [{
  178. label: "sin(x)",
  179. data: dt1,
  180. color: Config.colors("primary", 400),
  181. points: {
  182. show: true,
  183. fill: true,
  184. radius: 3,
  185. fillColor: Config.colors("primary", 400)
  186. }
  187. }, {
  188. label: "cos(x)",
  189. data: dt2,
  190. yaxis: 2,
  191. color: Config.colors("green", 400),
  192. points: {
  193. show: true,
  194. fill: true,
  195. radius: 3,
  196. fillColor: Config.colors("green", 600)
  197. }
  198. }], {
  199. series: {
  200. shadowSize: 0,
  201. lines: {
  202. show: true,
  203. lineWidth: 1.5
  204. },
  205. points: {
  206. show: true,
  207. radius: 3,
  208. lineWidth: 1
  209. }
  210. },
  211. xaxes: [{
  212. ticks: [0, [Math.PI / 2, "\u03C0/2"], [Math.PI, "\u03C0"], [Math.PI * 3 / 2, "3\u03C0/2"], [Math.PI * 2, "2\u03C0"]]
  213. }],
  214. yaxes: [{
  215. ticks: 5,
  216. min: -2,
  217. max: 2,
  218. tickDecimals: 3
  219. }, {
  220. ticks: 5,
  221. min: -1,
  222. max: 1,
  223. tickLength: 0,
  224. tickDecimals: 2,
  225. position: "right"
  226. }],
  227. grid: {
  228. hoverable: true,
  229. color: "#474e54",
  230. tickColor: "#e3e6ea",
  231. backgroundColor: {
  232. colors: ["#fff", "#fff"]
  233. },
  234. borderWidth: {
  235. top: 1,
  236. right: 1,
  237. bottom: 1,
  238. left: 1
  239. },
  240. borderColor: "#eef0f2"
  241. },
  242. legend: {
  243. show: false
  244. }
  245. });
  246. })(); // Example Flot Mix
  247. // ----------------
  248. (function () {
  249. var b1 = [];
  250. for (var i = 0; i < 14; i += 0.5) {
  251. b1.push([i, Math.cos(i) + 1]);
  252. }
  253. var b2 = [[2, 3], [4, 8], [6, 5], [9, 13]];
  254. var b3 = [];
  255. for (i = 0; i < 14; i += 0.5) {
  256. b3.push([i, Math.cos(i) + Math.sin(i) - 1]);
  257. }
  258. var b4 = [];
  259. for (i = 0; i < 14; i += 0.1) {
  260. b4.push([i, Math.sqrt(i * 10) - 4 * Math.cos(i)]);
  261. }
  262. var b5 = [];
  263. for (i = 0; i < 14; i += 1.5) {
  264. b5.push([i, Math.cos(i) + 2 * Math.sin(i) + 6]);
  265. }
  266. var b6 = [];
  267. for (i = 0; i < 14; i += 0.5 + Math.random()) {
  268. b6.push([i, Math.sqrt(i + 2 * Math.cos(i)) - Math.sin(i) - 3]);
  269. }
  270. _jquery.default.plot("#exampleFlotMix", [{
  271. data: b2,
  272. bars: {
  273. show: true,
  274. align: "center",
  275. fill: true,
  276. fillColor: Config.colors("blue-grey", 100)
  277. }
  278. }, {
  279. data: b1,
  280. lines: {
  281. show: true,
  282. fill: true,
  283. fillColor: "rgba(251,213,181,.1)"
  284. }
  285. }, {
  286. data: b3,
  287. points: {
  288. show: true,
  289. fill: true,
  290. fillColor: Config.colors("green", 600),
  291. radius: 2
  292. }
  293. }, {
  294. data: b4,
  295. lines: {
  296. show: true
  297. },
  298. points: {
  299. show: false
  300. }
  301. }, {
  302. data: b5,
  303. lines: {
  304. show: true
  305. },
  306. points: {
  307. show: true,
  308. fill: true,
  309. fillColor: Config.colors("primary", 600),
  310. radius: 2
  311. }
  312. }, {
  313. data: b6,
  314. lines: {
  315. show: true,
  316. steps: true
  317. }
  318. }], {
  319. xaxis: {
  320. tickLength: 0,
  321. color: "#474e54",
  322. font: {
  323. size: 14,
  324. weight: 300 // family: "OpenSans Light"
  325. }
  326. },
  327. yaxis: {
  328. tickColor: "#edeff2",
  329. color: "#474e54",
  330. font: {
  331. size: 14,
  332. weight: "300" // family: "OpenSans Light"
  333. }
  334. },
  335. grid: {
  336. color: "#474e54",
  337. tickColor: "#e3e6ea",
  338. backgroundColor: {
  339. colors: ["#fff", "#fff"]
  340. },
  341. borderWidth: {
  342. top: 0,
  343. right: 0,
  344. bottom: 1,
  345. left: 0
  346. },
  347. borderColor: "#eef0f2"
  348. },
  349. series: {
  350. shadowSize: 0
  351. },
  352. colors: [Config.colors("blue-grey", 100), Config.colors("orange", 200), Config.colors("green", 600), Config.colors("yellow", 600), Config.colors("primary", 600), Config.colors("purple", 200)]
  353. });
  354. })(); // Example Flot Stack Bar
  355. // ----------------------
  356. (function () {
  357. var a1 = [];
  358. for (var i = 1; i <= 4; i += 1) {
  359. a1.push([i, parseInt(Math.random() * 30)]);
  360. }
  361. var a2 = [];
  362. for (i = 1; i <= 4; i += 1) {
  363. a2.push([i, parseInt(Math.random() * 30)]);
  364. }
  365. var a3 = [];
  366. for (i = 1; i <= 4; i += 1) {
  367. a3.push([i, parseInt(Math.random() * 30)]);
  368. }
  369. var a4 = [];
  370. for (i = 1; i <= 4; i += 1) {
  371. a4.push([i, parseInt(Math.random() * 30 - 10)]);
  372. }
  373. _jquery.default.plot("#exampleFlotStackBar", [{
  374. data: a1,
  375. bars: {
  376. fill: true,
  377. fillColor: Config.colors("light-green", 500)
  378. }
  379. }, {
  380. data: a2,
  381. bars: {
  382. fill: true,
  383. fillColor: Config.colors("blue-grey", 300)
  384. }
  385. }, {
  386. data: a3,
  387. bars: {
  388. fill: true,
  389. fillColor: Config.colors("primary", 500)
  390. }
  391. }, {
  392. data: a4,
  393. bars: {
  394. fill: true,
  395. fillColor: Config.colors("purple", 500)
  396. }
  397. }], {
  398. series: {
  399. stack: true,
  400. shadowSize: 0,
  401. lines: {
  402. show: false,
  403. fill: true,
  404. steps: false
  405. },
  406. bars: {
  407. show: true,
  408. align: "center",
  409. barWidth: 0.38
  410. }
  411. },
  412. colors: [Config.colors("light-green", 500), Config.colors("blue-grey", 300), Config.colors("primary", 500), Config.colors("purple", 500)],
  413. xaxis: {
  414. tickLength: 0,
  415. color: "#474e54",
  416. min: 0,
  417. max: 5.5,
  418. ticks: [1, 2, 3, 4],
  419. font: {
  420. size: 14,
  421. weight: 300 // family: "OpenSans Light"
  422. }
  423. },
  424. yaxis: {
  425. tickColor: "#edeff2",
  426. color: "#474e54",
  427. min: -10,
  428. font: {
  429. size: 14,
  430. weight: "300" // family: "OpenSans Light"
  431. }
  432. },
  433. grid: {
  434. color: "#474e54",
  435. tickColor: "#e3e6ea",
  436. backgroundColor: {
  437. colors: ["#fff", "#fff"]
  438. },
  439. borderWidth: {
  440. top: 0,
  441. right: 0,
  442. bottom: 1,
  443. left: 0
  444. },
  445. borderColor: "#eef0f2"
  446. }
  447. });
  448. })(); // Example Flot Horizontal Bar
  449. // ---------------------------
  450. (function () {
  451. var a11 = [];
  452. for (var i = 1; i <= 5; i += 1) {
  453. a11.push([parseInt(Math.random() * 30), i]);
  454. }
  455. var a22 = [];
  456. for (i = 1; i <= 5; i += 1) {
  457. a22.push([parseInt(Math.random() * 30), i]);
  458. }
  459. var a33 = [];
  460. for (i = 1; i <= 5; i += 1) {
  461. a33.push([parseInt(Math.random() * 30), i]);
  462. }
  463. _jquery.default.plot("#exampleFlotHorizontalBar", [{
  464. data: a11,
  465. bars: {
  466. fill: true,
  467. fillColor: Config.colors("primary", 500)
  468. }
  469. }, {
  470. data: a22,
  471. bars: {
  472. fill: true,
  473. fillColor: Config.colors("blue-grey", 300)
  474. }
  475. }, {
  476. data: a33,
  477. bars: {
  478. fill: true,
  479. fillColor: Config.colors("red", 500)
  480. }
  481. }], {
  482. series: {
  483. stack: true,
  484. lines: {
  485. show: false,
  486. fill: true
  487. },
  488. bars: {
  489. show: true,
  490. barWidth: 0.55,
  491. align: "center",
  492. horizontal: true
  493. }
  494. },
  495. colors: [Config.colors("primary", 500), Config.colors("blue-grey", 300), Config.colors("red", 500)],
  496. xaxis: {
  497. color: "#474e54",
  498. font: {
  499. size: 14,
  500. weight: 300 // family: "OpenSans Light"
  501. }
  502. },
  503. yaxis: {
  504. tickLength: 0,
  505. tickColor: "#edeff2",
  506. color: "#474e54",
  507. min: 0,
  508. max: 6,
  509. ticks: [1, 2, 3, 4, 5],
  510. font: {
  511. size: 14,
  512. weight: "300" // family: "OpenSans Light"
  513. }
  514. },
  515. grid: {
  516. color: "#474e54",
  517. tickColor: "#e3e6ea",
  518. backgroundColor: {
  519. colors: ["#fff", "#fff"]
  520. },
  521. borderWidth: {
  522. top: 1,
  523. right: 1,
  524. bottom: 1,
  525. left: 1
  526. },
  527. borderColor: "#eef0f2"
  528. }
  529. });
  530. })(); // Example Flot Pie
  531. // ----------------
  532. (function () {
  533. var pieData = [],
  534. series = 2;
  535. for (var i = 0; i < series; i++) {
  536. pieData[i] = {
  537. label: "Example Pie S" + (i + 1),
  538. data: Math.floor(Math.random() * 100) + 1
  539. };
  540. }
  541. var placeholder = (0, _jquery.default)("#exampleFlotPie"); // Default Options
  542. (0, _jquery.default)("#btnPieDefault").click(function () {
  543. placeholder.unbind();
  544. _jquery.default.plot(placeholder, pieData, {
  545. series: {
  546. pie: {
  547. show: true
  548. }
  549. },
  550. colors: [Config.colors("primary", 500), Config.colors("blue-grey", 200)]
  551. });
  552. }); // Without Legend
  553. (0, _jquery.default)("#btnPieWithoutLegend").click(function () {
  554. placeholder.unbind();
  555. _jquery.default.plot(placeholder, pieData, {
  556. series: {
  557. pie: {
  558. show: true,
  559. label: {
  560. show: true
  561. }
  562. }
  563. },
  564. colors: [Config.colors("primary", 500), Config.colors("blue-grey", 200)],
  565. legend: {
  566. show: false
  567. }
  568. });
  569. }); // Label Radius
  570. (0, _jquery.default)("#btnPieLabelRadius").click(function () {
  571. placeholder.unbind();
  572. _jquery.default.plot(placeholder, pieData, {
  573. series: {
  574. pie: {
  575. show: true,
  576. radius: 1,
  577. label: {
  578. show: true,
  579. radius: 3 / 4,
  580. formatter: labelFormatter
  581. }
  582. }
  583. },
  584. colors: [Config.colors("primary", 500), Config.colors("blue-grey", 200)],
  585. legend: {
  586. show: false
  587. }
  588. });
  589. }); // Rectangular Pie
  590. (0, _jquery.default)("#btnPieRectangular").click(function () {
  591. placeholder.unbind();
  592. _jquery.default.plot(placeholder, pieData, {
  593. series: {
  594. pie: {
  595. show: true,
  596. radius: 500,
  597. label: {
  598. show: true,
  599. formatter: labelFormatter,
  600. threshold: 0.1
  601. }
  602. }
  603. },
  604. colors: [Config.colors("primary", 500), Config.colors("blue-grey", 200)],
  605. legend: {
  606. show: false
  607. }
  608. });
  609. }); // Donut Hole
  610. (0, _jquery.default)("#btnPieDonutHole").click(function () {
  611. placeholder.unbind();
  612. _jquery.default.plot(placeholder, pieData, {
  613. series: {
  614. pie: {
  615. innerRadius: 0.5,
  616. show: true
  617. }
  618. },
  619. colors: [Config.colors("primary", 500), Config.colors("blue-grey", 200)]
  620. });
  621. }); // Interactivity
  622. (0, _jquery.default)("#btnPieInteractivity").click(function () {
  623. placeholder.unbind();
  624. _jquery.default.plot(placeholder, pieData, {
  625. series: {
  626. pie: {
  627. show: true
  628. }
  629. },
  630. colors: [Config.colors("primary", 500), Config.colors("blue-grey", 200)],
  631. grid: {
  632. hoverable: true,
  633. clickable: true
  634. }
  635. });
  636. placeholder.bind("plothover", function (event, pos, obj) {
  637. if (!obj) {
  638. return;
  639. }
  640. var percent = parseFloat(obj.series.percent).toFixed(2);
  641. (0, _jquery.default)("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>");
  642. });
  643. placeholder.bind("plotclick", function (event, pos, obj) {
  644. if (!obj) {
  645. return;
  646. }
  647. percent = parseFloat(obj.series.percent).toFixed(2);
  648. alert("" + obj.series.label + ": " + percent + "%");
  649. });
  650. }); // Show the initial default chart
  651. (0, _jquery.default)("#btnPieDefault").click(); // A custom label formatter used by several of the plots
  652. console.log("out");
  653. function labelFormatter(label, series) {
  654. return "<div" + " style='" + "font-size: 8pt; text-align: center; padding: 2px; color: #747474;'" + ">" + label + "<br/>" + Math.round(series.percent) + "%</div>";
  655. }
  656. })(); // Example Flot Visitors
  657. // ---------------------
  658. (function () {
  659. var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476], [1199746800000, 462], [1199833200000, 448], [1199919600000, 442], [1200006000000, 403], [1200092400000, 204], [1200178800000, 194], [1200265200000, 327], [1200351600000, 374], [1200438000000, 507], [1200524400000, 546], [1200610800000, 482], [1200697200000, 283], [1200783600000, 221], [1200870000000, 483], [1200956400000, 523], [1201042800000, 528], [1201129200000, 483], [1201215600000, 452], [1201302000000, 270], [1201388400000, 222], [1201474800000, 439], [1201561200000, 559], [1201647600000, 521], [1201734000000, 477], [1201820400000, 442], [1201906800000, 252], [1201993200000, 236], [1202079600000, 525], [1202166000000, 477], [1202252400000, 386], [1202338800000, 409], [1202425200000, 408], [1202511600000, 237], [1202598000000, 193], [1202684400000, 357], [1202770800000, 414], [1202857200000, 393], [1202943600000, 353], [1203030000000, 364], [1203116400000, 215], [1203202800000, 214], [1203289200000, 356], [1203375600000, 399], [1203462000000, 334], [1203548400000, 348], [1203634800000, 243], [1203721200000, 126], [1203807600000, 157], [1203894000000, 288]]; // first correct the timestamps - they are recorded as the daily
  660. // midnights in UTC+0100, but Flot always displays dates in UTC
  661. // so we have to add one hour to hit the midnights in the plot
  662. for (var i = 0; i < d.length; ++i) {
  663. d[i][0] += 60 * 60 * 1000;
  664. } // helper for returning the weekends in a period
  665. function weekendAreas(axes) {
  666. var markings = [],
  667. d = new Date(axes.xaxis.min); // go to the first Saturday
  668. d.setUTCDate(d.getUTCDate() - (d.getUTCDay() + 1) % 7);
  669. d.setUTCSeconds(0);
  670. d.setUTCMinutes(0);
  671. d.setUTCHours(0);
  672. var i = d.getTime(); // when we don't set yaxis, the rectangle automatically
  673. // extends to infinity upwards and downwards
  674. do {
  675. markings.push({
  676. xaxis: {
  677. from: i,
  678. to: i + 2 * 24 * 60 * 60 * 1000
  679. }
  680. });
  681. i += 7 * 24 * 60 * 60 * 1000;
  682. } while (i < axes.xaxis.max);
  683. return markings;
  684. }
  685. var options = {
  686. series: {
  687. lines: {
  688. show: true,
  689. lineWidth: 1
  690. },
  691. shadowSize: 0
  692. },
  693. colors: [Config.colors("primary", 600)],
  694. selection: {
  695. mode: "x",
  696. color: [Config.colors("primary", 300)]
  697. },
  698. xaxis: {
  699. tickLength: 0,
  700. mode: "time",
  701. color: "#474e54",
  702. font: {
  703. size: 14,
  704. weight: 300 // family: "OpenSans Light"
  705. }
  706. },
  707. yaxis: {
  708. tickColor: "#edeff2",
  709. color: "#474e54",
  710. font: {
  711. size: 14,
  712. weight: "300" // family: "OpenSans Light"
  713. }
  714. },
  715. grid: {
  716. markings: weekendAreas,
  717. color: "#474e54",
  718. tickColor: "#e3e6ea",
  719. backgroundColor: {
  720. colors: ["#fff", "#fff"]
  721. },
  722. borderWidth: {
  723. top: 0,
  724. right: 0,
  725. bottom: 1,
  726. left: 0
  727. },
  728. borderColor: "#eef0f2"
  729. }
  730. };
  731. var _plot = _jquery.default.plot("#exampleFlotVisitors", [d], options);
  732. var overview = _jquery.default.plot("#exampleFlotVisitorsOverview", [d], {
  733. series: {
  734. lines: {
  735. show: true,
  736. lineWidth: 1
  737. },
  738. shadowSize: 0
  739. },
  740. colors: [Config.colors("primary", 600)],
  741. xaxis: {
  742. ticks: [],
  743. mode: "time"
  744. },
  745. yaxis: {
  746. ticks: [],
  747. min: 0,
  748. autoscaleMargin: 0.1
  749. },
  750. selection: {
  751. mode: "x",
  752. color: [Config.colors("primary", 300)]
  753. },
  754. grid: {
  755. // markings: weekendAreas,
  756. color: "#474e54",
  757. tickColor: "#e3e6ea",
  758. backgroundColor: {
  759. colors: ["#fff", "#fff"]
  760. },
  761. borderWidth: {
  762. top: 1,
  763. right: 1,
  764. bottom: 1,
  765. left: 1
  766. },
  767. borderColor: "#eef0f2"
  768. }
  769. }); // now connect the two
  770. (0, _jquery.default)("#exampleFlotVisitors").bind("plotselected", function (event, ranges) {
  771. // do the zooming
  772. _jquery.default.each(_plot.getXAxes(), function (_, axis) {
  773. var opts = axis.options;
  774. opts.min = ranges.xaxis.from;
  775. opts.max = ranges.xaxis.to;
  776. });
  777. _plot.setupGrid();
  778. _plot.draw();
  779. _plot.clearSelection(); // don't fire event on the overview to prevent eternal loop
  780. overview.setSelection(ranges, true);
  781. });
  782. (0, _jquery.default)("#exampleFlotVisitorsOverview").bind("plotselected", function (event, ranges) {
  783. _plot.setSelection(ranges);
  784. });
  785. })(); // Example Flot Tooltip
  786. // --------------------
  787. (function () {
  788. (0, _jquery.default)("<div class='flot-tooltip'></div>").css({
  789. position: "absolute",
  790. color: "#fff",
  791. display: "none",
  792. border: "1px solid #777",
  793. padding: "2px",
  794. "background-color": "#777",
  795. opacity: 0.80
  796. }).appendTo("body");
  797. (0, _jquery.default)("#exampleFlotCurve").bind("plothover", function (event, pos, item) {
  798. if (item) {
  799. var x = item.datapoint[0].toFixed(2),
  800. y = item.datapoint[1].toFixed(2);
  801. (0, _jquery.default)(".flot-tooltip").html(item.series.label + " of " + x + " = " + y).css({
  802. top: item.pageY + 5,
  803. left: item.pageX + 5
  804. }).fadeIn(200);
  805. } else {
  806. (0, _jquery.default)(".flot-tooltip").hide();
  807. }
  808. });
  809. (0, _jquery.default)("#exampleFlotFullBg").bind("plothover", function (event, pos, item) {
  810. if (item) {
  811. var x = item.datapoint[0].toFixed(2),
  812. y = item.datapoint[1].toFixed(2);
  813. (0, _jquery.default)(".flot-tooltip").html(item.series.label + " of " + x + " = " + y).css({
  814. top: item.pageY + 5,
  815. left: item.pageX + 5
  816. }).fadeIn(200);
  817. } else {
  818. (0, _jquery.default)(".flot-tooltip").hide();
  819. }
  820. });
  821. (0, _jquery.default)("#exampleFlotRealtime").bind("plothover", function (event, pos, item) {
  822. if (item) {
  823. var x = item.datapoint[0].toFixed(2),
  824. y = item.datapoint[1].toFixed(2);
  825. (0, _jquery.default)(".flot-tooltip").html("x | " + x + "," + " y | " + y).css({
  826. top: item.pageY + 5,
  827. left: item.pageX + 5
  828. }).fadeIn(200);
  829. } else {
  830. (0, _jquery.default)(".flot-tooltip").hide();
  831. }
  832. });
  833. })();
  834. });