FORUMS

Select any forum below to ask question

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

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • May 16, 2018 at 5:47 am #20724

    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>
    May 16, 2018 at 11:47 am #20725

    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

    May 16, 2018 at 12:43 pm #20727

    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 5 years, 11 months ago by yong min lee.
    May 17, 2018 at 10:08 am #20765

    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

    May 18, 2018 at 11:12 am #20778

    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

    May 18, 2018 at 1:00 pm #20782

    yong min lee

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.