WP File Manager
Current Path:
/
home
/
argothem
/
www
/
v4_old
/
fichiers_obsoletes_20220627_043105
/
plugins-dist
/
statistiques
/
javascript
/
Name
Action
..
class.JavaScriptPacker.php
Edit
excanvas.js
Edit
jquery.flot.js
Edit
jquery.flot.selection.js
Edit
jquery.flot.time.js
Edit
jquery.tflot.js
Edit
Editing: jquery.tflot.js
/** * Librairie tFlot pour jQuery et jQuery.flot * Licence GNU/GPL - Matthieu Marcillaud * Version 1.4.0 */ (function($){ /** * Des variables a garder globalement * * collections : stockage de l'ensemble de toutes les valeurs de tous les graphs et leurs options * collectionsActives : stockage des series actives * plots : stockage des graphiques * vignettes : stockage des vignettes * idGraph : identifiant unique pour tous les graphs */ collections = []; collectionsActives = []; plots = []; vignettes = []; vignettesSelection = []; idGraph = 0; /* * Fait un graphique d'un tableau donne * $("table.graph").tFlot(); * necessite la librairie "jQuery flot". * http://code.google.com/p/flot/ */ $.fn.tFlot = function(settings) { var options, flot; options = { width:'500px', height:'250px', parse:{ orientation:'row', // 'column' : tableaux verticaux par defaut... axeOnTitle:false // les coordonnees x d'axe sont donnes dans l'attribut title du <th> et non dans le <th> ? }, legendeExterne:false, legendeActions:false, // ne fonctionne qu'avec l'option legende externe modeDate:false, // pour calculer les timestamp automatiquement moyenneGlissante:{ show:false, // pour calculer une moyenne glissante automatiquement plage:7 // plage de glissement (nombre impair !) }, grille:{weekend:false}, infobulle:{ show:false, serie_color:false // utiliser comme couleur de fond la même couleur que les lignes du graph }, zoom:false, vignette:{ show:false, width:'160px', height:'100px' }, flot:{ legend:{ show:true, container:null, labelFormatter:null, noColumns: 3 }, bars: {fill:false}, yaxis: { min: 0 }, selection: { mode: "x" } } } $.extend(true, options, settings); $(this).each(function(){ // identifiant unique pour tous les graphs // creer les cadres // .graphique // .graphResult // .graphInfos // .graphLegend // .graphOverview $(this).hide().wrap("<div class='graphique' id='graphique"+idGraph+"'></div>"); graphique = $(this).parent(); values = parseTable(this, options.parse); $.extend(true, values.options, options.flot); graph = $("<div class='graphResult' style='width:" + options.width + ";height:" + options.height + ";'></div>").appendTo(graphique); graph.wrap("<div class='graphResult-wrap'></div>"); gInfo = $("<div class='graphInfo'></div>").appendTo(graphique); // legende en dehors du dessin ? if (options.legendeExterne) { legend = $("<div class='graphLegend' id='grapLegend"+idGraph+"'></div>").appendTo(gInfo); values.options.legend.container = legend; } // legende avec items clicables pour desactiver certaines series if (options.legendeExterne && options.legendeActions) { values.options.legend.labelFormatter = function(label) { return '<a href="#label">' + label + '</a>'; } } // si mode time, on calcule des timestamp // les series sont alors de la forme [[timestamp, valeur],...] // et pas besoin de ticks declare if (options.modeDate) { timestamps = []; // calcul des timestamps $.each(values.options.xaxis.ticks, function(i, val){ timestamps.push([val[0], (new Date(val[1])).getTime()]); }); // les remettre dans les series $.each(values.series, function(i, val){ data = []; $.each(val.data, function (j, d){ data.push([timestamps[j][1], d[1]]); }); values.series[i].data = data; }); // plus besoin du ticks // mais toujours besoin des valeurs completes... values.options.xaxis = $.extend(true, { mode: "time", timeformat: "%d/%m/%y" }, values.options.xaxis, {ticks: null} ); if (options.grille.weekend) { values.options.grid = { markings: weekendAreas } } if (options.grille.years) { values.options.grid = { markings: yearsArea } } } // en cas de moyenne glissante, on la calcule if (options.moyenneGlissante.show) { values.series = moyenneGlissante(values.series, options.moyenneGlissante); } // si infobulles, les ajouter if (options.infobulle.show) { $.extend(true, options.infobulle, {date:options.modeDate}); infobulle($('#graphique'+idGraph), options.infobulle); $.extend(true, values.options, { grid:{hoverable:true} }); } // dessiner plots[idGraph] = $.plot(graph, values.series, values.options); // prevoir les actions sur les labels if (options.legendeExterne && options.legendeActions) { $.extend(values.options, {legend:{container:null, show:false}}); actionsLegendes($('#graphique'+idGraph)); } // ajouter une mini vue si demandee if (options.vignette.show) { $("<div class='graphVignette' id='#graphVignette"+idGraph + "' style='width:" + options.vignette.width + ";height:" + options.vignette.height + ";'></div>").appendTo(gInfo); creerVignette($('#graphique'+idGraph), values.series, values.options, options.vignette); } // autoriser les zoom if (options.zoom) { zoomGraphique($('#graphique'+idGraph)); } // stocker les valeurs collections.push({id:idGraph, values:values}); // sources collectionsActives = $.extend(true, {}, collections); // affiches ++idGraph; }); /* * Prendre une table HTML * et calculer les donnees d'un graph jQuery.plot */ function parseTable(table, settings){ var options; flot = []; options = { ticks:[], // [1:"label 1", 2:"label 2"] orientation:'row', // 'column' ticksReels:[], // on sauve les vraies donnees pour les infobulles (1 janvier 2008) et non le code de date (1/1/2008) axeOnTitle:false, defaultSerie:{ bars: { barWidth: 0.9, align: "center", show:true, fill:false }, lines: { show:false, fill:false } } } $.extend(options, settings); row = (options.orientation == 'row'); // // recuperer les points d'axes // // // Une fonction pour simplifier la recup // function getValue(element) { if (options.axeOnTitle) { return element.attr('title'); } else { return element.text(); } } axe=0; if (row) { // dans le th de chaque tr $(table).find('tr:not(:first)').each(function(){ $(this).find('th:first').each(function(){ options.ticks.push([++axe, getValue($(this))]); options.ticksReels.push([axe, $(this).text()]); }); }); } else { // dans les th du premier tr $(table).find('tr:first th:not(:first)').each(function(){ options.ticks.push([++axe, getValue($(this))]); options.ticksReels.push([axe, $(this).text()]); }); } // // recuperer les noms de series // axe = (axe ? 1 : 0); if (row) { // si axes definis, on saute une ligne if (axe) { columns = $(table).find('tr:first th:not(:first)'); } else { columns = $(table).find('tr:first th'); } // chaque colonne est une serie for(i=0; i<columns.length; i++){ cpt=0, data=[]; th = $(table).find('tr:first th:eq(' + (i + axe) + ')'); label = th.text(); serieOptions = optionsCss(th); $(table).find('tr td:nth-child(' + (i + 1 + axe) +')').each(function(){ val = parseFloat($(this).text()); data.push( [++cpt, val] ); }); serie = {label:label, data:data}; $.extend(serie, serieOptions); flot.push(serie); } } else { // si axes definis, on saute une colonne if (axe) { rows = $(table).find('tr:not(:first)'); } else { rows = $(table).find('tr'); } // chaque ligne est une serie rows.each(function(){ cpt=0, data=[]; th = $(this).find('th'); label = th.text(); serieOptions = optionsCss(th); // recuperer les valeurs $(this).find('td').each(function(){ val = parseFloat($(this).text()); data.push( [++cpt, val] ); }); serie = {label:label, data:data}; $.extend(serie, serieOptions); flot.push(serie); }); } // // mettre les options dans les series // color=0; $.each(flot, function(i, serie) { if (!serie.color) { serie.color = color++; } serie = $.extend(true, {}, options.defaultSerie, serie); flot[i] = serie; }); opt = { xaxis: {} } if (options.ticks.length) { opt.xaxis.ticks = options.ticks; opt.xaxis.ticksReels = options.ticksReels; } return {series:flot, options:opt}; } /* * * Recuperer les options en fonctions de CSS * */ function optionsCss(element) { var options = {}; $element = $(element); if ($element.data('serie') == 'line') { $.extend(true, options, { lines:{show:true}, bars:{show:false}, points:{show:false} }); } if ($element.data('serie') == 'bar') { $.extend(true, options, { lines:{show:false}, bars:{show:true}, points:{show:false} }); } if ($element.data('serie') == 'lineBar') { $.extend(true, options, { lines:{show:true,steps:true}, bars:{show:false}, points:{show:false} }); } if ($element.data('fill')) { $.extend(true, options, { lines:{ fill:true, fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.9 } ] } }, bars:{ fill:true, fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.9 } ] } } }); } if (color = $element.data('color')) { options.color = color; } return options; } /* * * calcul d'une moyenne glissante * */ function moyenneGlissante(lesSeries, settings) { var options; options = { plage: 7, texte:"Moyenne glissante" } $.extend(options, settings); g = options.plage; series = []; color = 0; $.each(lesSeries, function(i, val){ // recuperer le numero de couleur max color = ParseInt(Math.max(color,val.color)); data = [], moy = []; $.each(val.data, function (j, d){ // ajout du nouvel element // et retrait du trop vieux moy.push(parseInt(d[1])); if (moy.length>=g) { moy.shift();} // calcul de la somme et ajout de la moyenne for(var k=0,sum=0;k<moy.length;sum+=moy[k++]); data.push([d[0], Math.round(sum/moy.length)]); }); serieG = $.extend(true, {}, val, { data:data, label:val.label + " ("+options.texte+")", lines:{ show:true, fill:false }, bars:{show:false} }); series.push(val); series.push(serieG); }); // remettre les couleurs $.each(series, function(i, val) { if (!val.color) { val.color = color++; } }); return series; } // // Permettre de cacher certaines series // function actionsLegendes(graph) { // actions sur les items de legende // pour masquer / afficher certaines series // a ne charger qu'une fois par graph !!! $(graph).find('.legendLabel a').click(function(){ tr = $(this).parent().prev('.legendColorBox').toggleClass('cacher').parent(); master = tr.closest('.graphique'); pid = master.attr('id').substr(9); // enlever 'graphique' var seriesActives = []; tr.find('.legendColorBox:not(.cacher)').each(function(){ nom = $(this).next('.legendLabel').find('a').text(); n = collections[pid].values.series.length; for(i=0;i<n;i++) { if (collections[pid].values.series[i].label == nom) { seriesActives.push(collections[pid].values.series[i]); break; } } }); collectionsActives[pid].values.series = seriesActives; $.plot(master.find('.graphResult'), seriesActives, collections[pid].values.options); // vignettes if (master.find('.graphVignette').length) { creerVignette(master, seriesActives, collections[pid].values.options); } }); } // // Afficher une miniature // function creerVignette(graphique, series, optionsParents, settings) { var options; options = { show:true, zoom:true, flot:{ legend: { show: false }, shadowSize: 0, lines: { show: true, lineWidth: 1 }, grid: { color: "#999", hoverable:null }, selection: { mode: "x" }, xaxis:{min:null, max:null}, yaxis:{min:null, max:null} } }; $.extend(true, options, settings); options.flot = $.extend(true, {}, optionsParents, options.flot); // demarrer la vignette vignette = $(graphique).find('.graphVignette'); pid = vignette.closest('.graphique').attr('id').substr(9); vignettes[pid] = $.plot(vignette, series, options.flot); if (vignettesSelection[pid] !== undefined) { vignettes[pid].setSelection(vignettesSelection[pid]); } } // // Permettre le zoom sur le graphique // et sur la miniature // function zoomGraphique(graphique) { pid = $(graphique).attr('id').substr(9); $(graphique).find('.graphResult').on("plotselected", function (event, ranges) { graph = $(event.target); pid = graph.closest('.graphique').attr('id').substr(9); // clamp the zooming to prevent eternal zoom if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) ranges.xaxis.to = ranges.xaxis.from + 0.00001; if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) ranges.yaxis.to = ranges.yaxis.from + 0.00001; // do the zooming // et sauver les parametres du zoom plots[pid] = $.plot(graph, collectionsActives[pid].values.series, $.extend(true, collections[pid].values.options, { xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }, yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to } })); // don't fire event on the overview to prevent eternal loop if (vignettes[pid] !== undefined) { vignettes[pid].setSelection(ranges, true); } }); // raz sur double clic $(graphique).find('.graphResult').dblclick(function (event) { var graphique; graphique = $(event.target).closest('.graphique'); pid = graphique.attr('id').substr(9); vignettesSelection[pid] = undefined; if (vignettes[pid] != undefined) { vignettes[pid].clearSelection(); } plots[pid] = $.plot(graphique.find('.graphResult'), collectionsActives[pid].values.series, $.extend(true, collections[pid].values.options, { xaxis: { min: null, max: null }, yaxis: { min: null, max: null } })); }); // si une vignette est presente vignette = $(graphique).find('.graphVignette'); if (vignette.length) { // zoom depuis la miniature vignette.on("plotselected", function (event, ranges) { graph = $(event.target); pid = graph.closest('.graphique').attr('id').substr(9); vignettesSelection[pid] = ranges; plots[pid].setSelection(ranges); }); // raz depuis la miniature sur double clic vignette.dblclick(function (event) { var graphique; graphique = $(event.target).closest('.graphique'); pid = graphique.attr('id').substr(9); vignettesSelection[pid] = undefined; plots[pid] = $.plot(graphique.find('.graphResult'), collectionsActives[pid].values.series, $.extend(true, collections[pid].values.options, { xaxis: { min: null, max: null }, yaxis: { min: null, max: null } })); }); } } /* * * Infobulles * */ var previousPoint = null; function infobulle(graph, settings) { var options; options = { show:true }; $.extend(true, options, settings); $(graph).on("plothover", function (event, pos, item) { $("#x").text(pos.x.toFixed(2)); $("#y").text(pos.y.toFixed(2)); graph = $(event.target); pid = graph.closest('.graphique').attr('id').substr(9); if (options.show) { if (item) { if (previousPoint != item.datapoint) { previousPoint = item.datapoint; $("#tooltip").remove(); var x = item.datapoint[0], y = item.datapoint[1]; var color = ''; if(options.serie_color){ color = item.series.color; } x = collectionsActives[pid].values.options.xaxis.ticksReels[item.dataIndex][1]; showTooltip(item.pageX, item.pageY, item.series.label + " [" + x + "] = " + y, color); } } else { $("#tooltip").remove(); previousPoint = null; } } }); } } // Adapte du site de Flot (exemple de visites) // helper for returning the weekends in a period function weekendAreas(axes) { var markings = []; var heure = 60 * 60 * 1000; var jour = 24 * heure; // les week ends // go to the first Saturday var d = new Date(axes.xaxis.min); d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7)) d.setUTCSeconds(0); d.setUTCMinutes(0); d.setUTCHours(0); var i = d.getTime(); do { markings.push({ xaxis: { from: i, to: i + 2*jour }, color: '#e8e8e8' }); i += 7*jour; } while (i < axes.xaxis.max); // les mois et les ans... $.each(yearsArea(axes), function(i,j){ markings.push(j); }); return markings; } // une grille pour afficher les mois et les ans... function yearsArea(axes){ var markings = []; var heure = 60 * 60 * 1000; var jour = 24 * heure; var width_year = jour; if (axes.xaxis.options.minTickSize[1]=="month") width_year = 30.4*jour; // les mois et les ans... d = new Date(axes.xaxis.min); y = d.getUTCFullYear(); m = d.getUTCMonth(); if (++m == 12) {m=0; ++y;} d = new Date(Date.UTC(y,m,1,0,0,0)); do { i = d.getTime(); if (m == 0) {couleur = '#CA5F18';} else {couleur = '#D7C2AF'; } markings.push({ xaxis: { from: i, to: i + (m==0?width_year:jour)}, color: couleur }); if (++m == 12) {m=0; ++y;} d = new Date(Date.UTC(y,m,1,0,0,0)); } while (d.getTime() < axes.xaxis.max); return markings; } /** * Exemple adapte du site de Flot (exemple d'interactions) * montrer les informations des points * * Arguments : * x (Float) Coordonnee longitudinale de la bulle * y (Float) Coordonnee latitudinale de la bulle * contents (String) Le contenu de la bulle * color La couleur de fond de l'infobulles */ function showTooltip(x, y, contents, color) { $('<div id="tooltip">' + contents + '</div>').css( { top: y + 5, left: x + 5, opacity: 0.80, background:color }).addClass('tooltip_statistiques').appendTo("body").fadeIn(200); } // copie de la fonction de jquery.flot.js // pour utilisation dans infobulle function formatDate(d, fmt, monthNames) { var leftPad = function(n) { n = "" + n; return n.length == 1 ? "0" + n : n; }; var r = []; var escape = false; if (monthNames == null) monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; for (var i = 0; i < fmt.length; ++i) { var c = fmt.charAt(i); if (escape) { switch (c) { case 'h': c = "" + d.getUTCHours(); break; case 'H': c = leftPad(d.getUTCHours()); break; case 'M': c = leftPad(d.getUTCMinutes()); break; case 'S': c = leftPad(d.getUTCSeconds()); break; case 'd': c = "" + d.getUTCDate(); break; case 'm': c = "" + (d.getUTCMonth() + 1); break; case 'y': c = "" + d.getUTCFullYear(); break; case 'b': c = "" + monthNames[d.getUTCMonth()]; break; } r.push(c); escape = false; } else { if (c == "%") escape = true; else r.push(c); } } return r.join(""); } })(jQuery);