[Chartjs]-Populate chartjs ajax servlet

by

1👍

Found the answer, I just experiment on some tutorials…
This one is working…

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
        <script src="js/Chart.js"></script>
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>   
        <br />

        <br/>


        <br/>
        <canvas id="canvas" height="450" width="700"></canvas>

    </body>
</html> 
<script>

            $( document ).ready(function(){
                GetCountryList();
            });


    function GetCountryList(){
        var data2 = "";
        $.ajax({
            type: "POST",
            url: "qs",
            data: "{\"type\":" + "\"country\""+      
           "}",
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function(response) {

                var resultsArray =  (typeof response) == 'string' ? eval('(' + response + ')')    : response;  



                var data2 = new Array();
                for(var i=0; i<resultsArray.length;i++){
                    data2[i] =  resultsArray[i].workgroup;


                    var barChartData = {
                            labels : data2,
                            datasets : [
                                    {
                                            fillColor : "rgba(220,220,220,0.5)",
                                            strokeColor : "rgba(220,220,220,1)",
                                            data : [65,59,90,81,56,55,40,80]
                                    }
                            ]

                    };
               }


        var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

            }


        });                 

    }

</script>

Leave a comment