source: spip-zone/_plugins_/analyclick/branches/V0.1/fonds/statistiques_anaclic_v3.html @ 79856

Last change on this file since 79856 was 79856, checked in by jean-marc.viglino@…, 7 years ago

{UPDATE} Mise à jour pour SPIP v3

File size: 5.1 KB
Line 
1<!--[if IE]>[<script type="text/javascript" src="(#CHEMIN{javascript/excanvas.js})"></script>]<![endif]-->
2[<script type="text/javascript" src="(#CHEMIN{javascript/jquery.flot.js})"></script>]
3[<script type="text/javascript" src="(#CHEMIN{javascript/jquery.flot.selection.js})"></script>]
4
5<h1><:anaclic:titre_evolution_stat:></h1>
6<BOUCLE_doc(DOCUMENTS){id_document}{tout}>
7<div class="box note">
8<b class="top"><b class="tl"></b><b class="tr"></b></b>
9<div class="inner"><div class="bd"><a title="Tout afficher" href="[(#SELF|parametre_url{id_document,''}|parametre_url{duree,''})]" class="annule_filtre"><img width="16" height="16" alt="Tout afficher" src="../prive/themes/spip/images/fermer-16.png"></a>
10        <:anaclic:stat_pour:>
11        <h2 class="objet_titre">Document ##ID_DOCUMENT[ : (#TITRE)]</h2>
12</div></div></div>
13</BOUCLE_doc>
14
15<p class="pagination">
16        <span class="dl" style="display:none">
17                <a class="noajax" href="">csv</a> |
18        </span>
19        [<span class="duree">(#ENV{duree,90}) jours</span> |]
20        <a href="[(#SELF|parametre_url{duree,#ENV{duree,90}|plus{25}})]">[(#CHEMIN_IMAGE{zoomout-24.png}|balise_img{<:statistiques:info_zoom:> -})]</a>
21        <a href="[(#SELF|parametre_url{duree,#ENV{duree,90}|moins{25}})]">[(#CHEMIN_IMAGE{zoomin-24.png}|balise_img{<:statistiques:info_zoom:> +})]</a>
22</p>
23
24<h3 class="caption"><:anaclic:stat_journalieres:></h3>
25<div id="stat_jour" style="width:100%; height:300px;"></div>
26
27<p></p>
28<h3 class="caption"><:anaclic:stat_mensuelles:></h3>
29<div id="stat_mois" style="width:100%; height:300px;"></div>
30
31<script type="text/javascript">
32(function($){
33   
34        $(document).ready(function()
35        {       var stat_jour = #STAT_JOUR;
36                for (var i=0; i<stat_jour.length; i++)
37                {       stat_jour[i][0] = new Date(stat_jour[i][0]).getTime();
38                }
39                var options =
40                {       grid:
41                        {       // Tagger les weekends
42                                markings: function (axes) 
43                                {       var d = new Date(axes.xaxis.min);
44                                        // go to the first Saturday
45                                        d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
46                                        d.setUTCSeconds(0); d.setUTCMinutes(0); d.setUTCHours(0);
47                                        // Weekends
48                                        var markings = [];
49                                        for (var i = d.getTime(); i < axes.xaxis.max; i += 7 * 24 * 60 * 60 * 1000)
50                                        {       markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
51                                        }
52                                        return markings;
53                                },
54                                hoverable: true,     
55                                mouseActiveRadius: 10  //specifies how far the mouse can activate an item
56                        },
57                        xaxes: 
58                        [{      mode:"time",
59                                minTickSize: [1, "day"],
60                                timeformat: "%d/%m/%y",
61                                monthNames: ["<:date_mois_1:>", "<:date_mois_2:>", "<:date_mois_3:>", "<:date_mois_4:>", "<:date_mois_5:>", "<:date_mois_6:>", 
62                                                        "<:date_mois_7:>", "<:date_mois_8:>", "<:date_mois_9:>", "<:date_mois_10:>", "<:date_mois_11:>", "<:date_mois_12:>"]
63                        }],
64                        lines:
65                        {       show: true
66                        },
67                        points:
68                        {       show: true
69                        }
70                };
71                $.plot($("#stat_jour"), [{data:stat_jour}], options);
72               
73                var stat_month = #STAT_MOIS;
74                for (var i=0; i<stat_month.length; i++)
75                {       stat_month[i][0] = new Date(stat_month[i][0]).getTime();
76                }
77                options =
78                {       grid:
79                        {       hoverable: true,     
80                                mouseActiveRadius: 10  //specifies how far the mouse can activate an item
81                        },
82                        xaxes:
83                        [{      mode:"time", 
84                                timeformat: "%b<br/>%y",
85                                tickSize: [1, "month"],
86                                monthNames: ["<:date_mois_1:>", "<:date_mois_2:>", "<:date_mois_3:>", "<:date_mois_4:>", "<:date_mois_5:>", "<:date_mois_6:>", 
87                                                        "<:date_mois_7:>", "<:date_mois_8:>", "<:date_mois_9:>", "<:date_mois_10:>", "<:date_mois_11:>", "<:date_mois_12:>"]
88                        }],
89                        series: 
90                        {       bars: 
91                                {       show: true,
92                                        align: "center",
93                                        barWidth: 12*24*60*60*300*7
94                                }
95                        }
96                };
97                $.plot($("#stat_mois"), [{data:stat_month}], options);
98        });
99
100        $.fn.UseTooltip = function (mois) 
101        {       var previousPoint = null;
102             
103                $(this).bind("plothover", function (event, pos, item) 
104                {       if (item) {
105                                if (previousPoint != item.dataIndex) 
106                                {       previousPoint = item.dataIndex;
107         
108                                        $("#tooltip").remove();
109                         
110                                        var x = new Date(item.datapoint[0]);
111                                        var y = item.datapoint[1];               
112                                        var monthNames = ["<:date_mois_1:>", "<:date_mois_2:>", "<:date_mois_3:>", "<:date_mois_4:>", "<:date_mois_5:>", "<:date_mois_6:>", 
113                                                        "<:date_mois_7:>", "<:date_mois_8:>", "<:date_mois_9:>", "<:date_mois_10:>", "<:date_mois_11:>", "<:date_mois_12:>"]
114                        if (mois) x = monthNames[x.getMonth()] +" "+ x.getFullYear();
115                        else x = x.toLocaleDateString();
116                       
117                                        showTooltip(item.pageX, item.pageY, x + "<br/>" + "<strong>" + y + "</strong> <:anaclic:statistiques_doc:>");
118                                }
119                        }
120                        else 
121                        {       $("#tooltip").remove();
122                                previousPoint = null;
123                        }
124                });
125        };
126         
127        function showTooltip(x, y, contents) {
128                $('<div id="tooltip">' + contents + '</div>').css({
129                        position: 'absolute',
130                        display: 'none',
131                        top: y + 5,
132                        left: x + 20,
133                        border: '2px solid #4572A7',
134                        padding: '2px',   
135                        'font-size': '11px',
136                        'background-color': '#fff',
137                        opacity: 0.80
138                }).appendTo("body").fadeIn(200);
139        }
140
141        $("#stat_jour").UseTooltip();
142        $("#stat_mois").UseTooltip(true);
143 
144})(jQuery);
145
146
147</script>
Note: See TracBrowser for help on using the repository browser.