Making Morris graph from bootstrap dashboard theme dynamic in spring application using AJAX and JSON

In my personal home project, I am using bootstrap dashboard theme after login:

http://startbootstrap.com/template-overviews/sb-admin-2/ 

 After login I was able to pass a single data from controller class to dashboard page, however it was a huge learning for me to be able to integrate morris charts with multiple arrays passed in an object from controller class.

So, in this blog I will show you how to pass an array object containing multiple arrays to the dashboard page in above link in order for the "Morris.Area" graph to display data according to the arrays in passed objects using AJAX and JSON. Go through my previous blog to see how to pass simple array from controller class to another JSP page using AJAX.

If you download the bootstrap theme from the given link, i have modified pages/index.html to views/dashboard.jsp in my example as my project structure is different. So you will have to configure paths accordingly.

arrayBean.java
---------------------------
package com.c.bean;

import java.util.ArrayList;

public class arrayBean
{


    ArrayList<String> period = new ArrayList<String>();
    ArrayList<Integer> iphone = new ArrayList<Integer>();
    ArrayList<Integer> ipad = new ArrayList<Integer>();
    ArrayList<Integer> itouch  = new ArrayList<Integer>();
    public ArrayList<String> getPeriod() {
        return period;
    }
    public void setPeriod() {
        period.add("2010 Q1");
        period.add("2010 Q2");
        period.add("2010 Q3");
        period.add("2010 Q4");
        period.add("2011 Q1");
        period.add("2011 Q2");
        period.add("2011 Q3");
        period.add("2011 Q4");
        period.add("2012 Q1");
        period.add("2012 Q2");
    }
    public ArrayList<Integer> getIphone() {
        return iphone;
    }
    public void setIphone() {
   
        iphone.add(2666);
        iphone.add(2778);
        iphone.add(4912);
        iphone.add(3767);
        iphone.add(6810);
        iphone.add(5670);
        iphone.add(4820);
        iphone.add(15073);
        iphone.add(10687);
        iphone.add(8432);
        }
    public ArrayList<Integer> getIpad() {
        return ipad;
    }
    public void setIpad() {
        ipad.add(0);
        ipad.add(2294);
        ipad.add(1969);
        ipad.add(3597);
        ipad.add(1914);
        ipad.add(4293);
        ipad.add(3795);
        ipad.add(5967);
        ipad.add(4460);
        ipad.add(5713);
    }
    public ArrayList<Integer> getItouch() {
        return itouch;
    }
    public void setItouch() {
        itouch.add(2647);
        itouch.add(2441);
        itouch.add(2501);
        itouch.add(5689);
        itouch.add(2293);
        itouch.add(1881);
        itouch.add(1588);
        itouch.add(5175);
        itouch.add(2028);
        itouch.add(1791);
    }

}

controller class - ControllerClass.java
--------------------------------------------------------

// This is the url linked to submit button on Index page


 @RequestMapping(value = "/save", method = RequestMethod.POST)
 public ModelAndView saveUser( @ModelAttribute("loginBean1") RegisterBean loginBean) {

//some code 
  return new ModelAndView("dashboard");
 }

 @RequestMapping(value = "/dashboard")
 public @ResponseBody
 String ShowUserDetails() {
Gson gson = new Gson();
arrayBean o1 = new arrayBean();
o1.setPeriod();
o1.setIpad();
o1.setIphone();
o1.setItouch();

return gson.toJson(o1);
 }

dashboard.js
------------------------------------

$(document).ready(function(){
 callAjax();

});

function callAjax() {

$.ajax({
       url : 'dashboard.html',       
       success : function(response) {
           var v = 0;
           var period1 = null;
           var iphone1 = null;
           var ipad1 = null;
           var itouch1 = null;
           var jsonType = JSON.parse(response);
           $.each(jsonType, function(key,value)
                   {
               if (v == 0)
                   {
                 
                    period1 = value;
                   v++;
           
                   }
               else if(v == 1)
                   {
                    iphone1 = value;
                   v++;
           
                   }
               else if(v == 2)
               {
                ipad1 = value;
               v++;
           
               }
               else if(v == 3)
               {
                itouch1 = value;
               v++;
       
               }
                   }
           
                 );         

    var data = [];
           for (var i = 0; i < 10; i++) {
             
              var x = {
                   period: period1[i],
                   iphone: iphone1[i],
                   ipad: ipad1[i],
                   itouch: itouch1[i]
               };
              data.push(x);
      
               }
          
       
          
           Morris.Area({
                element: 'morris-area-chart',
                data: data,
                xkey: 'period',
                ykeys: ['iphone', 'ipad', 'itouch'],
                labels: ['iPhone', 'iPad', 'iPod Touch'],
                pointSize: 2,
                hideHover: 'auto',
                resize: true
           });
    
       }
   });
}

From the standard page - pages/Index.jsp - I have removed external script call "<script src="./js/morris-data.js"></script> ", as, I have already manipulated the graph in dashboard.js and so calling this page would override the purpose of displaying a dynamic morris graph on dashboard.

Now the graph looks pretty much the same, with only difference that now the graph is dynamic.