Home forums Using CanvasJS Query

This topic contains 8 replies, has 3 voices, and was last updated by  Vishwas R 2 months, 3 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #24363

    My requirement is.
    I have one table with column like DateTime,var1,var2,va3,var5 and so on
    I want to create line chart
    DateTime on x axis
    and
    var1 ,var2 so on values on y axis..
    using jsp and canvasjs
    in eclipse kepler

    I had asked for the help for the above requirement.
    And thanks for you all,and have also solved this,
    now the issue is that
    The code has worked, just the thing is its just accepting date and not accepting/taking time. and because of that the line graph is overlapping
    As my data consists of date and time in the first column. the date will be same for 10 to 15 rows, but the time differs. And as its not accepting the time the graph is not getting plotted properly. Because as on x-axis i am taking date and time(1st column) and remaining on y-axis. because of time issue the graph is not proper

    #24372

    @nikita-j,

    Can you please share the sample project along with the sample database over the Google-Drive or One-Drive so that we can look into the code, understand the scenario better and help you out?

    ____
    Shashi Ranjan
    Team CanvasJS

    #24374

    Can I send the code which i am working on, here itself??

    #24375

    <%@ page language=”java” contentType=”text/html; charset=UTF-8″
    pageEncoding=”UTF-8″%>
    <%@ page import=”java.util.*,java.sql.*”%>
    <%@ page import=”com.google.gson.Gson”%>
    <%@ page import=”com.google.gson.JsonObject”%>
    <%@ page import=”java.text.SimpleDateFormat”%>
    <%@ page import=”java.util.Date”%>
    <!– ========================================================================================================================= –>
    <%
    HashMap resultMap = new HashMap();
    try{
    Class.forName(“com.mysql.jdbc.Driver”);
    Connection connection = DriverManager.getConnection(“database path”, “username”, “password”);
    String table = (String)request.getAttribute(“FINAL_TABLE_NAME”);
    //String sql = “SELECT * FROM ” + table + “;”;
    String sql = “SELECT * FROM sampletime”;
    Statement statement = connection.createStatement();
    ResultSet rs = statement.executeQuery(sql);
    ArrayList data = new ArrayList();
    ResultSetMetaData rsmd = rs.getMetaData();
    for (int i = 1; i < rsmd.getColumnCount(); i++) {
    HashMap dataMap = new HashMap();
    ArrayList list = new ArrayList();
    String dataPoints = null;
    Gson gson = new Gson();
    rs.beforeFirst();
    while (rs.next()) {
    HashMap<String, Object> map = new HashMap();
    String date = rs.getString(1);
    SimpleDateFormat formater = new SimpleDateFormat(“yyyy-M-dd HH:mm”);
    Date dt = formater.parse(date);
    long l = (long) dt.getTime();
    double d = (double) l;
    map.put(“x”, d);
    map.put(“y”, Double.parseDouble(rs.getString(i + 1)));
    list.add(map);
    dataPoints = gson.toJson(list);
    }
    dataMap.put(“type”, “line”);
    dataMap.put(“xValueType”, “dateTime”);
    dataMap.put(“dataPoints”, “<%out.print(” + dataPoints + “);%” + “>”);
    data.add(dataMap);
    }
    resultMap.put(“data”, data);
    out.println(resultMap.get(“data”));
    }catch(SQLException e){
    e.printStackTrace();
    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>”);
    }
    %>
    <!– ***************************************************************************************************************** –>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
    <script type=”text/javascript”>
    window.onload = function() {
    <%if(resultMap != null)
    {%>
    var chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled : true,
    exportEnabled : true,
    title : {
    text : “JSP Column Chart from Database”
    },
    data : <%out.println(resultMap.get(“data”));%>

    });

    chart.render();
    <%}%>

    }
    </script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 370px; width: 100%;”></div>

    </body>
    </html>

    #24399

    @nikita-j,

    Thanks for sharing the code. We are unable to reproduce the issue you are facing as we don’t have the database sample shared with us. Can you kindly share JSP page and sample database over Google-Drive or Onedrive, so that we can run it locally, understand the issue you are facing and help you resolve it? It would be helpful for us to setup the project locally and run it, if you could export the project as .war / archive along with sample database and share it with us.


    Vishwas R
    Team CanvasJS

    #24400

    ok…have mailed it

    #24401

    This all must be dynamic.
    Which is not coming

    #24420

    Actually the content in header of the table is not same( means the field names) it varies according to the selected file.
    That the reason i am getting the issue in making a dynamic chart
    bcz the field names are not constant. I want that the column which I want from database that should be fetched and only that fetched columns graph must be displayed

    #24423

    @nikita-j,

    We are yet to receive mail from your side regarding this issue. I request you to upload sample project along with sample database to Google-Drive / Onedrive and share the link over here, so that we can look into your code and help you out?


    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.