Home forums Using CanvasJS Graph not displaying when using ajax calls and spring mvc

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 4 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #20941

    ayomirotoye
    Member

    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);
    });
    }

    #20955

    Vishwas R
    Keymaster

    @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:
    CanvasJS Doughnut Chart in Spring MVC


    Vishwas R
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.