Post
Ask Question
Arpitha Girish

Arpitha Girish

  • NA
  • 7
  • 1.8k

to create multiple pie chart in jsp

Feb 15 2016 11:24 PM
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%@ page import="java.util.*" %>
<%@ page import="com.ensatus.daemon.controller.*" %>
<%@ page import="com.ensatus.daemon.base.*" %>
<%ArrayList<TransactionSummary> returnValue = new ArrayList<TransactionSummary>();
AdminController controlelr = new AdminController();
returnValue = controlelr.getMerchantDetails();%>
<head>
<title>Generate charts</title>
</head>
<body>
<div class="container">
<p> <font size="5dp" >Generate charts by</font>
<label class="checkbox-inline" >
<input type="checkbox" ><font color="#ff8433">Merchant</font>
</label>
<label class="checkbox-inline">
<input type="checkbox" ><font color="#ff4d4d">product</font>
</label>
<label class="checkbox-inline">
<input type="checkbox" ><font color="#00ff00">piller</font>
</label>
<label class="checkbox-inline">
<input type="checkbox" ><font color="#0000e6">NETS Sector(MCC)</font>
</label>
</p>
</div>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1= google.visualization.arrayToDataTable([
['Merchant','revenue'],
['Merchant 1',10],
['Merchant 2',20],
['Merchant 3',20],
['Merchant 4',15],
['Merchant 5',15]
]);
var data2 = google.visualization.arrayToDataTable([
['Merchant','revenue'],
['Merchant 1',10],
['Merchant 2',20],
['Merchant 3',40],
['Merchant 4',15],
['Merchant 5',15]
]);
var data3 = google.visualization.arrayToDataTable([
['Merchant','revenue'],
['Merchant 1',10],
['Merchant 2',20],
['Merchant 3',40],
['Merchant 4',15],
['Merchant 5',15]
]);
var data4 = google.visualization.arrayToDataTable([
['Merchant','revenue'],
['Merchant 1',10],
['Merchant 2',20],
['Merchant 3',40],
['Merchant 4',15],
['Merchant 5',15]
]);
var data5 = google.visualization.arrayToDataTable([
['Merchant','revenue'],
['Merchant 1',10],
['Merchant 2',20],
['Merchant 3',40],
['Merchant 4',15],
['Merchant 5',15]
]);
var options1 = {
title: 'REVENUE'
};
var options2 = {
title: 'TRANSACTION COUNT'
};
var options3 = {
title: 'TRANSACTION VALUE'
};
var options4 = {
title: 'TERMINALS LEASED'
};
var options5 = {
title: 'CARDS SOLD'
};
var chart1 = new google.visualization.PieChart(document.getElementById('piechart1'));
chart1.draw(data1, options1);
var chart2= new google.visualization.PieChart(document.getElementById('piechart2'));
chart2.draw(data2, options2);
var chart3 = new google.visualization.PieChart(document.getElementById('piechart3'));
chart3.draw(data3, options3);
var chart4= new google.visualization.PieChart(document.getElementById('piechart4'));
chart4.draw(data4, options4);
var chart5 = new google.visualization.PieChart(document.getElementById('piechart5'));
chart5.draw(data5, options5);
}
</script>
<div id="piechart1" style="width: 265px; height: 100px;float:left;"></div>
<div id="piechart2" style="width: 265px; height: 100px;float:left;"></div>
<div id="piechart3" style="width: 265px; height: 100px;float:left;"></div>
<div id="piechart4" style="width: 265px; height: 100px;float:left;"></div>
<div id="piechart5" style="width: 265px; height: 100px;float:left;"></div>
<%
for( int i=0; i< returnValue.size() ; i++)
{
TransactionSummary transaction = (TransactionSummary) returnValue.get(i);
String itemName = transaction.getItem().getItemName();
double revenue = transaction.getRevenue();
long transactioncount = transaction.getTransactionCount();
double transactionvalue = transaction.getTransactionValue();
int terminalsleased = transaction.getTerminalsLeased();
int cardssold = transaction.getCardsSold();
%>
<div class="row-fluid sortable">
<div class="box span3">
<div class="box-header well"<h2><i class="icon-th"></i> <%=itemName%></h2>
<div class="box-icon">
<a href="#" class="btn btn-close "><i class="icon-remove"></i></a>
</div>
</div>
<div class="box-content">
<div class="row-fluid">
<table class="table table-bordered" style="display: inline;">
<div style="float: left">
<div id="table table-bordered" style= "width:5px; height: 10px;float:left;"></div>
<div class="container">
<tbody>
<tr>
<td>revenue</td>
<td>$<%=revenue%></td>
</tr>
<tr>
<td>Transaction count</td>
<td><%=transactioncount%></td>
</tr>
<tr>
<td>Transaction value</td>
<td><%=transactionvalue%></td>
</tr>
<tr>
<td>Terminals leased</td>
<td><%=terminalsleased%></td>
</tr>
<tr>
<td>cards sold</td>
<td><%=cardssold%>4</td>
</tr>
</tbody>
</div>
</div>
</table>
</div>
</div>
</div><!--/span-->
<%
}
%>
<!-- The styles -->
<link id="bs-css" href="css/bootstrap-cerulean.css" rel="stylesheet">
<style type="text/css">
body {
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/charisma-app.css" rel="stylesheet">
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet">
<link href='css/fullcalendar.css' rel='stylesheet'>
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print'>
<link href='css/chosen.css' rel='stylesheet'>
<link href='css/uniform.default.css' rel='stylesheet'>
<link href='css/colorbox.css' rel='stylesheet'>
<link href='css/jquery.cleditor.css' rel='stylesheet'>
<link href='css/jquery.noty.css' rel='stylesheet'>
<link href='css/noty_theme_default.css' rel='stylesheet'>
<link href='css/elfinder.min.css' rel='stylesheet'>
<link href='css/elfinder.theme.css' rel='stylesheet'>
<link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
<link href='css/opa-icons.css' rel='stylesheet'>
<link href='css/uploadify.css' rel='stylesheet'>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- jQuery -->
<script src="js/jquery-1.7.2.min.js"></script>
<!-- jQuery UI -->
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<!-- transition / effect library -->
<script src="js/bootstrap-transition.js"></script>
<!-- alert enhancer library -->
<script src="js/bootstrap-alert.js"></script>
<!-- modal / dialog library -->
<script src="js/bootstrap-modal.js"></script>
<!-- custom dropdown library -->
<script src="js/bootstrap-dropdown.js"></script>
<!-- scrolspy library -->
<script src="js/bootstrap-scrollspy.js"></script>
<!-- library for creating tabs -->
<script src="js/bootstrap-tab.js"></script>
<!-- library for advanced tooltip -->
<script src="js/bootstrap-tooltip.js"></script>
<!-- popover effect library -->
<script src="js/bootstrap-popover.js"></script>
<!-- button enhancer library -->
<script src="js/bootstrap-button.js"></script>
<!-- accordion library (optional, not used in demo) -->
<script src="js/bootstrap-collapse.js"></script>
<!-- carousel slideshow library (optional, not used in demo) -->
<script src="js/bootstrap-carousel.js"></script>
<!-- autocomplete library -->
<script src="js/bootstrap-typeahead.js"></script>
<!-- tour library -->
<script src="js/bootstrap-tour.js"></script>
<!-- library for cookie management -->
<script src="js/jquery.cookie.js"></script>
<!-- calander plugin -->
<script src='js/fullcalendar.min.js'></script>
<!-- data table plugin -->
<script src='js/jquery.dataTables.min.js'></script>
<!-- chart libraries start -->
<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>
<!-- chart libraries end -->
<!-- select or dropdown enhancer -->
<script src="js/jquery.chosen.min.js"></script>
<!-- checkbox, radio, and file input styler -->
<script src="js/jquery.uniform.min.js"></script>
<!-- plugin for gallery image view -->
<script src="js/jquery.colorbox.min.js"></script>
<!-- rich text editor library -->
<script src="js/jquery.cleditor.min.js"></script>
<!-- notification plugin -->
<script src="js/jquery.noty.js"></script>
<!-- file manager library -->
<script src="js/jquery.elfinder.min.js"></script>
<!-- star rating plugin -->
<script src="js/jquery.raty.min.js"></script>
<!-- for iOS style toggle switch -->
<script src="js/jquery.iphone.toggle.js"></script>
<!-- autogrowing textarea plugin -->
<script src="js/jquery.autogrow-textarea.js"></script>
<!-- multiple file upload plugin -->
<script src="js/jquery.uploadify-3.1.min.js"></script>
<!-- history.js for cross-browser state change on ajax -->
<script src="js/jquery.history.js"></script>
<!-- application script for Charisma demo -->
<script src="js/charisma.js"></script>
</body>
</html>