The update is made by pressing F5 in my browser for refesh. I'd like to be graph

[yong min lee]

I am using JSP, MYSQL, TOMCAT, eclipse. I complited making a graph as a database.
Currently, my database is being update real-time.
But my graph doesn’t come in real-time.
The update is made by pressing F5 in my browser for refesh.
I’d like to be graph drawn without F5.

<%@page import="java.util.function.ToDoubleFunction"%>
<%@ page import="java.util.*,java.sql.*"%>
<%@ page import="java.util.Date"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="com.google.gson.JsonObject"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<jsp:include page="../WEB-INF/pages/template.jsp">
	<jsp:param value="*datas" name="pageTitle"/>
	<jsp:param value="<div id='chartContainer'/>" name="content"/> 	
</jsp:include>

<%
//response.setIntHeader("Refresh", 1);

    
                        
	Gson gsonObj = new Gson();
	String dataPoints = "";

	Map<Object,Object> map = new HashMap<Object,Object>();
	List<Map<Object,Object>> list = new ArrayList<Map<Object,Object>>();
	

try{

		Class.forName("com.mysql.jdbc.Driver"); 
		Connection connection = DriverManager.getConnection("jdbc:mysql://192.168.0.8:3306/seis_web2", "root", "my.system");
		Statement statement = connection.createStatement();
		String xVal, yVal,tttt,yyyy;
		long val;
		ResultSet resultSet = statement.executeQuery("select st01_epochtime,st01_z from seis_st01_g_wave");
		ResultSetMetaData rsmd = resultSet.getMetaData();
	

		while(resultSet.next()){
			tttt = resultSet.getString("st01_epochtime");
			yyyy =(tttt+"000");
			xVal = yyyy;
			yVal = resultSet.getString("st01_z");
			map = new HashMap<Object,Object>();	
			map.put("x",Long.parseLong(xVal));	
			map.put("y", Double.parseDouble(yVal)); 
			list.add(map);
			dataPoints = gsonObj.toJson(list);
		}

		connection.close();
	}
	catch(SQLException e){
		out.println("<div class='alert alert-danger' style='margin:1%;'>Could not connect to the database. Please check if you have mySQL Connector installed on the machine - if not, try installing the same. Please refer to Instruction.txt</div>");
		dataPoints = null;
	}

gsonObj = new Gson();
String dataPoints2 = "";
map = new HashMap<Object,Object>();
list = new ArrayList<Map<Object,Object>>();
				
try{
	Class.forName("com.mysql.jdbc.Driver"); 
	Connection connection = DriverManager.getConnection("jdbc:mysql://192.168.0.8:3306/seis_web2", "root", "my.system");
	Statement statement = connection.createStatement();
	String xVal, yVal,tttt,yyyy;
	long val;
	ResultSet resultSet = statement.executeQuery("select st01_epochtime,st01_n from seis_st01_g_wave");
	ResultSetMetaData rsmd = resultSet.getMetaData();

	while(resultSet.next()){
		tttt = resultSet.getString("st01_epochtime");
		yyyy =(tttt+"000");
		xVal = yyyy;
		yVal = resultSet.getString("st01_n");
		map = new HashMap<Object,Object>();	
		map.put("x",Long.parseLong(xVal));	
		map.put("y", Double.parseDouble(yVal)); 
		list.add(map);
		dataPoints2 = gsonObj.toJson(list);
	}

	connection.close();
}
catch(SQLException e){
	out.println("<div class='alert alert-danger' style='margin:1%;'>Could not connect to the database. Please check if you have mySQL Connector installed on the machine - if not, try installing the same. Please refer to Instruction.txt</div>");
	dataPoints = null;
}

gsonObj = new Gson();
String dataPoints3 = "";
map = new HashMap<Object,Object>();
list = new ArrayList<Map<Object,Object>>();
				
