Comment effacer un graph avant de recharger de nouvelles données (ajax)

Bonjour à tous

(je ne sais pas si mon problème est plus du jquery ou du ajax, sorry si je le postais au mauvais endroit)

J'utilise une excellente librairie http://www.chartjs.org/ pour afficher des mesures.

J'ai mis environs milles mesures dans une bas de donnée et quand la page est chargée, mon code va afficher les 100 dernières mesures.
Puis, si on veut on peut affciher d'autres mesures en sélectionnant une date.

Le problème que j'ai, est quand je charge ma page, j'ai bien des mesures du 25 novembre 2017.
Puis ensuite je veux afficher des mesures du 20 octobre 2017. Les mesures du 20 octobre s'affcihe, mais je constate que lorsque je passe ma souris sur le graph des températures (premier graph du lien ci-dessous), de temps en la graph " bouge" soudainement. En fait, j'ai constaté que lorsquîl bouge, il affcihe des données précédente.

Voic l'exemple: http://smart-idea.io/chart-step/

Sélectionnez les dates 20.11.2017 et 20.11.2017 pour la fin, et passer votre souris sur le premier graph.

Si vous êtes sous FF, regarder la console. Vous verrez ceci au chargement de la page

Citation:

---

data
ponds.js:137:17
Object { pond: 1, name: "pond7A", ID: 1, time: "2017-10-25 07:10:00", Waterlevel: 823.108, Waterlevel_normalized: 4.352, Heatflux_Shallow: 0, Heatflux_Bottom: 3.226, T_Air: 5.395, T_Surface: 10.73, … }
ponds.js:142:17
Object { pond: 1, name: "pond7A", ID: 1, time: "2017-10-25 07:00:00", Waterlevel: 823.125, Waterlevel_normalized: 4.369, Heatflux_Shallow: 0, Heatflux_Bottom: 3.248, T_Air: 5.36, T_Surface: 10.75, … }
ponds.js:142:17
Object { pond: 1, name: "pond7A", ID: 1, time: "2017-10-25 06:50:00", Waterlevel: 823.125, Waterlevel_normalized: 4.369, Heatflux_Shallow: 0, Heatflux_Bottom: 3.017, T_Air: 5.28, T_Surface: 10.79, … }
[...] et encore [...]

---

puis si vous charger les mesures du 20.10.2017, vous verrez un nouveau 'data' et dessous des messures du 20, SANS les mesure du 25.

Il semble que le graph, concerce les mesaures précédentes dans le cache ou je ne sais pas ou?

Ma question est donc simple, comment je peux effacer correctement mes mesures précédentes du graph pour laisser place au nouveau chargement?

Voyez-vous mon problème?

Voulez-cous d'autre information?
Pour le code, ici: http://smart-idea.io/chart-step/js/ponds.js

Voici un extrait à la ligne 102

Code:

---

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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

