如何使用canvas js从Servlet获取数据

时间:2015-01-08 17:56:10

标签: java javascript jsp servlets canvas

我正在使用canvas.js图表​​。我需要将日期从servlet填充到图表中。我已经尝试了一个过程,但数据没有进入Chart.I我发布了我试过的代码..

In the Jsp end

<html>
<head>
<title>Chart JS Library Demo</title>
<style>

 </style>
 </head>
<body>

 <canvas id="canvas" height="500" width="500"></canvas>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="Chart.min.js"></script>
<script type="text/javascript" src="ts-chart-script.js"></script>

 </body>
 </html>

我用来获取servlet的js

    var TUTORIAL_SAVVY ={

   /*Makes the AJAX calll (synchronous) to load a Student Data*/
  loadStudentData : function(){

   var formattedstudentListArray =[];

$.ajax({

  async: false,

  url: "StudentJsonDataServlet",

  dataType:"json",

  success: function(studentJsonData) {

console.log(studentJsonData);

 $.each(studentJsonData,function(index,aStudent){

    formattedstudentListArray.push([aStudent.mathematicsMark,aStudent.computerMark,aStudent.historyMark,aStudent.litratureMark,aStudent.geographyMark]);
 });
  }
});
    return formattedstudentListArray;
  },
  /*Crate the custom Object with the data*/
  createChartData : function(jsonData){

  console.log(jsonData);


   return {

    labels : ["Mathematics", "Computers", "History","Literature", "Geography"],

  datasets : [
     {
   fillColor : "rgba(255,0,0,0.3)",

  strokeColor : "rgba(0,255,0,1)",

  pointColor : "rgba(0,0,255,1)",

  pointStrokeColor : "rgba(0,0,255,1)",

  /*As Ajax response data is a multidimensional array, we have 'student' data in 0th position*/
  data : jsonData[0]
 }
]
  };
 },
  /*Renders the Chart on a canvas and returns the reference to chart*/
  renderStudenrRadarChart:function(radarChartData){

  var context2D = document.getElementById("canvas").getContext("2d"),

   myRadar = new Chart(context2D).

        Radar(radarChartData,{

           scaleShowLabels : false,

           pointLabelFontSize : 10
    });


   return myRadar;
 },
 /*Initalization Student render chart*/
  initRadarChart : function(){

   var studentData = TUTORIAL_SAVVY.loadStudentData();

  chartData = TUTORIAL_SAVVY.createChartData(studentData);

   radarChartObj = TUTORIAL_SAVVY.renderStudenrRadarChart(chartData);

     }
   };


$(document).ready(function(){

 TUTORIAL_SAVVY.initRadarChart();
});

我正在使用的Servlet

package com.servlet;

@WebServlet("/StudentJsonDataServlet")
public class StudentJsonDataServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public StudentJsonDataServlet() {
    super();
}

protected void doGet(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {

    List<Student> listOfStudent = getStudentData();

    Gson gson = new Gson();
    String jsonString = gson.toJson(listOfStudent);
    response.setContentType("application/json");
    response.getWriter().write(jsonString);

}

private List<Student> getStudentData() {

    List<Student> listOfStudent = new ArrayList<Student>();
    Student s1 = new Student();
    s1.setName("Sandeep");
    s1.setComputerMark(75);
    s1.setMathematicsMark(26);
    s1.setGeographyMark(91);
    s1.setHistoryMark(55);
    s1.setLitratureMark(36);
    listOfStudent.add(s1);

    return listOfStudent;
   }
}

学生班

public class Student {

private String name;
private int ComputerMark;
private int MathematicsMark;
private int GeographyMark;
private int HistoryMark;
private int LitratureMark;

public String getName() {
    return name;
}
public void setName(String name) {
    this.name = name;
}
public int getComputerMark() {
    return ComputerMark;
}
public void setComputerMark(int computerMark) {
    ComputerMark = computerMark;
}
public int getMathematicsMark() {
    return MathematicsMark;
}
public void setMathematicsMark(int mathematicsMark) {
    MathematicsMark = mathematicsMark;
}
public int getGeographyMark() {
    return GeographyMark;
}
public void setGeographyMark(int geographyMark) {
    GeographyMark = geographyMark;
}
public int getHistoryMark() {
    return HistoryMark;
}
public void setHistoryMark(int historyMark) {
    HistoryMark = historyMark;
}
public int getLitratureMark() {
    return LitratureMark;
}
public void setLitratureMark(int litratureMark) {
    LitratureMark = litratureMark;
}

}

这个代码我用作我的图表和servlet交互,但在日志中得到错误,它没有找到Gson。但我已经包含了jar。我正在使用gson-2.2.4.jar。< / p>

SEVERE: Servlet.service() for servlet [com.servlet.StudentJsonDataServlet] in context with path   [/jQueryMenu] threw exception [Servlet execution threw an exception] with root cause
java.lang.ClassNotFoundException: com.google.gson.Gson
at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1720)
at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1571)
at com.servlet.StudentJsonDataServlet.doGet(StudentJsonDataServlet.java:29)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:620)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:727)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:303)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:241)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:220)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:122)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:501)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:171)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:103)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:950)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:116)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:408)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1070)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:611)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:316)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1110)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:603)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Thread.java:722)

1 个答案:

答案 0 :(得分:0)

将Gson jar放在Tomcat找到它的位置并加载它。

来自Apache Tomcat documentation

  

为部署在其中的每个Web应用程序创建一个类加载器   单个Tomcat实例。所有解压缩的类和资源   Web应用程序的/ WEB-INF / classes目录,以及类和   您网站的/ WEB-INF / lib 目录下的 JAR文件中的资源   应用程序,对此Web应用程序可见,但不是   其他的。