JSP Dynamic / Live Line Charts & Graphs

Download JSP Chart Samples 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
  2. <%@ page import="java.util.*" %>
  3.  
  4. <!DOCTYPE HTML>
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8. <script type="text/javascript">
  9. window.onload = function() { 
  10.  
  11. var dataPoints = [];
  12. var y = 50;
  13. for(var i = 0; i < 10; i++){
  14. 	y += (Math.random() - 0.5) * 0.1; 
  15. 	dataPoints.push({x: i, y: y});
  16. }
  17.  
  18. var chart = new CanvasJS.Chart("chartContainer", {
  19. 	title: {
  20. 		text: "Download Speed"
  21. 	},
  22. 	axisX:{
  23. 		title: "Time in second"
  24. 	},
  25. 	axisY:{
  26. 		suffix: " Mbps"
  27. 	},
  28. 	data: [{
  29. 		type: "line",
  30. 		yValueFormatString: "#,##0.0#",
  31. 		toolTipContent: "{y} Mbps",
  32. 		dataPoints: dataPoints
  33. 	}]
  34. });
  35. chart.render();
  36.  
  37. var updateInterval = 1000;
  38. setInterval(function () { updateChart() }, updateInterval);
  39.  
  40. var xValue = dataPoints.length;
  41. var yValue = dataPoints[dataPoints.length - 1].y;
  42.  
  43. function updateChart() {
  44. 	yValue += (Math.random() - 0.5) * 0.5;
  45. 	dataPoints.push({ x: xValue, y: yValue });
  46. 	xValue++;
  47. 	chart.render();
  48. };
  49.  
  50. }
  51. </script>
  52. </head>
  53. <body>
  54. <div id="chartContainer" style="height: 370px; width: 100%;"></div>
  55. <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  56. </body>
  57. </html>