Thank you very much!
I changed the axisX to this:
axisX:{ intervalType: "minute", xValueType : "dateTime", valueFormatString: "HH:mm" , labelAngle: -50 },
And I can see the graph now!
small question… in my x ax, I see HH:mm instead of the values. also standing on a point will show the timestamp as 34200000 for example… How did you set the axisX to show it correctly?
Thanks a lot!!! Ori
Hi Vishwas, this is the complete project :) only one jsp file and the input file… I can upload the files as well… but can simply copy paste as well :)
Thanks, Ori
Thanks. I tried to change the object to Timestamp, but still no graph is shown:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.*" %> <%@ page import="java.io.*" %> <%@ page import="java.net.*" %> <%@ page import="java.Math.*" %> <%@ page import="java.Long.*" %> <%@ page import="java.Double.*" %> <%@ page import="java.Integer.*" %> <%@ page import="com.google.gson.Gson"%> <%@ page import="com.google.gson.JsonObject"%> <%@ page import="java.text.SimpleDateFormat"%> <%@ page import="java.sql.Timestamp"%> <% String fileName = "/WEB-INF/heapUsage/heapUsage_2019-06-18.txt"; InputStream ins = application.getResourceAsStream(fileName); Gson gsonObj = new Gson(); Map<Object,Object> map = null; List<Map<Object,Object>> list = new ArrayList<Map<Object,Object>>(); SimpleDateFormat format = new SimpleDateFormat("HH:mm"); try{ if(ins == null){ response.setStatus(response.SC_NOT_FOUND); } else { BufferedReader br = new BufferedReader((new InputStreamReader(ins))); String data; int i=0; while((data= br.readLine())!= null) { String[] splittedString = data.split(" "); Double doubleValue = Double.parseDouble(splittedString[4]); doubleValue = doubleValue / 1024 ; int valueint = (int) Math.round(doubleValue); Date date = format.parse(splittedString[1]); // out.println("date:" +date); Timestamp timestamp = new Timestamp(date.getTime()); map = new HashMap<Object,Object>(); map.put("x",timestamp); map.put("y",valueint ); list.add(map); // out.println("timestamp" + timestamp + " " + valueint +"<br>"); i++; } } } catch(IOException e){ out.println(e.getMessage()); } String dataPoints = gsonObj.toJson(list); %> <!DOCTYPE HTML> <html> <head> <title>Ori - jsp to show heap usage graph</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> window.onload = function() { var chart = new CanvasJS.Chart("chartContainer", { theme: "light1", // "light2", "dark1", "dark2" animationEnabled: true, zoomEnabled: true, title: { text: "Try Zooming and Panning" }, axisX:{ interval:10, intervalType: "minute", valueFormatString: "HH:mm" , labelAngle: -50 }, axisY: { title: "Heap Usage (in MB)", titleFontSize: 24, includeZero: false }, data: [{ type: "line", yValueFormatString: "#,##0.0## MB", dataPoints: <%out.print(dataPoints);%> }] }); chart.render(); } </script> </head> <body> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>
the input file has those lines: time 00:00 heap used 4328397.3 time 00:01 heap used 5508091.8 time 00:02 heap used 3746890.8 time 00:03 heap used 4563022.0 time 00:04 heap used 5473306.6 time 00:05 heap used 3969021.0 time 00:06 heap used 5197849.5 time 00:07 heap used 6038831.7 time 00:08 heap used 4405659.5 time 00:09 heap used 5208964.9 time 00:10 heap used 3764457.6 time 00:11 heap used 4978505.6 time 00:12 heap used 5749038.9