Discussion :

[kawaiyush]

Bonjour à tous,

Je suis en train de créer des graphes HighChart JavaScript et j'aimerais rendre la date dans "pointStart: Date UTC" dynamique, au lieu de la saisir à la main à chaque graphe.

Voici d'abord un bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
            series: [{
                type: 'area',
                name: 'DEBIT : ',
                pointInterval: 60 * 1000,
                pointStart: Date.UTC(2013, 5, 06, 16, 18, 39),   //yyyy=2014,MM= 5(juin), dd=06, hh= 16,mm=18, SS=39
                data: <%= com.telma.reportgraphe.Utils.getExtractDebits(sourceFile) %>   //sourceFile est obtenu dynamiquement
            }]
....

Le code suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Date.UTC(2013, 5, 06, 16, 18, 39),   //yyyy=2014,MM= 5(juin), dd=06, hh= 16,mm=18, SS=39

fonctionne très bien avec un seul fichier.

Voici un extrait:

06/04/2013 16:18:39 9757
06/04/2013 16:20:39 6833
06/04/2013 16:22:39 18897
06/04/2013 16:24:39 2891
06/04/2013 16:26:40 5213
06/04/2013 16:28:40 4095
06/04/2013 16:30:41 16372
06/04/2013 16:32:40 27334
06/04/2013 16:34:42 8535
06/04/2013 16:36:42 14137
06/04/2013 16:38:41 19516
06/04/2013 16:40:41 5276

mais avec un autre fichier, il faudrait modifier Date.UTC(2013, 5, 06, 16, 18, 39) sinon le graphe sera toujours en fonction du 6 juin 2013...

Je voudrais donc le faire dynamiquement. J'ai pensé le faire avec un split de la date et de l'heure, puis l'insérer un par un dans un tableau, pour obtenir au final Date.UTC(2013, 5, 06, 16, 18, 39).

Quelqu'un saurait-il m'indiquer si c'est faisable, ou sinon comment faire ?

Merci d'avance pour votre aide.

[tchize_]

SimpleDateFormat te permet de parser un date dans une format particulier. Ensuite, un deuxième SimpleDateFormat peut être utiliser pour la formater dans le format que tu désire. SimpleDateFormat a une méthode setTimeZone, donc tu peux l'utiliser pour changer de timezone entre tes deux format, si j'ai bien compris ce que tu cherche, parce que c'est tout sauf clair .

[thelvin]

En fait la fonction JavaScript Date.UTC() produit un simple entier qui représente un nombre de millisecondes depuis Epoch, UTC.

Vu que JavaScript et Java utilisent le même Epoch (1er Janvier 1970 à minuit) ; et que la méthode getTime() de Date renvoie un long qui représente exactement la même chose, la conversion Date Java -> date JavaScript UTC se fait avec un simple getTime().
Reste à faire la conversion String Java -> Date Java avec SimpleDateFormat. (Le petit problème étant de savoir si la String est exprimée dans une time zone précise, et si oui, laquelle.)

[kawaiyush]

Bonjour à tous et merci beaucoup de m'avoir répondu.

J'ai créé une méthode qui va créer une vector<Date> , ci après une partie du code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
int year = cal.get(Calendar.YEAR);
					int month = cal.get(Calendar.MONTH);
					int day = cal.get(Calendar.DAY_OF_MONTH);
					int heure = cal.get(Calendar.HOUR);
					int minute = cal.get(Calendar.MINUTE);
					int seconde = cal.get(Calendar.SECOND);
					retdate.add(new Dategraphereport(year,month,day,heure,minute,seconde));

dans jsp, je voudrai faire un boucle for, mais le for ne marche pas dans la balise script, donc je l'avais mis extérieur, et ça fait planter firefox.
dans mon script, j'ai:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'RAPPORT SUR LE DEBIT CONSOMME DURANT LE MOIS D\'AVRIL 2013'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Cliquer et glisser sur les points de valeur pour zoomer' : 
                    'Pinch the chart to zoom in'
            },
