Home › forums › Chart Support › Canvas.js not showing columns
Hi. I’m new to canvas.js. I’m trying to create a column chart using jsp and mysql database, but the columns are not showing. Please help. Below is my code.
<%@page contentType=”text/html” pageEncoding=”UTF-8″%> <%@ page import=”java.sql.*” %> <%@ page import=”java.util.*” %> <%@ page import=”com.google.gson.Gson”%> <%@ page import=”com.google.gson.JsonObject”%> <% Gson gsonObj = new Gson(); String dataPoints = null; Map<Object, Object> map = null; List<Map<Object,Object>> list = new ArrayList<Map<Object,Object>>();
try{ Connection connection = null; Class.forName(“com.mysql.jdbc.Driver”); connection = DriverManager.getConnection(“jdbc:mysql://127.0.0.1:3306/db”, “root”, “root”); PreparedStatement pst2 = null; ResultSet resultset2 = null;
String sql9 = “SELECT ordered_items.ItemID, COUNT(ordered_items.ItemID) AS id, items.ItemName FROM db.ordered_items INNER JOIN db.items ON ordered_items.ItemID=items.ItemID GROUP BY ItemID ORDER BY ItemID DESC;”; pst2 = connection.prepareStatement(sql9); resultset2 = pst2.executeQuery();
ordered_items
items
while (resultset2.next()) { int ItemID = Integer.parseInt(resultset2.getString(2)); String ItemName = resultset2.getString(3); map = new HashMap<>(); map.put(“x”, ItemName); map.put(“y”, ItemID); list.add(map);
} dataPoints = gsonObj.toJson(list); System.out.println(dataPoints); connection.close(); }catch(SQLException e){ out.println(“<div style=’width: 50%; margin-left: auto; margin-right: auto; margin-top: 200px;’>Could not connect to the database. Please check if you have mySQL Connector installed on the machine – if not, try installing the same.</div>”); dataPoints = null; } %>
<!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> <title>Track Sales</title>
<script type=”text/javascript”> window.onload = function () { <% if(dataPoints != null) { %> var chart = new CanvasJS.Chart(“chartContainer”, { animationEnabled: true, exportEnabled:true, title: { text: “Rate of Sale of goods” }, axisY: { suffix: “%” }, axisX: { title: “Items” }, data: [{ type: “column”, // yValueFormatString: “#,##0\”%\””, dataPoints: <%out.print(dataPoints);%> }] }); chart.render();
<% } %> chart.render(); }; </script> </head> <body style=” overflow-y: scroll;” id=”page”>
<div id=”chartContainer” style=”height: 370px; width: 100%;”></div> <script type=”text/javascript” src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script> </body> </html>
Kindly assist.
When I print out the dataPoints, this is what I get….. [{“x”:”Panga”,”y”:10},{“x”:”Wheelbarrow”,”y”:5},{“x”:”Mop”,”y”:4},{“x”:”Soft Broom”,”y”:5},{“x”:”Black Bucket”,”y”:14},{“x”:”4 Litres Crown Floor Paint”,”y”:6},{“x”:”1 Litre Crown Gloss Paint”,”y”:3},{“x”:”4 Litres Crown Gloss Paint”,”y”:9},{“x”:”Wall Cure Cement”,”y”:2},{“x”:”White Portland Cement”,”y”:7},{“x”:”Brillient Cement”,”y”:2},{“x”:”Premium Portland Cement”,”y”:8},{“x”:”Hanson Cement”,”y”:12},{“x”:”Lehigh Cement”,”y”:4},{“x”:”Simba Cement”,”y”:3},{“x”:”Savannah Cement”,”y”:1},{“x”:”Blue Triangle Cement”,”y”:11},{“x”:”Paint brush 6\u0027″,”y”:3},{“x”:”S-trap toilet”,”y”:5},{“x”:”P-trap toilet”,”y”:1},{“x”:”25 mm pressure pipe “,”y”:10},{“x”:”50 mm conduit pipe”,”y”:5},{“x”:”4 PVC waste pipe (M/G)”,”y”:11},{“x”:”4 PVC waste pipe (H/G)”,”y”:13}]. It seems my data is fine but why is my graph empty without columns? The y axis shows the numbers but the x axis is blank plus no columns are seen. Kindly assist.
@annewangari18,
X-Value can either be number or date-time whereas label can be string. Changing x to label should work fine in your case i.e. {"label":"Panga","y":10} instead of {"x":"Panga","y":10}.
{"label":"Panga","y":10}
{"x":"Panga","y":10}
— Vishwas R Team CanvasJS
Thanks. Works well. :)
You must be logged in to reply to this topic.