Graph not displaying when using ajax calls and spring mvc

[ayomirotoye]

I am including the graph as an ajax response using spring mvc

The controller code:

@RequestMapping(value = {"/welcome"}, method = RequestMethod.GET)
    public ModelAndView defaultPages(HttpServletRequest request, HttpSession session) {
        ModelAndView model = new ModelAndView();
        
        
        Gson gsonObj = new Gson();
        Map<Object, Object> map = null;
        List<Map<Object, Object>> list = new ArrayList<Map<Object, Object>>();

        map = new HashMap<Object, Object>();
        map.put("label", "Australia");
        map.put("y", 81000);
        list.add(map);
        map = new HashMap<Object, Object>();
        map.put("label", "China");
        map.put("y", 47000);
        list.add(map);
        map = new HashMap<Object, Object>();
        map.put("label", "Brazil");
        map.put("y", 32500);
        list.add(map);
        map = new HashMap<Object, Object>();
        map.put("label", "Guinea");
        map.put("y", 19300);
        list.add(map);
        map = new HashMap<Object, Object>();
        map.put("label", "India");
        map.put("y", 19000);
        list.add(map);
        map = new HashMap<Object, Object>();
        map.put("label", "Jamaica");
        map.put("y", 9800);
        list.add(map);
        map = new HashMap<Object, Object>();
        map.put("label", "Kazakhstan");
        map.put("y", 5500);
        list.add(map);
        map = new HashMap<Object, Object>();
        map.put("label", "Russia");
        map.put("y", 5300);
        list.add(map);
        map = new HashMap<Object, Object>();
        map.put("label", "Others");
        map.put("y", 15060);
        list.add(map);

        String dataPoints = gsonObj.toJson(list);
        model.addObject("dataPoints", dataPoints);
        model.setViewName("home");

        return model;
    }

The view

<c:set var="points" value="${dataPoints}"></c:set>
            <c:out value="${dataPoints}"></c:out>
            <div id="getPointsForMe">${dataPoints}</div>
            <div id="chartContainer" style="height: 370px; width: 100%">

            </div>
        <script type="text/javascript">
window.onload = function() { 
   console.log("got here");
   var thePoints = $('#getPointsForMe').html();
   console.log(thePoints);
var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      theme: "light2",
      title: {
              text: "World Bauxite Production"
      },
      subtitles: [{
              text: "in tonnes"
      }],
      data: [{
              type: "doughnut",
              yValueFormatString: "#,##0",
              indexLabel: "{label}: {y}K",
              toolTipContent: "{y}K tonnes",
              dataPoints : thePoints
          }]
          });
          chart.render();
          };
          
        </script>

ajax call:

function goTo(link) {
var url = ‘${pageContext.request.contextPath}/’ + link;
$(‘#result1’).html(spinner);
$.get(url, function (result) {
$(‘#result1’).html(result);
});
}

[Vishwas R]

@ayomirotoye,

It seems to be working fine. Can you kindly share sample project over Onedrive or Google-Drive so that we can look into your code, understand your scenario better and help you out?

Please find the screenshot below:

—
Vishwas R
Team CanvasJS