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

This topic contains 5 replies, has 2 voices, and was last updated by  yong min lee 6 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #20724

    yong min lee
    Member

    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>
    #20725

    Priyanka M S
    Member

    @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

    #20727

    yong min lee
    Member

    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 months, 1 week ago by  yong min lee.
    #20765

    Priyanka M S
    Member

    @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

    #20778

    Priyanka M S
    Member

    @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

    #20782

    yong min lee
    Member

    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.