FORUMS

Select any forum below to ask question

Home › forums › Using CanvasJS › Canvas.js not showing columns

This topic contains 3 replies, has 2 voices, and was last updated by  annewangari18 1 year ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • 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 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();

    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.

    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. :)

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.