Home forums Using CanvasJS Dynamic LineChart Using Database Multiple Column

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #24422

    <%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
    pageEncoding=”ISO-8859-1″%>
    <%@ page import=”java.util.Date”%>
    <%@ page import=”java.text.SimpleDateFormat”%>
    <%@ page import=”com.google.gson.Gson”%>
    <%@ page import=”com.google.gson.JsonObject”%>
    <%@ page import=”java.util.*,java.sql.*”%>

    <%
    HashMap resultMap = new HashMap();
    String dataPoints = null;
    try{
    Class.forName(“com.mysql.jdbc.Driver”);
    //Connection connection = DriverManager.getConnection(“DBLINK”, “username”, “password”);

    String table = (String)request.getAttribute(“FINAL_TABLE_NAME”);

    String sql = “SELECT * FROM sampletime”;
    Statement statement = connection.createStatement();
    ResultSet rs = statement.executeQuery(sql);
    ArrayList data = new ArrayList();
    ResultSetMetaData rsmd = rs.getMetaData();
    out.println(“*”+rsmd.getColumnCount()+”*”);
    for (int i = 1; i < rsmd.getColumnCount(); i++)
    {
    HashMap dataMap = new HashMap();
    ArrayList list = new ArrayList();

    Gson gson = new Gson();

    rs.beforeFirst();
    while (rs.next())
    {
    HashMap<String, Object> map = new HashMap();

    String date = rs.getString(1);
    SimpleDateFormat formater = new SimpleDateFormat(“dd-M-yyyy 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 + “);%” + “>”);
    //dataMap.put(“dataPoints”, ” 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 charset=”ISO-8859-1″>
    <script type=”text/javascript”>
    window.onload = function()

    {
    <%if(resultMap != null)
    {%>
    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    animationEnabled : true,
    exportEnabled : true,
    title :
    {
    text : “Project Name”
    },
    data :
    {
    type : “line”, //change type to bar, line, area, pie, etc
    xValueType : “dateTime”,
    dataPoints :
    <%– <%out.println(resultMap.get(“data”));%>, –%>
    <%out.println(dataPoints);%>

    }

    });

    chart.render();

    <%}%>

    }
    </script>

    <title>Insert title here</title>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 370px; width: 100%;”></div>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    <div class=”loader”></div>
    </body>
    </html>

    Please help me im stuck .chart is not displaying…

    #24437

    @vikram-masurkar,

    Can you kindly share sample database over Google-Drive or Onedrive so that we can run your code locally, understand your issue better and help you out?


    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.