i have created table taking 2 columns mysql database , converting json object sucessfully working fine m not getting idea how can plot bar chart using 2 column.it great helpful if 1 can guide me .. here code:
<%@ page language="java" import="java.sql.*"%> <%@ page language="java" import="org.json.jsonobject"%> <html> <head><title>read mysql database</title> <!doctype html> <script src="http://d3js.org/d3.v3.min.js"></script> <meta charset="utf-8"> </head> <body> <div align="center" width="85%"> <center> <table border="1" bordercolor="#ffe9bf" cellpadding="0" cellspacing="0" width="658" height="63"> <tbody> <% string driver = "org.gjt.mm.mysql.driver"; class.forname(driver).newinstance(); connection con=null; resultset rst=null; statement stmt=null; try{ string url="jdbc:mysql://localhost/sales?user=root&password=root"; int i=1; con=drivermanager.getconnection(url); stmt=con.createstatement(); rst=stmt.executequery("select * product limit 10"); jsonobject jsonobject = new jsonobject(); while(rst.next()){ jsonobject.put("sku"+i,rst.getstring(2)); %> <tr> <td bgcolor="#ffff98" valign="top" width="107" height="19"><%=rst.getstring(2)%></td> <td bgcolor="#ffff98" valign="top" width="270" height="19"><%=rst.getstring(4)%></td> </tr> <% i++; } string outputstring = jsonobject.tostring(); rst.close(); stmt.close(); con.close(); }catch(exception e){ system.out.println(e.getmessage()); } %> </tbody> </table> </center> </div> </body> </html>
from looks of code, creating single javascript object like:
jsonobject = {"sku1": "a string", "sku2": "another string"... d3.js though likes consume array of javascript objects:
jsonobject = [ { sku: "a string", othercolumn: 3 }, { sku: "another string", othercolumn: 4 } ... where "sku" column name , "othercolumn" value.
so, data in form should easy as:
jsonarray jsonarray = new jsonarray(); while(rst.next()){ jsonobject jsonobject = new jsonobject(); jsonobject.put("sku", rst.getstring(2)); jsonobject.put("othercolumn", rst.getint(4)); // assuming these numbers not strings or bar chart have nothing draw jsonarray.put(jsonobject); } // rest of java code here, close out connections, etc... %> <script> // switch on javascript , d3 // java variable javascript var javascriptdata = "<%out.print(jsonarray.tostring());%>"; // bar chart code goes here .... to create bar chart, take @ this sample code:
var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeroundbands([0, width], .1); var y = d3.scale.linear() .range([height, 0]); var xaxis = d3.svg.axis() .scale(x) .orient("bottom"); var yaxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10, "%"); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); x.domain(javascriptdata.map(function(d) { return d.sku; })); y.domain([0, d3.max(javascriptdata, function(d) { return d.othercolumn; })]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); svg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("othercolumn"); svg.selectall(".bar") .data(javascriptdata) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.sku); }) .attr("width", x.rangeband()) .attr("y", function(d) { return y(d.othercolumn); }) .attr("height", function(d) { return height - y(d.othercolumn); }); 
Comments
Post a Comment