JSFiddle - React, Tailwind, and code Playground

by munmunpanda

HTML

<%@ 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 ";
	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("label", xVal); 
		map.put("y_actual", y1Val); 
		list1.add(map);
		dataPoints1 = gsonObj.toJson(list1);
		
		map = new HashMap<Object,Object>(); map.put("label", xVal); map.put("y_predicted", y2Val); list2.add(map);
		dataPoints2 = gsonObj.toJson(list2);
	}
}
catch (SQLException e) {
   System.out.println(e);
}

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

JavaScript

Creation and insertion
All the variables are string type variables

create table shv (datetime varchar(50), y_actual varchar(50), y_predicted varchar(50) );


insert into shv values('2018-07-01 00-00-00','1.867','2.23667033901257');
insert into shv values('2018-07-01 00-05-00','1.867','2.23675802304931');
insert into shv values('2018-07-01 00-10-00','1.867','2.23679793607522');
insert into shv values('2018-07-01 00-15-00','1.867',' ');
insert into shv values('2018-07-01 00-20-00','1.867',' ');