You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.1 KiB
97 lines
3.1 KiB
<%@ 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>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|
<link href="${pageContext.request.contextPath}/CSS/style.css" rel="stylesheet" type="text/css" >
|
|
|
|
<title>GRAPH</title>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
|
|
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
$(document).ready(function() {
|
|
|
|
var title = '${title}';
|
|
var maxVal = '${maxVal}';
|
|
var lowVal = '${lowVal}';
|
|
var width = '${width}';
|
|
var height = '${height}';
|
|
var left = '${left}';
|
|
var top = '${top}';
|
|
var divGraph = '${divGraph}';
|
|
var legPos = '${legPos}';
|
|
var direc = '${direc}';
|
|
var heightPour = '${heightPour}';
|
|
var widthPour = '${widthPour}';
|
|
|
|
|
|
function drawLineColors() {
|
|
$.ajax({
|
|
url: 'GRAPH_CALL',
|
|
dataType: 'json',
|
|
success: function (json) {
|
|
console.log(json);
|
|
// assumes json is a DataTable-compatible JSON string
|
|
var data = new google.visualization.DataTable(json);
|
|
|
|
console.log(data);
|
|
var options = {
|
|
title: title,
|
|
titlePosition: {'position':'top','alignment':'center'},
|
|
|
|
hAxis: {
|
|
//title: 'Season Days',
|
|
gridlines: {count: 0},
|
|
|
|
},
|
|
|
|
vAxis: {
|
|
//title: 'Relative Rotisserie Points',
|
|
direction: direc,
|
|
gridlines: {color: '#e3e3e2', count: 11},
|
|
viewWindow: {
|
|
max: maxVal,
|
|
min: lowVal
|
|
}
|
|
},
|
|
|
|
|
|
'width':width,
|
|
'height':height,
|
|
legend: {'position':legPos,'alignment':'center', textStyle: {fontSize: 10}},
|
|
chartArea:{
|
|
left:left,top:top,width:widthPour+"%",height:heightPour+"%",
|
|
/* backgroundColor: {
|
|
stroke: '#4322c0',
|
|
strokeWidth: 1
|
|
} */
|
|
},
|
|
colors: ['#9b2b7a', '#FFC300', '#C70039','#d3fe04','#33ebff','#ff33ed','#0309af','#0aaf03','#fe0404','#bd5200','#037512','#acafad','#070105']
|
|
};
|
|
var chart = new google.visualization.LineChart(document.getElementById(divGraph));
|
|
chart.draw(data, options);
|
|
}
|
|
});
|
|
}
|
|
|
|
google.charts.load('current', {packages: ['corechart', 'line']});
|
|
google.charts.setOnLoadCallback(drawLineColors);
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<c:set var="divGraphe" value="${divGraph}" />
|
|
|
|
<div style="text-align:center;" id="${divGraphe}"></div>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|