You must be logged in to post your query.
Home › Forums › Chart Support › create multiseries chart
Tagged: multiseries chart
i want to create a multiseries chart by fetching data from database kindly help.
using javascript or jquery
database oracle
using arraylistb and hashmap.
Can you please let us know the server side technology being used by you so that we can understand your scenario better and help you with an appropriate solution.
—-
Manoj Mohan
Team CanvasJS
i want to create using java by using hashmap or arraylist a multiseries chart from data from database . oracle database.
hi manoj
https://jsfiddle.net/munmunpanda/82Luwp9z/3/
This is a jsfiddle link where in html i have placed my entire code and in javascript section i have placed the queries that i m running currently.
As per your instructions i ran the sample project but got a blank screen . kindly reply soon.
You can’t run JSP page in JSFiddle but in server like Apache Tomcat or Glassfish. Please refer this tutorial for step to step guidance on setting up environment for JSP. Also refer this article for an example on retrieving data from Oracle database in JSP.
—
Manoj Mohan
Team CanvasJS
I have mailed you already with my issue Manoj. Was not able to post the code here so pasted in jsfiddle.
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.math.*" %>
<%@ page import="com.google.gson.Gson"%>
<%
Gson gsonObj = new Gson();
Map<Object,Object> map = null;
List<Map<Object,Object>> list1 = new ArrayList<Map<Object,Object>>(), list2 = new ArrayList<Map<Object,Object>>();
String dataPoints1 = null, dataPoints2 = null;
/* https://www.tutorialspoint.com/jdbc/jdbc-db-connections */
try {
Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
}
catch(Exception ex) {
System.out.println("Error!");
System.exit(1);
}
String url = "jdbc:oracle:thin:@localhost:1521:xe";
String user = "SYS as SYSDBA";
String PASS = "SYS";
Connection conn = DriverManager.getConnection(url, user, PASS);
PreparedStatement pstmt = null;
try {
String sql = "select * from shv order by datetime ";
Statement stmt = conn.createStatement();
ResultSet rset = stmt.executeQuery(sql);
while (rset.next()) {
String xVal = rset.getString("datetime");
String y1Val = (String)rset.getString("y_actual");
String y2Val = rset.getString("y_predicted");
map = new HashMap<Object,Object>();
map.put("x", xVal);
map.put("y", y1Val);
list1.add(map);
dataPoints1 = gsonObj.toJson(list1);
//Date dt=new Date(dataPoints1);
map = new HashMap<Object,Object>(); map.put("x", xVal); map.put("y", y2Val); list2.add(map);
dataPoints2 = gsonObj.toJson(list2);
}
}
catch (SQLException e) {
System.out.println(e);
}
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
animationEnabled: true,
title: {
text: "Multiseries line Chart with Data from Oracle Database"
},
data: [{
type: "line", //change type to bar, line, area, pie, etc
dataPoints: <%out.print(dataPoints1);%>
},{
type: "line", //change type to bar, line, area, pie, etc
dataPoints: <%out.print(dataPoints2);%>
}]
});
chart.render();
function toogleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else{
e.dataSeries.visible = true;
}
chart.render();
}
}
</script>
</head>
<body>
<div id="chartContainer" style="width: 100%; height: 400px"></div>
</body>
</html>
This is not giving the desired output.
The sample shared by @manoj-mohan seems to be working fine. If you are still facing issue, kindly create sample project reproducing the issue and share it over Google Drive or Onedrive, along with sample database, so that we can run it locally at our end, understand the scenario better and help you out.
—
Vishwas R
Team CanvasJS
Tagged: multiseries chart
You must be logged in to reply to this topic.