Home Forums Chart Support Dynamic LineChart Using Database Multiple Column

Dynamic LineChart Using Database Multiple Column

Viewing 2 posts - 1 through 2 (of 2 total)
  • #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.