.......
 
series: [{
                type: 'area',
                name: 'DEBIT : ',
                pointInterval: 60 * 1000,
                pointStart: Date.UTC(2013, 3, 06, 16, 18, 39),
                data: <%= com.telma.reporting.debit.Utils.getExtractDebits(path+element_select) %>
            }]
        });
    });
    
                </script>

J'aimerai le transformer en:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
....
 series: [{
                type: 'area',
                name: 'DEBIT : ',
                pointInterval: 60 * 1000,
                pointStart: Date.UTC(<%= listdate.get(i).getYear()%>,<%= listdate.get(i).getMonth() %>,<%= listdate.get(i).getDay()%>,<%= listdate.get(i).getHour()%>,<%= listdate.get(i).getMinute()%>,<%= listdate.get(i).getSecond()%>),
                data: <%= com.telma.reporting.debit.Utils.getExtractDebits(path+element_select) %>
            }]
....

Je n'ai aucune idée où devrais-je mettre le boucle for pour que ça donnerai ni d'erreur ni plantage du navigateur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
listdate = u.getdatehourmin(path+element_select);
    			for(int i =0; i<listdate.size();i++){

je travaille sur ça là et je suis bloquée, je ne trouve pas encore de solution,
j'ai besoin de votre aide svp, guides moi un peu les amis.
Mmerci bcp,

[Logan Mauzaize]

Comme la fait remarquer thelvin, nul besoin de formatter ta date. Il suffit d'envoyer le résultat de Date.getTime()

[kawaiyush]

ah ok,
mais en fait je n'ai plus converti la date, j'ai essayé avec i=2, comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
series: [{
                type: 'area',
                name: 'DEBIT : ',
                pointInterval: 60 * 1000,
                pointStart: Date.UTC(<%= listdate.get(2).getYear()%>, <%= listdate.get(2).getMonth()%>, <%= listdate.get(2).getDay()%>,<%= listdate.get(2).getHour()%>,<%= listdate.get(2).getMinute()%>,<%= listdate.get(2).getSecond()%>),
                data: <%= com.telma.reporting.debit.Utils.getExtractDebits(path+element_select) %>
            }]

ça marche très bien, mais c'est ce que je voudrais vous demander c'est comment je vais le faire avec i, c à d utiliser le boucle for:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
for(int i =0; i<listdate.size();i++){
...

je ne sais pas comment et où je vais mettre ce boucle si on ne peut pas le mettre dans le script,
pourriez vous m'expliquer svp,
merci

[Logan Mauzaize]

En utilisant soit la JSTL, soit tu inclus ton "for-each" avec <% for (...) {%> sans oublier de fermer le bloc après la boucle.

[kawaiyush]

d'accord, j'ai utilisé jsp, et j'ai alors essayé comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 series: [{
                type: 'area',
                name: 'DEBIT : ',
                pointInterval: 60 * 1000,
                pointStart: Date.UTC(<%for(int i =0; i<listdate.size();i++){%><%= listdate.get(i).getYear()%><%}%>, <%= listdate.get(2).getMonth()%>, <%= listdate.get(2).getDay()%>,<%= listdate.get(2).getHour()%>,<%= listdate.get(2).getMinute()%>,<%= listdate.get(2).getSecond()%>),
                data: <%= com.telma.reporting.debit.Utils.getExtractDebits(path+element_select) %>
            }]

et rien ne s'affiche dans l'interface, j'obtient l'interface sans erreur mais quand je clic sur un bouton je n'obtient pas de graphe, on est presque.
Encore besoin d'un peu d'aide svp, pourquoi on n'obtient pas de date avec cela <%for(int i =0; i<listdate.size();i++){%><%= listdate.get(i).getYear()%><%}%>

[kawaiyush]

voila, ça marche, j'ai commis une erreur et voilà ça marche avec le même code, je n'ai pas besoin du boucle en fait,
je vous remercie beaucoup, vous m'avez aider les amis, bon je vais marquer ça comme résolu

a plus