ChartJS来自Java程序的折线图或条形图

Question

I have a MVC design java program which returns Year wise counts of a given table from two different databases, I have returned three lists (Years, OracleCounts and HiveCounts) from databases. Right now I have come till returning these three lists to the servlet from database after the user selects a drop down option from a JSP page, however I am not sure how to display the chart js graph (either line or bar graph) in the jsp page. I would like to display years (range would be from 2000 to 2016) in X-axis and counts in Y-axis with two bars one for each database.

JSP code as below

 <table>
  <tr>
  <td>
    <div class ="canvasdemochartjs">
          <select class="selectClass" name="CHARTJSDEMO" id="CHARTJSDEMO" >
    <option value="none">-- Select a Table --</option>
    <option value="XXCSS_O.XXCSS_IBAE_SxxxT">XXCSS_O.XXCSS_</option>
     </select>

    </div>
   <canvas id="canvasdemo" height="300" width="300"></canvas>
   <div class=""  id="result1" style="display: none"  ></div>
  </td>
  </tr>
  </table>

JQuery:

$(document).ready(function() {
$('#CHARTJSDEMO').change(function() {
  var CHARTJSDEMORUNOPTION = $('#CHARTJSDEMO').val();
  var chartData = {
          labels: [], // currently empty will contain all the labels for the data points
          datasets: [
            {
              label: "Oracle",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [] // currently empty will contain all the data points for bills
            },
            {
              label: "Hive",
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [] // currently empty will contain all the data points for bills
            }
          ]
        };  

$.ajax({
type:'POST',    
url: "DemoChartJS",
data: {CHARTJSDEMORUNOPTION: CHARTJSDEMORUNOPTION},
cache: false,
success: function(result) {
     alert("inside jquery"+result);
    $.each(result , function (index, value){
        console.log(value);
        alert("inside first list: "+value)

var ctx = document.getElementById("canvasdemo").getContext("2d");
    ctx.canvas.width = 1000;
    ctx.canvas.height = 800;

    var myChart = new Chart(ctx).Bar(chartData);
 }
});
});
});

Servlet:

@SuppressWarnings("rawtypes")
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub

    int num = Integer.parseInt(request.getParameter("CHARTJSDEMORUNOPTION"));
    System.out.println("option in dopost: "+num);
    response.setContentType("text/html");
    List CompositeList =new ArrayList();
    ChartJSDemo_Implementation ChartJSDemo =new ChartJSDemo_Implementation();

    CompositeList=ChartJSDemo.GetCountsData("XXCSS_O.XXCSS_IBAE_SxxT", "xxxxx", "xxxxx", "xxxxxx$");



}

I referred here and here but could not understand how to pass the data from servlet to Jquery

After few browsing I tried to print the data from servlet to Jquery it prints as expected, showing three lists, however I could not iterate it and push it to chart data

Answer 1

@Vinod your Servlet code is wrong. Why are you calling doGet() method inside doPost() ?

And the content type returned should be application/json not text/html.

Define a PrintWriter & write the data in the format your canvas chart expects. Typically as a key value pair.