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)
  • February 21, 2019 at 4:30 pm #24422

    vikram masurkar     
    <%@ 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://cdn.canvasjs.com/canvasjs.min.js"></script>
	<div class="loader"></div>
</body>
</html>

    Please help me im stuck .chart is not displaying…

    February 22, 2019 at 9:01 pm #24437

    Vishwas R

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