$.ajax({ context: document.body, //url: "json/pond7A.json", url: "get_measures.php", data : para, //data: { pond: pond, from: from, to: to }, dataType: 'json', type: 'POST',   error: function(e){ //$("#div1").html("error"); alert(e); }, success: function(data){ //$("#div1").html("Success"); chartData = data; }, complete: function(xhr,status){ //var measures = xhr.responseText; } }).done(function( data ) { if ( console && console.log ) { // console.log( "Sample of data:", data.slice( 0, 100 ) ); // console.log( "Sample of data:", data); }     if(data.length <=0) {   $( "#dialog" ).dialog(); } else { } console.log("data");   for(var i= 0; i < data.length; i++) {   console.log(data[i]);   data_wl.push(data[i]['Waterlevel']); data_wln.push(data[i]['Waterlevel_normalized']);   data_hfs.push(data[i]['Heatflux_Shallow']); data_hfb.push(data[i]['Heatflux_Bottom']);   data_ta.push(data[i]['T_Air']); data_ts.push(data[i]['T_Surface']); data_t30.push(data[i]['T_30mm']); data_t60.push(data[i]['T_60mm']); data_t100.push(data[i]['T_100mm']); data_t200.push(data[i]['T_200mm']); data_t500.push(data[i]['T_500mm']); data_t1200.push(data[i]['T_1200mm']);   data_ponds.push(data[i]['pond']);   data_m_time.push(data[i]['time']);   data_pond_name = data[i]['name'];   } [...] suite [...]

---

merci pour vos lumières

ton "code" en jQuery est complètement incohérent.
elle mélange du jQuery 1.4 et 3, et peut être même d'autres idées ?


Primo, quelle version de jQuery utilise tu ? ( les versions 3 ne supportent pas les vieux navigateurs , surtout des vieux IE )

Secondo : la doc : http://api.jquery.com/jQuery.ajax/

tu ne dois pas utiliser les méthodes success, complete et done en même temps, elles sont quasi équivalentes.

l


voila comment j'utilise un appel ajax appels et retour en json :
Est-ce que ton script php renvoit bien les bon entêtes proprement le format json en sortie est-il propre ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$.ajax({ url: 'get_measures.php', type: 'POST', data:para, // data: { pond: pond, from: from, to: to }, cache: false, dataType: 'json', error: function (request, error) { console.log(request.responseText); }, success: function (data) {   for(var i= 0; i < data.length; i++) {   console.log(data[i]);   data_wl.push(data[i]['Waterlevel']); data_wln.push(data[i]['Waterlevel_normalized']);   data_hfs.push(data[i]['Heatflux_Shallow']); data_hfb.push(data[i]['Heatflux_Bottom']);

---

Ok,j'ai juste regardé tes sources
tu utilise un jQuery v1.12.4 avec "" includes Sizzle.js " => la méthode done(data) n'y existe pas :roll:

avec du bootstrap 3 et sa librairie js sur une page html5... et d'autres librairies et des exemples de code en js...
c'est tout sauf cohérent...

Bonjour Psychadelic,

je te remercie pour tes onservation et je vais corrigé mon code pour qu'il soit cohérent. Je vais aussi recommancer de puis zero pour refaire cette partie de code proporement
Maintenant, il y a un truc que je n'arrive pas comprendre.
Si je vais sur la page de jquery https://jquery.com/ pour le télécharger, il propose la version 3.3.1 et il me semble donc logic de prendre cette derniere version.
Je souhaite aussi utiliser jqueryui http://jqueryui.com/ et la dernière version est 1.12.1, mais dessous, il est indiqué Jquery 1.7+.
Donc je suppose que jqueryUI fonction dès 1.7 mais ca fonctionne aussi avec Jquery3.3?
J'ai donc téléchargé jqueryUI 1.12.1 et dans le dossier, il y a un sous-dossier external, qui contient un dossier jquery qui lui a un fichier jquery.js. Dans ce dernier, il est indiqué jquery.1.12.4

Aussi quand je vais voir la source d'une xemple jqueryui, comme celui-ci:
http://jqueryui.com/datepicker/#date-range
il utilise jquery 1.12.4

Code:

---

1 2 3

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

---

et donc jquery 3.3.1, n'est pas utilisé.


Je suis donc un peu confus quant au bonne version à utiliser pour que ca fonctionne aussi avec bootsrap.

Donc, serait-il pls corhérent de faire comme ceci, pour partir sur le bon choix des librairies?

Code:

---

1 2 3 4 5 6 7 8 9

<!-- Jquery --> <script src="js/jquery-3.2.1.min.js"></script> <!-- JqueryUI --> <script src="js/jquery-ui-1.12.1/jquery-ui.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.min.js"></script> <!-- Chartjs--> <script src="js/Chart.js-master/Chart.2.4.0.min.js"></script> <script src="js/Chart.js-master/samples/utils.js"></script>

---

Puis je reconstruirait mon code jquery, étape par étape, car j'ai aussi constaté que ChartJS ne rafraichi pas le canvas quand je recharge de graph. Il faudraut que je reafsse ca proprement, un après l'autre...

Salut,

J'aimerais bien repartir sur cette base qui me permetterait de régler mon problème qui fait le sujet de post.
En effet, je pourrais
utiliser ceci

Code:

---

window.myLine.reload()

---

pour recharger mon graph en dehors de

Code:

---

$( window ).load(function()

---

mais j'ai pas encore testé

Pour le moment, j'aimerais refaire mon code plus propre notamment, en ce qui concerne la partie ajax. Tu m'as fais des suggestion, et j'aimerais savoir si je pars dans une bonne direction

Code:

---

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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

//setTimeout(function() { location.reload() },3600000); $(document).ready(function(){ /* cod qui va faire appel à get_data() pour mettre à jour et recharger mon graphique. */ });   $( window ).load(function() { // Au chargement de la page, j'extrait les 100 dernières points (Ce filtre se fait dans get_mesures.php var data = get_data(); console.log(data); // Ici ca affgiche bien les données   // Sélection mon cancas var ctx = document.getElementById("pond-0"); // charge la config var config = temperature(data); // Dans la config actulle, ceci ne va pas marcher, il faudra que j'adapte temperature() ne traite plus 'cicle' mais le contenu le data. Mais   // créé une instance et affiche mon graph window.myLine = new Chart(ctx, config); });   function get_data(para){ return $.ajax({ url: 'get_measures.php', type: 'POST', data:para, // data: { pond: pond, from: from, to: to }, cache: false, dataType: 'json', error: function (request, error) { console.log(request.responseText); }, success: function (data) { //return data; } });   }   function temperature(pointStyle, para) { /* traite para */   return { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", backgroundColor: window.chartColors.red, borderColor: window.chartColors.red, data: [10, 23, 5, 99, 67, 43, 0], fill: false, pointRadius: 10, pointHoverRadius: 15, showLine: false // no line shown }] }, options: { responsive: true, title:{ display:true, text:'Point Style: ' + pointStyle }, legend: { display: false }, elements: { point: { pointStyle: pointStyle } } } }; }

---

Mon questionnement se troune surtout vers la fonction get_data(). J'ai entendu qu'un fonction asynchrone (ajax) ne pouvais pas retourner une valeur avec return.
Mais comme je l'ai fait, il me retorune bien quelque chose

Code:

---

1 2	console.log(data); // Ici ca affgiche bien les données

---

il y a responseText et responseJSON qui sont intéressants.
Mais est-ce que get_data() me retourne bien les valeurs complètes quand ajax a passer par success: function (data)?

Citation:

---

{
"readyState": 4,
"responseText": "\n\n[{\"pond\":1,\"name\":\"pond7A\",\"ID\":1,\"time\":\"2017-10-25 07:10:00\",\"Waterlevel\":823.108,\"Waterlevel_normalized\":4.352,\"Heatflux_Shallow\":0,\"Heatflux_Bottom\":3.226,\"T_Air\":5.395,\"T_Surface\":10.73,\"T_30mm\":11.36,\"T_60mm\":11.36,\"T_100mm\":11.35,\"T_200mm\":11.36,\"T_500mm\":11.37,\"T_1200mm\":11.34},{\"pond\":1,\"name\":\"pond7A\",\"ID\":1,\"time\":\"2017-10-25 07:00:00\",\"Waterlevel\":823.125,\"Waterlevel_normalized\":4.369,\"Heatflux_Shallow\":0,\"Heatflux_Bottom\":3.248,\"T_Air\":5.36,\"T_Surface\":10.75,\"T_30mm\":11.36,\"T_60mm\":11.36,\"T_100mm\":11.35,\"T_200mm\":11.36,\"T_500mm\":11.37,\"T_1200mm\":11.37},{\"pond\":1,\"name\":\"pond7A\",\"ID\":1,\"time\":\"2017-10-25 06:50:00\",\"Waterlevel\":823.125,\"Waterlevel_normalized\":4.369,\"Heatflux_Shallow\":0,\"Heatflux_Bottom\":3.017,\"T_Air\":5.28,\"T_Surface\":10.79,\"T_30mm\":11.36,\"T_60mm\":11.37,\"T_100mm\":11.37,\"T_200mm\":11.37,\"T_500mm\":11.38,\"T_1200mm\":11.39},{\"pond\":1,\"name\":\"pond7A\",\"ID\":1,\"time\":\"2017-10-25 06:40:00\",\"Waterlevel\":823.125,\"Waterlevel_normalized\":4.369,\"Heatflux_Shallow\":0,\"Heatflux_Bottom\":3.088,\"T_Air\":5.089,\"T_Surface\":10.71,\"T_30mm\":11.4,\"T_60mm\":11.39,\"T_100mm\":11.4,\"T_200mm\":11.39,\"T_500mm\":11.41,\"T_1200mm\":11.4},{\"pond\":1,\"name\":\"pond7A\",\"ID\":1,\"time\":\"2017-10-25 06:30:00\",\"Waterlevel\":823.16,\"Waterlevel_normalized\":4.404,\"Heatflux_Shallow\":0,\"Heatflux_Bottom\":3.043,\"T_Air\":5.3,\"T_Surface\":10.78,\"T_30mm\":11.42,\"T_60mm\":11.42,\"T_100mm\":11.42,\"T_200mm\":11.42,\"T_500mm\":11.42,\"T_1200mm\":11.41}]",
"responseJSON": [
{
"pond": 1,
"name": "pond7A",
"ID": 1,
"time": "2017-10-25 07:10:00",
"Waterlevel": 823.108,
"Waterlevel_normalized": 4.352,
"Heatflux_Shallow": 0,
"Heatflux_Bottom": 3.226,
"T_Air": 5.395,
"T_Surface": 10.73,
"T_30mm": 11.36,
"T_60mm": 11.36,
"T_100mm": 11.35,
"T_200mm": 11.36,
"T_500mm": 11.37,
"T_1200mm": 11.34
},
{
"pond": 1,
"name": "pond7A",
"ID": 1,
"time": "2017-10-25 07:00:00",
"Waterlevel": 823.125,
"Waterlevel_normalized": 4.369,
"Heatflux_Shallow": 0,
"Heatflux_Bottom": 3.248,
"T_Air": 5.36,
"T_Surface": 10.75,
"T_30mm": 11.36,
"T_60mm": 11.36,
"T_100mm": 11.35,
"T_200mm": 11.36,
"T_500mm": 11.37,
"T_1200mm": 11.37
}
],
"status": 200,
"statusText": "OK"
}

---

Parec que la, je peux appeler cette fonction quand windows est chargé, puis ensuite dans $(document).ready(function(), je peux ajouter un truc comme ceci

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$(document).ready(function(){   $(form).change(function() { // Chais pas encore si ca fonction, mais voilà l'idée   $(this).submit(function( event ) {   event.preventDefault();   var formData = $(form).serialize();   var cal = get_data(formData); }); var ctx = document.getElementById("pond-0"); var config = temperature(cal); // Attention, ca ne fonctionnera pas. Il faudra que j'adapte temperature() pour qu'il n'ait plus a traiter "cicle". Mais ca ce n'est pas un probleme.. window.myLine.update(); });

---

});

Citation:

---

Envoyé par pierrot10

Si je vais sur la page de jquery https://jquery.com/ pour le télécharger, il propose la version 3.3.1 et il me semble donc logic de prendre cette derniere version.
Je souhaite aussi utiliser jqueryui http://jqueryui.com/ et la dernière version est 1.12.1, mais dessous, il est indiqué Jquery 1.7+.
Donc je suppose que jqueryUI fonction dès 1.7 mais ca fonctionne aussi avec Jquery3.3?

---

Ok, on va reprendre les principes du " Versioning ".

Au départ, pourquelquechose comme jQuery, les développeurs ont une idée imprécise de ce qu'il vont devoir réaliser, ce qui n’empêche pas d'avoir un but précis à atteindre.

Dans le cas de jQuery le but à atteindre est de pouvoir écrire un code unique capable de fonctionner sur n'importe quel navigateur. (parce que le JavaScript d'Internet explorer était différent du JavaScript mozilla, des méthodes js pouvaient réagir de manière différentes, etc..)

Donc, quand on se lance dans ce genre de projet, on crée une version Alpha, avec un premier numéro derrière.
Au bout d'une douzaine de versions Alpha, dont les fonctionnalités ont elles mêmes été repensées sans cesse, le groupe de développeurs finit par se fixer des lignes directrices et produit une première version Bêta.
Au fur et à mesure qu'ils étoffent, on en arrive à une trentaine de versions Bêta, jusqu'au une ultime qu'ils testent dans tous les sens; ils peut même ce faire qu'il se lancent dans une Bêta publique que des développeurs externes peuvent à leur tour tester ou utiliser, mais à leurs risque et péril, mais ça leur un super 'méga chi**" de test en grandeur nature.

Ils sortent une version Un. v 1.0.0 ( tada !)

Mais comme nous vivons dans un monde imparfait, ils finissent par ce rendre compte que quelque bugs fâcheux avaient échappé à leur vigilance.
Très vite ils sortent une nouvelle version corrigée la v 1.0.1 ( le dernier chiffre indique que le soft est strictement le même que la version précédente, mais avec des bugs (ou des failles) en moins.
Et en général, un bug en appelant un autre on en arrive vite à une v 1.0.456 ( ce qui ne signifie pas que 456 bugs ont été corrigés, mais qu'en corrigeant le bug 272, cela à eu pour effet de fragiliser une autre partie du code qui fonctionnait bien, et que l’équipe commence à devenir folle :mouarf:

Mais comme nous vivons dans un monde imprévisible, ils finissent par ce rendre compte qu'ils ont raté quelques belles idées, comme par exemple d'utiliser un adressage des éléments html d'une page en utilisant le même système de référencement du css, et que si en avaient eu l'idée plus tôt ils y a des tas de trucs qui n’aurait pas fait de la même manière, et que du coup ils en arrivent à greffer une technique étrangère sur leur propre code, avec les rustines et les bretelles que cela comporte.

C'est ce qui s'est passé avec jQuery 1.2 (?) quand ils ont pris conscience de l’existence de Sizzle.js, et qui n'a vraiment pris corps qu'avec la version v1.4 de jQuery
et qui n' a jamais été totalement satisfaisant au niveau de cette fusion, les version se sont enchaînée jusqu" ta 1.12.1 et peut être même plus loin ?

Sauf qu'entre temps du coté JavaScript les choses on commencée à bouger : le web s'imposait de plus en plus, Microsoft avait fini par exterminer Mozilla et le W3C à commencé à asseoir son autorité pour établir des règles sur la façon dont le JavaScript devait s'écrire et s'interpréter, idem sur la description des pages html.

Donc pendant que sortait la version 1.5.4 (?) les gars on aussi sorti une version 2.0, puis une 2.2, une 2.3, une 2.4.3 puis...

Mais comme nous vivons dans un monde instable, le W3C à de son coté à finalement réussi à mettre ses membres d'accord pour annoncer le HTML5, avec toute une feuille de route cohérente.

Donc du coté jQuery il à bien fallut digérer le truc pour abandonner les versions 2 pour passer à la version 3 qu'on connais aujourd'hui.

Comme du coté JavaScript il y a moins délire entre les navigateurs pour comprendre le JavaScript, et que la grande force de jQuery c'est surtout son système d'adressage (issu de Sizzle) plus 2 ou trois trucs d'origine, on en est à une version 3.3.1 qui pèse 87 ko , à comparer avec ta v 1.12.4 qui pèse 294ko (soit 3.5 fois plus) et qui est pensée pour fonctionner sur des HTML4 discordants.

Alors comme tu utilise de l'HTML5, je vois pas du tout l’Intérêt d'utiliser cette vielle version de jQuery qui n'est même plus supporté (et peut même éventuellement poser des problèmes de sécurité)

ce qui est aussi le cas de ton Bootstrap: tu utilises une version v3.3.5 alors pour la 3, Bootstrap en est à la v3.3.7, donc tu zappe des corrections ( qui sont rarement faites pour des prunes)


Coté jQuery-UI, le problème est différent.

Il ne peut fonctionner "que si" jQuery est présent et que ce dernier soit au moins d'une version supérieure ou égale à un jQuery 1.7.

Ta question est tout de même étrange : les mecs de jQuery-UI vérifient à chaque nouvelle version de jQuery si tous leurs trucs restent compatibles (ils ont des séries de test-units spécialement faites pour ça)
Alors oui jQuery-UI fonctionne avec la 3.3.1 et même forcément mieux, parce qu'il peut utiliser les fonctions jQuery super optimisées de la version 3.

Au passage, jQuery-UI est une bibliothèque ultra gourmande re ressource, et dans 99% des cas les dev ne préfèrent charger que les extensions de jQuery-UI dont ils ont juste besoin et pas les 36 milles autres ( en utilisant le bouton : jQuery custom downLoad ).

Citation:

---

Envoyé par pierrot10

Mais est-ce que get_data() me retourne bien les valeurs complètes quand ajax a passer par success: function (data)?

---

Nan,

ta fonction get_Data sort de nullle part et ne sert à rien.

la méthode success fait elle même appel à une fonction anonyme dont l'argument est ici nommé data

c'est un " : " qui est écrit après le mot " succes " Tu a une mauvaise interprétation du javascript toi !

On est dans un objet Javascript, cad une description pour l'interpréteur js, à la sauce jQuery.

Elle dit ;
" en cas de success " voici la fonction à réaliser et pour laquelle le process Ajax doit y envoyer ses données dans l'argument de la fonction décrite.

la valeur de data y est donc renseignée et contient tout ton retour AJAX, dedans.

Méfie toi, tu donnes des sens complètement faux et impossibles.
Déjà tes remarques sur le versioning, et maintenant sur juste une description d'objet Javascript !