Jquery et Ajax pour la récupération des données utilisées pour la mise en œuvre des graphiques + HTML - jquery, html, ajax, highcharts

Je dois tracer un graphique du temps et de la valeur provenant d'une requête ajax, j'ai besoin de savoir comment afficher les données sur les highcharts, veuillez trouver le code ci-dessous:

JSP POUR OBTENIR DES DONNÉES:

<%@ page import = "com.qdx.eqc.vo.*, com.qdx.eqc.proxy.EQCProxyClient, java.util.*" %>
<%

System.out.println("Inside landingAjax.jsp");
String productionID = request.getParameter("productionID");
System.out.println("productionID = "+productionID);
String instrumentID = request.getParameter("instrumentID");
System.out.println("instrumentID = "+instrumentID);
String testId = request.getParameter("testId");
System.out.println("testId = "+testId);
String instrType = request.getParameter("instrType");
System.out.println("instrType = "+instrType);
String testInstrTypeId = request.getParameter("testInstrTypeId");
System.out.println("testInstrTypeId = "+testInstrTypeId);
String departmentId = request.getParameter("departmentId");
System.out.println("departmentId = "+departmentId);

EQCProxyClient client = new EQCProxyClient();
ResponseVO responseVO = null;

//Graph data for patinetbias START
responseVO = client.getPatientBiasData(productionID,instrumentID,testId,instrType,testInstrTypeId,"7.0",departmentId);
ArrayList xAxis = new ArrayList();
ArrayList lines = new ArrayList();
ArrayList dateTime = new ArrayList();
ArrayList doubleValue = new ArrayList();
Date duration = new Date();
Iterator itt=responseVO.getResponse().iterator();
while(itt.hasNext()){
PatientBiasDataVO po = (PatientBiasDataVO)itt.next();
xAxis = po.getPatientBiasData();
Iterator biasItr = xAxis.iterator();
while(biasItr.hasNext())
{
BiasDataVO biasData = (BiasDataVO)biasItr.next();
if(biasData.getStrDateTime()!=null)
{
dateTime.add(biasData.getStrDateTime());

}
doubleValue.add(biasData.getValue());

}
lines = po.getVerticalLines();
duration = po.getDateTime();
System.out.println(" xAxis "+ xAxis + " lines " + lines + "duration" + duration );
}
out.print(doubleValue.toString()+","+dateTime.toString()); /// THESE IS THE GRAPH DATA as VALUE AND TIME

%>

JAVASCRIPT POUR AJAX ET HIGHCHARTS:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){alert("came in");
var options = {
chart: {
renderTo: "right1",
type: "spline",
marginRight: 10,
},
credits: {
enabled: false
},
title: {
text: "Patient Bias Display"

},
xAxis: {
type: "datetime",
tickPixelInterval: 150
},
yAxis: {
title: {
text: "Bias"
},
plotLines: [{
value: 0,
width: 1,
color: "#808080"
}]
},
tooltip: {
formatter: function() {
return "<b>"+ this.series.name +"</b><br/>"+
Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) +"<br/>"+
Highcharts.numberFormat(this.y, 2);
}

},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
color: "#F3F70E"
},
series: []

};

var productionID = document.getElementById("productionID").value;
var instrumentID = document.getElementById("instrumentID").value;
var testId = document.getElementById("testId").value
var instrType = document.getElementById("instrType").value;
var testInstrTypeId = document.getElementById("testInstrTypeId").value;
var departmentId = document.getElementById("departmentId").value;

var url = "landingAjax.jsp";
url = url+"?productionID="+productionID+"&instrumentID="+instrumentID+"&testId="+testId+"&instrType="+instrType+"&testInstrTypeId="+testInstrTypeId+"&departmentId="+departmentId;
alert(url);
$("#highCharts").click(function() {alert("clicked"); // CLICKED is alerted
$.getJSON(url, function(data) {alert(url);    //THis alert doesnt work

Comment remplir les données dans l'axe X et l'axe Y ??
var series = {données: []};

                        options.series.push(series);

var chart = new Highcharts.Chart(options);
});
});
});
</script>

J'ai besoin de savoir comment accumuler des données dans les axes x et y pour tracer le graphique, veuillez vous référer à mes commentaires ci-dessus.

Aidez-moi les gars .. si quelque chose n'est pas compris; s'il vous plaît avoir dans les commentaires ... Merci !!!

Réponses:

0 pour la réponse № 1

voici comment je le fais à ma façon ... vous trouverez peut-être une meilleure façon de le faire

• je fais un appel javascript ajax au serveur
• mettez votre graphique dans une fonction, appelez-le comme ça drawchart()
• transmettez votre rappel à cette fonction

remarquer

pour remplir l'axe x, vous devez finir par avoir un tableau qui ressemble à ceci

     xAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},

et pour chaque élément de ce tableau, vous devez passer une valeur à votre series data[1,2,3,....]

EXEMPLE

    $.ajax({
type: "POST",
url: "YOUR WEB SERVICE ",
data: "",
dataType: "json",
contentType: "application/json; charset=utf-8",

success: function (myvalue) {
drawchart(myvalue) ;

}});

vous devez également lire ce

---