Home Forums Chart Support Canvas.js not showing columns

Canvas.js not showing columns

Viewing 4 posts - 1 through 4 (of 4 total)
  • #22174

    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>>();
        Connection connection = null;
        connection = DriverManager.getConnection("jdbc:mysql://", "root", "root");
        PreparedStatement pst2 = null;
        ResultSet resultset2 = null;
        String sql9 = "SELECT <code>ordered_items</code>.ItemID, COUNT(<code>ordered_items</code>.ItemID) AS id, <code>items</code>.ItemName FROM db.<code>ordered_items</code> INNER JOIN db.<code>items</code> ON <code>ordered_items</code>.ItemID=<code>items</code>.ItemID GROUP BY ItemID ORDER BY ItemID DESC;";
        pst2 = connection.prepareStatement(sql9);
        resultset2 = pst2.executeQuery();
      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);
            dataPoints = gsonObj.toJson(list);
        }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>
            <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,
                        title: {
                            text: "Rate of Sale of goods"
                        axisY: {
                            suffix: "%"
                        axisX: {
                            title: "Items"
                        data: [{
                                type: "column",
    //                            yValueFormatString: "#,##0\"%\"",
                                dataPoints: <%out.print(dataPoints);%>
                <% } %>
        <body style=" overflow-y: scroll;" id="page">
            <div id="chartContainer" style="height: 370px; width: 100%;"></div>
            <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

    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.



    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}.

    Vishwas R
    Team CanvasJS


    Thanks. Works well. :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.