如何在javascript文件中使用json列表文件来绘制堆积条形图

时间:2013-06-19 09:54:06

标签: javascript jquery json list jqplot

我在我的java类中使用了list并且我成功地从数据库中检索了值并将其显示在表中,现在我想在堆积条形图中显示这些列表值,所以我使用了Json。一旦我运行java类,它将在F盘中创建file.json,所以现在我如何使用该文件并在jsp中显示这些列表值。

这是我的java类。

package com.rashmi.action;

import java.sql.*;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;
import java.io.FileWriter;
import java.io.IOException;
import com.google.gson.Gson;

public class FebruaryAction {

List abc = new ArrayList();


public List getAbc() {
return abc;
}
public void setAbc(List abc) {
this.abc = abc;
}


public String execute() throws Exception {

Connection con = GetCon.getCon();
Statement statement = con.createStatement();
ResultSet resultset = statement.executeQuery("SELECT MarketPlace,OrderDate, ROUND(SUM(Total),2),  COUNT(*) , ROUND(ROUND(SUM(Total),2)/ COUNT(*),2) FROM vend_printed WHERE OrderDate >= '2013-02-01' AND OrderDate <= '2013-02-28' AND MarketPlace= 'AUK' GROUP BY OrderDate,MarketPlace");

while (resultset.next()) {
String marketplace = resultset.getString(1);
String orderdate = resultset.getString(2);
Double datamount = resultset.getDouble(3);
Integer count = resultset.getInt(4);
Double result = resultset.getDouble(5);

ReportClass a = new ReportClass();
a.setMarketplace(marketplace);
a.setOrderdate(orderdate);
a.setDataamount(datamount);
a.setCount(count);
a.setResult(result);
abc.add(a);
String json = new Gson().toJson(abc);
try {

FileWriter writer = new FileWriter("F:\\file.json");
writer.write(json);

writer.close();

} catch (IOException e) {
e.printStackTrace();
}


}

我的jsp页面

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@page import="java.sql.*,javax.*" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.rajesh.action.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>January</title>
</head>
<body>
<h1>Report for January</h1>

<body>
<table border="1" >
<tr>
<th>Market</th>
<th>Jan-01</th>
<th>Jan-02</th>
<th>Jan-03</th>
<th>Jan-04</th>
<th>Jan-05</th>
<th>Jan-06</th>
<th>Jan-07</th>
<th>Jan-08</th>
<th>Jan-09</th>
<th>Jan-10</th>
<th>Jan-11</th>
<th>Jan-12</th>
<th>Jan-13</th>
<th>Jan-14</th>
<th>Jan-15</th>
<th>Jan-16</th>
<th>Jan-17</th>
<th>Jan-18</th>
<th>Jan-19</th>
<th>Jan-20</th>
<th>Jan-21</th>
<th>Jan-22</th>
<th>Jan-23</th>
<th>Jan-24</th>
<th>Jan-25</th>
<th>Jan-26</th>
<th>Jan-27</th>
<th>Jan-28</th>
<th>Jan-29</th>
<th>Jan-30</th>
<th>Jan-31</th>
</tr>

<tr>
<td rowspan="3">AUK</>
<c:forEach items="${abc}" var="item">
<td>${item.count}</td>
</c:forEach>
</tr>
<tr>
<c:forEach items="${abc}" var="item">
<td>${item.dataamount}</td>
</c:forEach>
</tr>

<tr>
<c:forEach items="${abc}" var="item">
<td>${item.result}</td>
</c:forEach>
</tr>


</table>

<script type="text/javascript" src="plugins/jquery.js"></script>
<script type="text/javascript" src="plugins/jquery.min.js"></script>
<script type="text/javascript" src="plugins/jquery.jqplot.js"></script>
<script type="text/javascript" src="plugins/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js">  </script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.canvasOverlay.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/excanvas.js"></script>
<script type="text/javascript" src="plugins/excanvas.min.js"></script>
<link href="plugins/jquery.jqplot.css"  rel="stylesheet" />
<link href="plugins/jquery.jqplot.min.css"  rel="stylesheet" />
<body>

<span id="info3">Nothing yet.</span>
<div id="chart3" style="height:900px;width:1300px; "></div>
<script type="text/javascript">
$(document).ready(function(){
var s1 = [];
var s2 = [];
var s3 = [];

<c:forEach var="temp" items="${abc}">
s1.push('${item.result}');
</c:forEach>

<c:forEach var="temp" items="${abc}">
s2.push('${item.count}');
</c:forEach>

<c:forEach var="temp" items="${abc}">
s3.push('${item.dataamount}');
</c:forEach>




var axisDates = ["Jan 1", "Jan 2", "Jan 3","Jan 4","Jan 5","Jan 6","Jan 7","Jan  8","Jan 9","Jan 10","Jan 11","Jan 12","Jan 13","Jan 14","Jan 15","Jan 16","Jan 17","Jan  18","Jan 19","Jan 20","Jan 21","Jan 22","Jan 23","Jan 24","Jan 25","Jan 26","Jan  27","Jan28","Jan 29","Jan 30","Jan 31"]


plot3 = $.jqplot('chart3', [s1, s2, s3], {

stackSeries: true,
varyBarColor: true,


captureRightClick: true,

animate : !$.jqplot.use_excanvas,
seriesDefaults : {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barPadding : 20, 


barMargin : 25, 

barDirection : 'vertical',
barWidth : 30,

shadowOffset : 4,
highlightMouseOver: true   
}, 
pointLabels: {show: true}
},
axes: {xaxis: {
renderer: $.jqplot.CategoryAxisRenderer, ticks: axisDates

},
yaxis: {min:0, max: 2300

}
},

legend: {
show: true,
location: 'e',
placement: 'outside'
}     
});
  // Bind a listener to the "jqplotDataClick" event.  Here, simply change
  // the text of the info3 element to show what series and ponit were
  // clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

在jsp中进行ajax调用,在javascript中获取json响应后,使用jit将数据呈现为bargraph