FORUMS

Select any forum below to ask question

Home › forums › Using CanvasJS › create multiseries chart › Reply To: create multiseries chart

July 25, 2019 at 6:08 pm #26037

munmun

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://canvasjs.com/assets/script/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>