weixin_33725126 2014-02-11 15:36 采纳率: 0%
浏览 27

填充chartjs ajax servlet

I'm quite new to ajax and charting in java. I'm very much interested using ChartJS for created dynamic dashboards for web reports. I would like ask how am I be able to populate "Chart Labels" and "Data Sets" using ajax and data coming from a servlet response.

I tried some research and tested some tutorials about ajax and ChartJS but I can't seem to make it work..

    <html>
        <head>
            <title>Bar Chart</title>
            <script src="../Chart.js"></script>
            <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
            <style>
                canvas{
                }
            </style>
        </head>
        <body>
            <canvas id="canvas" height="450" width="600"></canvas>


        <script>

            var barChartData = {
                labels : [,"January","February","March","April","May","June","July"],
                datasets : [
                    {
                        fillColor : "rgba(220,220,220,0.5)",
                        strokeColor : "rgba(220,220,220,1)",
                        data : [65,59,90,81,56,55,40]
                    },
                    {
                        fillColor : "rgba(151,187,205,0.5)",
                        strokeColor : "rgba(151,187,205,1)",
                        data : [28,48,40,19,96,27,100]
                    }
                ]

            }

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

        </script>
        </body>
    </html>
  • 写回答

1条回答 默认 最新

  • weixin_33682719 2014-02-12 08:04
    关注

    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>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择
  • ¥15 这款软件是什么?需要能满足我的需求
  • ¥15 SpringSecurityOauth2登陆前后request不一致