Pie chart using google chart

Question

I am trying to run this javascript code which retrive data from the database and a string is created this string is passed to the draw method which creates a pie chart but it is not displaying any thing please help....

<%@page import="java.io.File"%>
<%@page import="java.sql.PreparedStatement"%>

<%@page import="java.sql.Statement"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="Persistence.FolderBroker"%>
<%@page import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
<%
    FolderBroker fb = new FolderBroker();
    Connection conn = fb.insert();
    ResultSet rs, rs1;
    String s = "";
    Statement st = conn.createStatement();
    PreparedStatement query = conn
            .prepareStatement("select sum(frequency) from tokendetails;");
    rs = query.executeQuery();
    rs.next();
    int count = rs.getInt(1);
    String sql = "select filename, sum(frequency) as freq from tokendetails group by filename;";
    rs1 = st.executeQuery(sql);
    while (rs1.next()) {
        String file = rs1.getString(1);
        File f = new File(file);
        String files = f.getName();
        double freq = ((rs1.getInt(2)) * 100 / count);
        s = s + "['" + files + "', " + freq + "]";
    }
    String str = "[" + s + "]";
    System.out.println(str);
%>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>



<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var string="<%=str%>
    ";
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {
        'packages' : [ 'corechart' ]
    });
    google.setOnLoadCallback(drawChart);
    // Set a callback to run when the Google Visualization API is loaded.

    function drawChart() {

        alert(string);

        var data = google.visualization.arrayToDataTable();

        data.addColumn('string', 'File name');
        data.addColumn('number', 'percent');
        data.addRows(string);

        // Set chart options
        var options = {
            'title' : 'Chart View',
            'width' : 400,
            'height' : 300
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document
                .getElementById('chart_div'));
        chart.draw(data, options);
        alert(str);
    }
</script>
</head>

<body>

    <div id="chart_div" style="width: 400; height: 300"></div>

</body>
</html>

Answer 1

Ok, your problem is with this line:

var string="<%=str%>
    ";

It is converted to something like:

var string="['file1', 1, 'file2', 2...]
    ";

this is wrong, because it must be not String type, but array type. So, you have to remove double-quoutes and turn it to just:

var arrayData=<%=str%>;
...
data.addRows(arrayData);

Pie chart using google chart

Question

1 answers

solution1
0 2014-09-12 07:19:11

Pie chart using google chart

Question

1 answers

solution1 0 2014-09-12 07:19:11

solution1
0 2014-09-12 07:19:11