try{
	Class.forName("com.mysql.jdbc.Driver"); 
	Connection connection = DriverManager.getConnection("jdbc:mysql://192.168.0.8:3306/seis_web2", "root", "my.system");
	Statement statement = connection.createStatement();
	String xVal, yVal,tttt,yyyy;
	long val;
	ResultSet resultSet = statement.executeQuery("select st01_epochtime,st01_e from seis_st01_g_wave");
	ResultSetMetaData rsmd = resultSet.getMetaData();

	while(resultSet.next()){
		tttt = resultSet.getString("st01_epochtime");
		yyyy =(tttt+"000");
		xVal = yyyy;
		yVal = resultSet.getString("st01_e");
		map = new HashMap<Object,Object>();	
		map.put("x",Long.parseLong(xVal));	
		map.put("y", Double.parseDouble(yVal)); 
		list.add(map);
		dataPoints3 = gsonObj.toJson(list);
	}

	connection.close();
}
catch(SQLException e){
	out.println("<div class='alert alert-danger' style='margin:1%;'>Could not connect to the database. Please check if you have mySQL Connector installed on the machine - if not, try installing the same. Please refer to Instruction.txt</div>");
	dataPoints = null;
}

gsonObj = new Gson();
String dataPoints4 = "";
map = new HashMap<Object,Object>();
list = new ArrayList<Map<Object,Object>>();
				
try{
	Class.forName("com.mysql.jdbc.Driver"); 
	Connection connection = DriverManager.getConnection("jdbc:mysql://192.168.0.8:3306/seis_web2", "root", "my.system");
	Statement statement = connection.createStatement();
	String xVal, yVal,tttt,yyyy;
	long val;
	ResultSet resultSet = statement.executeQuery("select st01_epochtime,st01_2d from seis_st01_g_wave");
	ResultSetMetaData rsmd = resultSet.getMetaData();

	while(resultSet.next()){
		tttt = resultSet.getString("st01_epochtime");
		yyyy =(tttt+"000");
		xVal = yyyy;
		yVal = resultSet.getString("st01_2d");
		map = new HashMap<Object,Object>();	
		map.put("x",Long.parseLong(xVal));	
		map.put("y", Double.parseDouble(yVal)); 
		list.add(map);
		dataPoints4 = gsonObj.toJson(list);
	}

	connection.close();
}
catch(SQLException e){
	out.println("<div class='alert alert-danger' style='margin:1%;'>Could not connect to the database. Please check if you have mySQL Connector installed on the machine - if not, try installing the same. Please refer to Instruction.txt</div>");
	dataPoints = null;
}

gsonObj = new Gson();
String dataPoints5 = "";
map = new HashMap<Object,Object>();
list = new ArrayList<Map<Object,Object>>();
				
try{
	Class.forName("com.mysql.jdbc.Driver"); 
	Connection connection = DriverManager.getConnection("jdbc:mysql://192.168.0.8:3306/seis_web2", "root", "my.system");
	Statement statement = connection.createStatement();
	String xVal, yVal,tttt,yyyy;
	long val;
	ResultSet resultSet = statement.executeQuery("select st01_epochtime,st01_3d from seis_st01_g_wave");
	ResultSetMetaData rsmd = resultSet.getMetaData();

	while(resultSet.next()){
		tttt = resultSet.getString("st01_epochtime");
		yyyy =(tttt+"000");
		xVal = yyyy;
		yVal = resultSet.getString("st01_3d");
		map = new HashMap<Object,Object>();	
		map.put("x",Long.parseLong(xVal));	
		map.put("y", Double.parseDouble(yVal)); 
		list.add(map);
		dataPoints5 = gsonObj.toJson(list);
	}

	connection.close();
}
catch(SQLException e){
	out.println("<div class='alert alert-danger' style='margin:1%;'>Could not connect to the database. Please check if you have mySQL Connector installed on the machine - if not, try installing the same. Please refer to Instruction.txt</div>");
	dataPoints = null;
}

%>
<!-- ↑databases  -->

