score:1

Accepted answer

You don't need to manually create json in your controller code, spring boot will handle it for you. You should create a dto class in a form which is expected by your javascript.

Which is in your case:

public class LineChartDto {
  private List<Integer> month; // you better call this "months" or "monthList"
  private List<BigDeciamal> report; // why do you call this "report" while this is actually "sales" 

  // all args constructor, getters
}

And your controller method would be:

@RequestMapping("/linechartdata")
@ResponseBody // or use @RestController
public LineChartDto getSalesLineChartData(..) {
  List<Report> reportList = ..

  List<Integer> months = reportList.stream()
      .map(report -> report.getMonth()+1)
      .collect(Collectors.toList());

  List<BigDecimal> sales = reportList.stream()
      .map(Report::getTotal_sales) // better name this getTotalSales
      .collect(Collectors.toList());

  return new LineChartDto(months, sales);
}

Response will result in json object:

{
  "month": [1, 2, ... ],
  "report": [100, 200, ... ]
}

As for why you ajax doesn't work - the question is too broad. Start with Chrome Dev Tools Network to check what network communication is happening, check browser console for errors, add some console.log() or better debug your js.

This line document.addEventListener('DOMContentLoaded', function () looks suspicious to me. I don't think you need to addEventListener each time you call your chart. Probably you should do this:

function drawLineChart(month,report){
    Highcharts.chart('container', {
    ...

Related Articles