API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 13th, 2019
255
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.71 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Bretagne - hydrométrie</title>
  6. <script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
  7. <!-- <script src="https://www.chartjs.org/samples/latest/utils.js"></script> -->
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
  9. <!-- <script src="papaparse.min.js"></script> -->
  10. <!-- <script src="wfsGrapheur.js"></script> -->
  11.  
  12. <style>
  13. canvas{
  14. -moz-user-select: none;
  15. -webkit-user-select: none;
  16. -ms-user-select: none;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div id="hideLEgend" style="width:100%;">
  22. <!-- <button id="indicateurs">Indicateurs</button> -->
  23. <!-- <div id="indic" style="display:none;"></div> -->
  24. <canvas id="canvas" ></canvas>
  25. </div>
  26. <script>
  27. //pour récupérer les paramètres
  28. <!-- function processUser() -->
  29. <!-- { -->
  30. <!-- var parameters = location.search.substring(1).split("&"); -->
  31. <!-- var temp = parameters[0].split("="); -->
  32. <!-- l1 = unescape(temp[1]); -->
  33. <!-- temp = parameters[1].split("="); -->
  34. <!-- p1 = unescape(temp[1]); -->
  35. <!-- temp = parameters[2].split("="); -->
  36. <!-- l2 = unescape(temp[1]); -->
  37. <!-- temp = parameters[3].split("="); -->
  38. <!-- p2 = unescape(temp[1]); -->
  39. <!-- listeId=[l1,l2]; -->
  40. <!-- listeTitre=[p1,p2]; -->
  41. <!-- }; -->
  42. var listeOption=[];
  43. var date,moyenne_interannuelle,valeur_faible,valeur_tres_faible,valeur_forte,debit_donnee_provisoire_m3,debit_donnee_validee_m3;
  44. date={
  45. nom:"date",
  46. label:"date",
  47. draw:false,
  48. axeX:true,
  49. indiceCSV:1,
  50. liste:[]
  51. };
  52. moyenne_interannuelle={
  53. nom:"moyenne_interannuelle",
  54. label:"Valeur médiane interannuelle",
  55. draw:true,
  56. axeX:false,
  57. color:'rgb(0,128,0)',
  58. borderWidth:1,
  59. indiceCSV:2,
  60. liste:[]
  61. };
  62. valeur_faible={
  63. nom:"valeur_faible",
  64. label:"Valeur faible (VCN3 quinquennal)",
  65. draw:true,
  66. axeX:false,
  67. color:'rgb(235,152,78)',
  68. borderWidth:1,
  69. indiceCSV:3,
  70. liste:[]
  71. };
  72. valeur_tres_faible={
  73. nom:"valeur_tres_faible",
  74. label:"Valeur très faible (VCN3 décennal)",
  75. draw:true,
  76. axeX:false,
  77. color:'rgb(255,0,0)',
  78. borderWidth:1,
  79. indiceCSV:4,
  80. liste:[]
  81. };
  82. valeur_forte={
  83. nom:"valeur_forte",
  84. label:"Valeur forte (QMJ maximum quinquennal)",
  85. draw:true,
  86. axeX:false,
  87. color:'rgb(0,255,255)',
  88. borderWidth:1,
  89. indiceCSV:5,
  90. liste:[]
  91. };
  92. debit_donnee_provisoire_m3={
  93. nom:"debit_donnee_provisoire_m3",
  94. label:"Débit moyen journalier provisoire",
  95. draw:true,
  96. axeX:false,
  97. color:'rgb(0, 0, 255)',
  98. borderWidth:1,
  99. indiceCSV:6,
  100. liste:[]
  101. };
  102. debit_donnee_validee_m3={
  103. nom:"debit_donnee_validee_m3",
  104. label:"Débit moyen journalier validé",
  105. draw:true,
  106. axeX:false,
  107. color:'rgb(0, 0, 200)',
  108. borderWidth:3,
  109. indiceCSV:7,
  110. liste:[]
  111. };
  112. <!--------------------------------------------------------------->
  113. //ici récupérer la liste éventuelle des cql_filter, ainsi que les titles
  114. //ensuite pour chaque élément de la liste faire un option
  115. //lancer wfsGrapheur pour chaque option, à placer dans la page
  116. <!-- processUser(); -->
  117. <!-- for (var i=0;i<2;i++) { -->
  118. var option={
  119. url:"https://geobretagne.fr/geoserver-test/geobretagne/wfs?",
  120. typeName:"hydrometrie_qmj_historique",
  121. cql_filter:"code_hydro="+'J7010610',
  122. title:'Airon à Landivy (DREAL Normandie)',
  123. listeParam:[date,debit_donnee_validee_m3,debit_donnee_provisoire_m3,moyenne_interannuelle,valeur_forte,valeur_faible,valeur_tres_faible],
  124. logarithme:true,
  125. source:"DREAL Bretagne"
  126. };
  127. listeOption.push(option);
  128. <!-- } -->
  129. wfsGrapheur(option);
  130. <!-- function pausecomp(millis) -->
  131. <!-- { -->
  132. <!-- var date = new Date(); -->
  133. <!-- var curDate = null; -->
  134. <!-- do { curDate = new Date(); } -->
  135. <!-- while(curDate-date < millis); -->
  136. <!-- } -->
  137. <!-- pausecomp(2000); -->
  138.  
  139. <!-- console.log("coucou après 2 secondes"); -->
  140. //wfsGrapheur(listeOption[1],'canvas1');
  141.  
  142. //afficher / masquer quasi tous les champs (titre légende axes)
  143. //pb si on veut individualiser les actions
  144. //essayer aussi de déporter ces actions dans le js, plutôt que dans le template
  145.  
  146. // pour afficher/masquer la légende
  147. document.getElementById('hideLEgend').addEventListener('click', habillage);
  148. // pour afficher/masquer les indicateurs
  149. <!-- document.getElementById('indicateurs').addEventListener('click', indicateur); -->
  150. //déclaration des variables
  151. var data=[],
  152. listeDate=[],
  153. listeLabels=[],
  154. MONTHS,
  155. config,
  156. listeDatas=[],
  157. url,
  158. source,
  159. maxValue,
  160. titre,
  161. axeY,
  162. bool;
  163.  
  164.  
  165. function wfsGrapheur(option){
  166. //construction de l'url
  167. url=option.url+"service=wfs&version=2.0.0&request=getFeature&"+
  168. "typeName="+option.typeName+"&cql_filter="+option.cql_filter+
  169. "&outputFormat=CSV"+"&propertyName=";
  170. //on ajoute à l'url la liste des propertyName
  171. for (var i=0;i<option.listeParam.length;i++){
  172. url=url+option.listeParam[i].nom+",";
  173. }
  174. console.log(url,"url");
  175. //on rempli les champs source du graphe avec l'année en cours et titre
  176. source="source: "+option.source+" "+new Date().getFullYear();
  177. titre=option.title;
  178. papaparse(option);
  179. bool=option.logarithme;
  180. log(bool);
  181. }
  182.  
  183. //passage de l'échelle au log
  184. function log(booleen){
  185.  
  186. if (booleen==true){
  187. axeY=[{
  188. display: true,
  189. type: 'logarithmic',
  190. ticks: {
  191. min: 0,
  192. max: maxValue+1,//si on mets une valeur fixe on pourra peut être mieux comparer les graphes entre eux
  193. callback: function(value, index, values) {//needed to change the scientific notation results from using logarithmic scale
  194. return Number(value.toString());//pass tick values as a string into Number function
  195. }
  196. },
  197. scaleLabel: {
  198. display: true,
  199. fontSize:16,
  200. fontStyle:'bold',
  201. labelString: 'Débit en m³/s - échelle log'
  202. }
  203. }];
  204. axeYsimplifie=[{
  205. display: true,
  206. type: 'logarithmic',
  207. ticks: {
  208. min: 0,
  209. max: maxValue+1,//si on mets une valeur fixe on pourra peut être mieux comparer les graphes entre eux
  210. callback: function(value, index, values) {//needed to change the scientific notation results from using logarithmic scale
  211. return Number(value.toString());//pass tick values as a string into Number function
  212. }
  213. },
  214. scaleLabel: {
  215. display: false,
  216. fontSize:16,
  217. fontStyle:'bold',
  218. labelString: 'Débit en m³/s - échelle log'
  219. }
  220. }];
  221. //axe qui s'affiche au chargement
  222. axeYInit=[{
  223. display: true,
  224. type: 'logarithmic',
  225. ticks: {
  226. min: 0,
  227. max: maxValue+1,//si on mets une valeur fixe on pourra peut être mieux comparer les graphes entre eux
  228. callback: function(value, index, values) {//needed to change the scientific notation results from using logarithmic scale
  229. return Number(value.toString());//pass tick values as a string into Number function
  230. }
  231. },
  232. scaleLabel: {
  233. display: false,
  234. fontSize:16,
  235. fontStyle:'bold',
  236. labelString: 'Débit en m³/s - échelle log'
  237. }
  238. }];
  239.  
  240. }
  241. else {
  242. axeY=[{
  243. display: true,
  244. scaleLabel: {
  245. display: true,
  246. fontSize:16,
  247. fontStyle:'bold',
  248. labelString: 'Débit en m³/s '
  249. }
  250. }];
  251. axeYsimplifie=[{
  252. display: true,
  253. scaleLabel: {
  254. display: false,
  255. fontSize:16,
  256. fontStyle:'bold',
  257. labelString: 'Débit en m³/s '
  258. }
  259. }];
  260. //axe qui s'affiche au chargement
  261. axeYInit=[{
  262. display: true,
  263. scaleLabel: {
  264. display: false,
  265. fontSize:16,
  266. fontStyle:'bold',
  267. labelString: 'Débit en m³/s '
  268. }
  269. }];
  270. }
  271. return [axeY,axeYsimplifie];
  272. }
  273.  
  274. //définition de la configuration du graphique
  275. function initialisation(){
  276. MONTHS = listeDate;
  277. config = {
  278. type: 'line',
  279. data: {
  280. labels: listeLabels,
  281. datasets: listeDatas
  282. },
  283. options: {
  284. legend: {
  285. display:false,
  286. labels:{
  287. usePointStyle: true
  288. },
  289. // par défaut, onClick supprime les courbes. Est-ce un comportement à conserver?
  290. //pour enlever le comportement ajout d'une fonction vide toto
  291. onClick:function toto(){}
  292. },
  293. responsive: true,
  294. title: {
  295. display: false,
  296. fontSize:16,
  297. fontStyle:'bold',
  298. text: titre
  299. },
  300. tooltips: {
  301. mode: 'nearest',//'index' pour la liste des valeurs pour un x
  302. intersect: false,
  303. },
  304. hover: {
  305. mode: 'nearest',
  306. intersect: true
  307. },
  308. scales: {
  309. xAxes: [{
  310. display: false
  311. }],
  312. yAxes: axeYInit
  313. }
  314. }
  315.  
  316. };
  317. }
  318.  
  319. //fonction qui affiche/cache les différents habillages du graphique
  320. function habillage() {
  321. var nom = window.location.href;
  322. //window.open(nom,"nom_fenetre","options_fenetre");
  323. var axeY=myLine.options.scales.yAxes;
  324. myLine.options.legend.display = !myLine.options.legend.display;
  325. myLine.options.title.display = !myLine.options.title.display;
  326. var axeVisible=[{
  327. display: true,
  328. scaleLabel: {
  329. display: true,
  330. fontSize:16,
  331. fontStyle:'bold',
  332. labelString: source
  333. }
  334. }];
  335. var axeCache= [{
  336. display: false
  337. }];
  338. if(myLine.options.legend.display){
  339. myLine.options.scales.xAxes=axeVisible;
  340. myLine.options.scales.yAxes=log(option.logarithme)[0];
  341. document.getElementById('hideLEgend').style.width="80%";
  342. }else{
  343. myLine.options.scales.xAxes=axeCache;
  344. myLine.options.scales.yAxes=log(option.logarithme)[1];
  345. document.getElementById('hideLEgend').style.width="100%";
  346. }
  347. myLine.update();
  348. }
  349.  
  350. //fonction qui affiche/cache les indicateurs
  351. function indicateur() {
  352. if (document.getElementById('indic').style.display == "none"){
  353. document.getElementById('indic').style.display = "block";
  354. }else{
  355. document.getElementById('indic').style.display = "none";
  356. }
  357. }
  358.  
  359. //charge la courbe dans la div 'canvas'
  360. function drawChart() {
  361. var ctx = document.getElementById('canvas').getContext('2d');
  362. window.myLine = new Chart(ctx, config);
  363. }
  364.  
  365.  
  366.  
  367. function papaparse(option){
  368. Papa.parse(url, {
  369. download: true,
  370. complete: function(results) {
  371.  
  372. data=results.data;
  373. // on rempli toutes les listes
  374. for (var j =0;j<option.listeParam.length;j++){
  375. option.listeParam[j].liste=[];
  376. for (var i = 1; i < data.length-1; i++) {
  377. option.listeParam[j].liste.push(data[i][option.listeParam[j].indiceCSV]);
  378. }
  379. }
  380. // en cas d'absence de valeur dans une des listes, on remplace par null pour éviter d'afficher les 0 dans le graphique
  381. for (var k =0;k<option.listeParam.length;k++){
  382. for (var l=0;l<option.listeParam[k].liste.length;l++){
  383. if (option.listeParam[k].liste[l]===""){
  384. option.listeParam[k].liste[l]=null;
  385. }
  386. }
  387. }
  388.  
  389. // pour chaque courbe, on ajoute un dataset
  390. maxValue=0;
  391. for (var m=0;m<option.listeParam.length;m++) {
  392. if (option.listeParam[m].draw){
  393. var obj={
  394. pointStyle:'line',
  395. label:option.listeParam[m].label,
  396. backgroundColor: 'rgb(255, 255, 255)',//option.listeParam[m].color,
  397. borderColor: option.listeParam[m].color,
  398. borderWidth:option.listeParam[m].borderWidth,
  399. pointBorderWidth:0.5,
  400. pointRadius:0.5,
  401. data: option.listeParam[m].liste,
  402. fill: false,
  403. };
  404. listeDatas.push(obj);
  405. //on cherche la valeur maximale dans le graphique pour fixer la valeur max de l'échelle log
  406. if (option.logarithme){
  407. for(var n=0;n<option.listeParam[m].liste.length;n++){
  408. if (option.listeParam[m].liste[n] != 'null'){
  409. maxValue=Math.max(maxValue,option.listeParam[m].liste[n]);
  410. }
  411. }
  412. }
  413. }
  414. if (option.listeParam[m].axeX){
  415. listeDate=option.listeParam[m].liste;
  416. }
  417. }
  418. console.log(listeDatas);
  419. //listeDate, pour simplifier l'affichage de l'axe X
  420. for (var a=0;a<listeDate.length;a++){
  421. var an,mois,moisLabel;
  422. an=listeDate[a].substring(2,4);
  423. mois=listeDate[a].substring(5,7);
  424. jour=listeDate[a].substring(8,10);
  425. // switch(mois) {
  426. // case '01':
  427. // moisLabel='Janv';
  428. // break;
  429. // case '02':
  430. // moisLabel='Févr';
  431. // break;
  432. // case '03':
  433. // moisLabel='Mars';
  434. // break;
  435. // case '04':
  436. // moisLabel='Avr';
  437. // break;
  438. // case '05':
  439. // moisLabel='Mai';
  440. // break;
  441. // case '06':
  442. // moisLabel='Juin';
  443. // break;
  444. // case '07':
  445. // moisLabel='Juill';
  446. // break;
  447. // case '08':
  448. // moisLabel='Août';
  449. // break
  450. // case '09':
  451. // moisLabel='Sept';
  452. // break;
  453. // case '10':
  454. // moisLabel='Oct';
  455. // break;
  456. // case '11':
  457. // moisLabel='Nov';
  458. // break;
  459. // case '12':
  460. // moisLabel='Déc';
  461. // break;
  462. // default:
  463. // break;
  464. // }
  465. // listeLabels.push(moisLabel+"-"+an);
  466. listeLabels.push(jour+"/"+mois+"/"+an);
  467. }
  468. initialisation();
  469. drawChart();
  470. // indicateurs(option,true);
  471. }
  472. });
  473.  
  474. }
  475.  
  476.  
  477.  
  478. </script>
  479. </body>
  480. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!