Home › Forums › Chart Support › Canvas.js not showing columns

Canvas.js not showing columns

Viewing 4 posts - 1 through 4 (of 4 total)
  • August 9, 2018 at 12:01 pm #22174

    annewangari18

    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 <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);
        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://cdn.canvasjs.com/canvasjs.min.js"></script>
    </body>
</html>

    Kindly assist.

    August 9, 2018 at 8:49 pm #22182

    annewangari18

    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.

    August 10, 2018 at 9:41 am #22184

    Vishwas R

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

    —
    Vishwas R
    Team CanvasJS

    August 10, 2018 at 11:11 am #22188

    annewangari18

    Thanks. Works well. :)

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

You must be logged in to reply to this topic.