Login to Ask a Question or Reply
You must be logged in to post your query.
Home › Forums › Chart Support › Query
Query
- This topic has 8 replies, 3 voices, and was last updated 5 years, 8 months ago by
Vishwas R.
-
February 18, 2019 at 10:58 am #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 keplerI 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 properFebruary 18, 2019 at 4:04 pm #24372Can 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 CanvasJSFebruary 18, 2019 at 4:20 pm #24374Can I send the code which i am working on, here itself??
February 18, 2019 at 4:29 pm #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>February 20, 2019 at 10:54 am #24399Thanks 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 CanvasJSFebruary 20, 2019 at 12:52 pm #24400ok…have mailed it
February 20, 2019 at 12:57 pm #24401This all must be dynamic.
Which is not comingFebruary 21, 2019 at 12:30 pm #24420Actually 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 displayedFebruary 21, 2019 at 5:42 pm #24423
You must be logged in to reply to this topic.