bonjour,
J'utilise l'API de Javascript pour afficher des graphes a partir d'une base de donnée. l'affichage se fait a merveille (j'ai suivi un tutorial) avec les axes et c'est un graphe dynamique bien evidemment. J'aimerai bien ajouter une option qui modifie ce graph, j'ai suivi aussi un tutorial et ca ne marche pas
J'ai deja implementé le code et je pense qu'il doit y avoir quelques lacunes,
voici le code du load du graphe:
et voici le code du showoptions:
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46 load: function(options){ var popUpId = "#popup" + options.id; var chartId = "mapJqPlot" + options.id; console.log("Ourseries ", options.data.series); var ttString = '<b><i><span style="font-size:8pt">#serieLabel#</span></i><span style="font-size:8pt; color:#000"> %s</span></b>'; if(options.data.values.length > 0){ $(popUpId).html('<div id="' + chartId + '" style="height:96%; margin:0 auto"></div>') .removeClass("loading").addClass('ui-widget-content ui-dialog-content'); $.jqplot.config.enablePlugins = true; OLM.jqPlotHolder[options.id] = $.jqplot( chartId, options.data.values, { seriesDefaults: { fill: false, showMarker: false }, series: options.data.series , axesDefaults:{useSeriesColor: true}, axes:$.extend(OLM.jqPlot.axesObject, options.data.axis), highlighter: { tooltipLocation: 'n', tooltipAxes: 'y', bringSeriesToFront:true, tooltipFormatString: ttString, useAxesFormatters: false }, cursor:{ showTooltip: false, zoom:true }, grid:{ gridLineWidth:1.0, borderWidth:2.5, shadow:true }, legend: { show: true , location: 'se', // compass direction, nw, n, ne, e, se, s, sw, w. placement: "outside" } }); OLM.jqPlot.toggleSeries(options.id); } else{ OLM.popupNoData(popUpId); } },
Le showoptions devrait modifier les dates d'entree et sortie, definir l'intervalle d'affichage, choisir le nombre de courbes a afficher ..
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
28
29
30
31
32
33
34
35
36 showOptions: function(){ var popupId = $(this).parent().parent().parent().attr('aria-labelledby').replace('ui-dialog-title-popup',''); $('#SCADAdates').dialog({modal:true, buttons: { "Refresh": { rel:"localize[refresh]", text: "Refresh", click:function() { var text = $('#ui-dialog-title-popup' + popupId).find('span:eq(1)').text(); var dash = $('option:contains("' + text + '")', "#dashList").val(); OLM.popUpList[popupId].startDate = $('#dashBoardStartDate').val(); OLM.popUpList[popupId].endDate = $('#dashBoardEndDate').val(); OLM.popUpList[popupId].dataLimit = OLM.dataLimit; OLM.popUpList[popupId].adjust = $('#showAdjusted').is(':checked'); OLM.popUpList[popupId].grouping = $('#groupingBox').val(); var t0=$('#tBatte').is(':checked'); var t1=$('#tGSMLe').is(':checked'); var t2=$('#tTempe').is(':checked'); OLM.jqPlot.displaySeries[popupId] = { 0:t0, 1:t1, 2:t2 }; OLM.updatePopup({id:popupId, dash:dash}); $(this).dialog("close"); } } }, open: function(){ mGui.setLangauge(); } }); } },
J'espere bien avoir de l'aide et merci d'avance![]()
Partager