CODEWITHSUNDEEP
javascriptjavajspcharts
raviraja
raviraja

Reputation: 706

Google chart not displaying in jsp

I am getting a list of objects from DAO and setting it as a session Attribute to access it in other jsps as below

list<PlayerBean> playerList=serviceDao.getPlayerData();
session.setAttribute("playerlist",playerList);

PlayerBean is having 2 properties 1.playerName 2.runsscored

Now i am trying to display a bar graph of playername vs runsscored in a jsp and i am using google chart api for that as below

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graphical View</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic()
{
var data = google.visualization.DataTable();
data.addColumn('string', 'Player Name');
data.addColumn('number', 'Runs Scored');

<c:forEach items="${playerlist}" var="listplayers">
data.addRow('${listplayers.playerName}',${listplayers.runsscored});
</c:forEach>

  var options = {
    title: 'Player Name vs Number of runs scored',
    hAxis: {
      title: 'Player Name'
    },
    vAxis: {
      title: 'Runs Scored'
    }
  };

  var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div'));

  chart.draw(data, options);
}}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

but nothing is being displayed in the jsp.

I tried inspect element and view page source in chrome,it is showing as below

<html>
<head>
  <title>Graphical View</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawBasic);

    function drawBasic() {
      var data = google.visualization.DataTable();

      data.addColumn('string', 'Player Name');
      data.addColumn('number', 'Runs Scored');

      data.addRow('John',250);
      data.addRow('sachin',165); 
      data.addRow('ponting',54); 
      data.addRow('richards',320);

      var options = {
        title: 'Player Name vs Number of runs scored',
        hAxis: {
          title: 'Player Name'
        },
        vAxis: {
          title: 'Runs Scored'
        }
      };

      var chart = new google.visualization.ColumnChart(
        document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

doesn't it mean that browser is getting the data but not displaying? Can anyone help me with what the exact problem might be? and please suggest a solution also.

Thanks in advance,

Upvotes: 0

Views: 737

Answers (1)

Gurkan Yesilyurt
Gurkan Yesilyurt

Reputation: 2675

First off, add new keyword when creating datatable

var data = new google.visualization.DataTable()

Add brackets,

addRow, it must be an array, or null

data.addRow(['${listplayers.playerName}',${listplayers.runss‌​cored}])

Upvotes: 1

Related Questions