<!-- <meta http-equiv="refresh" content="1">-->

		
<script type="text/javascript">

$(function () {
	

	   <%if(dataPoints != null){%>
		   var chart = new CanvasJS.Chart("chartContainer", {
	           theme: "light2",
	           zoomEnabled: true,
	           exportEnabled: true,
	           animationEnabled: false,
	           title: {
	           	text: "*data points"
	           },	
	               toolTip: {
	                   shared: true,
	                   content: "<span style='\"'color: {color};'\"'>{name}</span> : {y}"
	               },
	               

	           data: [
	           {
	               type: "line",
	               xValueType: "dateTime",
	               showInLegend: true,
	               name: "Z",
	               dataPoints: <%out.print(dataPoints);%>
	               
	           },
	           {
	               type: "line",
	               xValueType: "dateTime",
	               showInLegend: true,
	               name: "N",
	               dataPoints: <%out.print(dataPoints2);%>
	               
	           },
	           {
	               type: "line",
	               xValueType: "dateTime",
	               showInLegend: true,
	               name: "E",
	               dataPoints: <%out.print(dataPoints3);%>
	               
	           },
	           {
	               type: "line",
	               xValueType: "dateTime",
	               showInLegend: true,
	               name: "2D",
	               dataPoints: <%out.print(dataPoints4);%>
	               
	           },
	           {
	               type: "line",
	               xValueType: "dateTime",
	               showInLegend: true,
	               name: "3D",
	               dataPoints: <%out.print(dataPoints5);%>
	               
	           }
	           ],
	           legend: {
	               cursor: "pointer",
	               verticalAlign: "top",
	               itemclick: function (e) {
	                   if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
	                       e.dataSeries.visible = false;
	                   }
	                   else {
	                       e.dataSeries.visible = true;
	                   }	         
	                   chart.render();	                   
	               }
	           }
	       });

       		chart.render();
       	<%} %>

       

   });

 
</script>

[Priyanka M S]

@yong-min-lee,

You can use JavaScript Timing Events and update chart-data every few seconds. Please refer this example on live updating data from AJAX/JSON.

If this doesn’t solve your requirements, can you kindly share working sample project along with sample database over google-drive or onedrive so that we can understand it better and help you out?

__
Priyanka M S
CanvasJS Team

[yong min lee]

https://drive.google.com/drive/folders/1Bfv1Olh-rLPtJN7daHY0rOB4HVlvIeQI?usp=sharing

I was asked to bring a sample source provided by CANVAS homepage.

The JSP that I use is
1. jsp-canvasjs-chart-samples/how-to/data-from-database.jsp
2. jsp-canvasjs-chart-samples/b.jsp
3. jsp-canvasjs-chart-samples/WEB-INF/pages/template.jsp
4. sql is mysql , table dump .. webcontent/seis_st01_g_wave.sql <– your dump , On my computer, the database is updated in real time.
start = 1. jsp-canvasjs-chart-samples/how-to/data-from-database.jsp

I have tried to do it with Json/Ajax
But I didn’t succeed.
Go in on the source link.
Show me the source by modifying it.
I am not good at English so I am not sure if it is correct grammar.
Thank you for helping me

• This reply was modified 6 years, 7 months ago by yong min lee.

[Priyanka M S]

@yong-min-lee,

Thanks for sharing the sample project. We will look into the issue and get back to you at the earliest. Meanwhile you can refer following tutorials on auto-refresh/reloading a part of webpage.
1. Auto-Reloading part of webpage every 5 seconds.
2. Auto-Refresh
3. Auto refresh page on data change – Stackoverflow

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@yong-min-lee,

According to tutorials from different sources, its suggested to refresh the page automatically every n-seconds. Please take a look at this updated sample project.
1. Auto-Reloading part of webpage every 5 seconds.
2. Auto-Refresh

You can further try to improve it to refresh the page whenever there is change in data.

__
Priyanka M S
Team CanvasJS

[yong min lee]

I do not know if the source is different. What has changed?