How can i populate json data into charts using ajax call? - json

Question

I want to pass json data to jsp and populate into the charts data. How can i do this?
Previously i am setting data value by sending each value using model attribute.
In EmployeeController i have lineBarChart method like this :-
#RequestMapping("/lineBar")
public String lineBarChart(Model model)
{
List<Employee> emp = employeeMapper.getAllEmployees();
int cseCount = 0;
int ecCount = 0;
int itCount = 0;
int cseSalary = 0;
int ecSalary = 0;
int itSalary = 0;
for (int j = 0; j < emp.size(); j++)
{
if (emp.get(j).getDepartment().equalsIgnoreCase("CSE"))
{
cseSalary += emp.get(j).getSalary();
cseCount++;
}
else if (emp.get(j).getDepartment().equalsIgnoreCase("IT"))
{
itSalary += emp.get(j).getSalary();
itCount++;
}
else
{
ecSalary += emp.get(j).getSalary();
ecCount++;
}
}
Map<Integer, Integer> map = new HashMap<>();
map.put(cseCount, cseSalary);
map.put(ecCount, ecSalary);
map.put(itCount, itSalary);
GsonBuilder gsonMapBuilder = new GsonBuilder();
Gson gsonObject = gsonMapBuilder.create();
String jsonObject = gsonObject.toJson(map);
System.out.println(jsonObject);
// Previously i am doing this now i want to send json to chart
model.addAttribute("cse", cseCount);
model.addAttribute("ec", ecCount);
model.addAttribute("it", itCount);
model.addAttribute("cseSalary", cseSalary);
model.addAttribute("itSalary", itSalary);
model.addAttribute("ecSalary", ecSalary);
return "lineBarChart";
}
Here is lineBarChart.jsp :-
<script>
$(function()
{
var lineBarChart = new CanvasJS.Chart("lineBarChartContainer",
{
animationEnabled: true,
theme: "light2",
title:
{
text: "Branch wise total Employee Salary",
fontSize: 20,
fontFamily: "Trebuchet MS",
fontWeight: "bold",
margin: 10
},
axisY:
{
title: "Number of Employee",
suffix: " K"
},
data:
[{
type: "column",
dataPoints:
[
{ y: ${cse}, label: "CSE" },
{ y: ${ec}, label: "EC" },
{ y: ${it}, label: "IT" }
]
},
{
type: "line",
toolTipContent: "{label}: {y}K",
showInLegend: true,
dataPoints:
[
{ y: ${cseSalary}/10000, label: "CSE" },
{ y: ${ecSalary}/10000, label: "EC" },
{ y: ${itSalary}/10000, label: "IT" }
]
}]
});
lineBarChart.render();
});
</script>
<div class="card shadow p-3 bg-white rounded">
<div class="card-body">
<div id="lineBarChartContainer" style="height: 240px; width: 100%;"></div>
</div>
</div>
I am calling lineBarChart.jsp file from another jsp using ajax call.
Like this :-
<div class="row" >
<div class="col-md-6 p-1">
<div id="lineBarGraph"></div>
</div>
</div>
$.ajax({url: "lineBar",
async: false,
success: function(result)
{
console.log(result);
$("#lineBarGraph").html(result);
}
});

Answer 1

You will need to create a 2nd handler method or controller.
The existing controller will simply load the JSP so all the logic can be removed from that. The new controller method will have the logic to load and return the data requested by your Ajax call and will look like the below.
Note the #ResponseBody annotation.
Update you Ajax call to request the new path fetchChartDataor whatever you want it to be:
#RequestMapping("/fetchChartData", produces="application/json")
public #ResponseBody String getChartData()
{
List<Employee> emp = employeeMapper.getAllEmployees();
int cseCount = 0;
int ecCount = 0;
int itCount = 0;
int cseSalary = 0;
int ecSalary = 0;
int itSalary = 0;
for (int j = 0; j < emp.size(); j++)
{
if (emp.get(j).getDepartment().equalsIgnoreCase("CSE"))
{
cseSalary += emp.get(j).getSalary();
cseCount++;
}
else if (emp.get(j).getDepartment().equalsIgnoreCase("IT"))
{
itSalary += emp.get(j).getSalary();
itCount++;
}
else
{
ecSalary += emp.get(j).getSalary();
ecCount++;
}
}
Map<Integer, Integer> map = new HashMap<>();
map.put(cseCount, cseSalary);
map.put(ecCount, ecSalary);
map.put(itCount, itSalary);
//you could remove the below and return the map directly
GsonBuilder gsonMapBuilder = new GsonBuilder();
Gson gsonObject = gsonMapBuilder.create();
return gsonObject.toJson(map);
}
You could simplify further by changing the method return type to Map<Integer, Integer> and return this directly. Spring Boot will handle the serialization to Json using the configured Json library:
https://www.callicoder.com/configuring-spring-boot-to-use-gson-instead-of-jackson/