jQuery Sparkline: This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line of two of HTML and Javascript.
The plugin has no dependencies other than jQuery and works with all modern browsers
Now let’s use this library in Spring MVC architecture for your Real Time Web Application. Here is a quick flow of what we will do here:
- In Spring MVC, my controller get data every 3 seconds and send it to .jsp file (View).
- View (.jsp) file, get JSONArray data every 3 seconds via AJAX call
- AJAX call sends data to consumeJSONData(jsonArray) function
- consumeJSONData updates Sparkline every 3 seconds
Let’s start coding:
Step-1
Pre-Requisite: https://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (Deploy this project successfully on Tomcat)
You need below additional json.jar Maven dependency. Open pom.xml file and add below dependency.
<dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20150729</version> </dependency>
Step-2
Create file CrunchifySpringSparklineConsumeJSONArray.java under com.crunchify.controller package.
package com.crunchify.controller;
import java.util.Random;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
/**
* @author Crunchify.com
*
*/
@Controller
public class CrunchifySpringSparklineConsumeJSONArray {
@RequestMapping("/sparkline")
public ModelAndView crunchifySparklineTest() {
return new ModelAndView("sparkline", "message", "Sparkline.js Example which accepts JSONArray value every 3 seconds & updates graphs..");
}
@RequestMapping(value = "/sparklinetest", method = RequestMethod.GET)
public @ResponseBody
String constructJSONArray() throws JSONException {
JSONObject one = new JSONObject();
JSONObject two = new JSONObject();
JSONObject three = new JSONObject();
JSONArray result = new JSONArray();
Random r = new Random();
int[] r1 = { r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100) };
int[] r2 = { r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100) };
int[] r3 = { r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100), r.nextInt(100) };
one.put("one", r1);
two.put("two", r2);
three.put("three", r3);
result.put(one);
result.put(two);
result.put(three);
JSONObject jsonObj = new JSONObject();
jsonObj.put("sparkData", result);
System.out.println("Sendig this data to view (sparkline.jsp): " + jsonObj.toString());
return jsonObj.toString();
}
}
Step-3
Creare file sparkline.jsp under folder /WebContent/WEB-INF/jsp folder.
<html>
<head>
<TITLE>Crunchify - Sparkline.js Example which accepts JSONArray
value every 3 seconds</TITLE>
<style type="text/css">
body {
background-image:
url('https://crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png');
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script
src="https://crunchify.com/wp-content/uploads/code/jquery.sparkline.js"></script>
<script type="text/javascript">
function crunchifySparkline() {
$.ajax({
url : 'sparklinetest.html',
dataType : "json",
cache : false,
contentType : 'application/json; charset=utf-8',
type : 'GET',
success : function(result) {
var one = result.sparkData;
//alert(one);
consumeJSONData(one);
}
});
}
function consumeJSONData(sparkData) {
console.log(sparkData);
for ( var i = 0; i < sparkData.length; i++) {
var obj = sparkData[i];
var crunchifyName;
var crunchifyValue;
for ( var key in obj) {
crunchifyName = key;
crunchifyValue = obj[key].toString();
crunchifyValue = crunchifyValue.substr(1);
crunchifyValue = crunchifyValue.substring(0,
crunchifyValue.length - 1);
var n = crunchifyValue.split(",");
console.log(n);
$("#" + crunchifyName).sparkline(n, {
type : 'line',
width : '80',
fillColor : '#eeeeee'
});
}
}
}
</script>
<script type="text/javascript">
var intervalId = 0;
intervalId = setInterval(crunchifySparkline, 3000);
</script>
</head>
<body>
<div align="center">
<br> <br> ${message} <br> <br>
<div id="result"></div>
<br>
<br> Sparkline One: <span id="one">.</span>
<br>
<br> Sparkline Two: <span id="two">.</span>
<br>
<br> Sparkline Three: <span id="three">.</span>
<br>
<br> <br> <br>
<div
style="font-family: verdana; line-height: 25px; padding: 5px 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;">
Sparkline.js Example which accepts JSONArray value every 3 seconds by
<a href='https://crunchify.com'>Crunchify</a>. Click <a
href='https://crunchify.com/category/java-tutorials/'>here</a>
for all Java, Spring MVC, Web Development examples.<br>
</div>
</div>
</body>
</html>
Another must read:
- Simple Java Enum Example
- Java MailAPI Example – Send an Email via GMail SMTP
- What is Daemon Thread in Java? Example Attached
Step-4
Checkout this directory structure.
Step-5
Re-deploy CrunchifySpringMVCTutorial project into Apache Tomcat Server again.
- Go to
ServerTab in Eclipse - Click on
Clean... - Click on
Publish - Click on
Restart
Step-6
Open Web Browser and visit this URL to see result: http://localhost:8080/CrunchifySpringMVCTutorial/sparkline.html
How to verify result and check complete flow?
Step-1
Watch out your Result.. It should be the same as you see it at the top of this page.
Step-2
Check Out Eclipse Console Output. You will see console log with data every 3 seconds. That means Spring MVC controller is sending data to JSP page every 3 seconds.
Step-3
Checkout Browser console to see live data.
- Right click on page to select
Inspect Element - Select
consoletab
