Hola,
estoy desarrollando un proyecto web en jsp y necesito mostrar varias
gráficas con Google Charts pero cuando introduzco el codigo necesario solo
me muestra la primera que aparece en la página.
El código es el siguiente:
<table>
<tr>
<th id="columna_centro">Evolución ventas
<%=request.getParameter("ano1") %> vs. <%=request.getParameter("ano2")
%></th>
</tr>
<tr>
<td><div id="chart_div_evolucion"
style="margin-left: 30px;"></div></td>
</tr>
</table>
<br>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript">
google.charts.load('current', {packages:
['corechart', 'bar'], 'language': 'es'});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data =
google.visualization.arrayToDataTable([
['Year', "" + <%=request.getParameter("ano1")
%> +"", "" + <%=request.getParameter("ano2") %> +""],
[<%=data%>]
]);
var options = {
legend: { position: 'bottom' },
vAxis: {
format: 'currency'
},
colors: ['#BDBDBD', '#E6E6E6'],
height: 400,
width: 700
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div_evolucion'));
chart.draw(data, options);
}
</script>
<table>
<tr>
<th id="columna_centro">Ventas acumuladas
<%=request.getParameter("ano1") %> vs. <%=request.getParameter("ano2")
%><br> (Hasta mes actual)</th>
<th id="columna_centro">Ventas proyectadas
<%=request.getParameter("ano1") %> vs. <%=request.getParameter("ano2")
%></th>
</tr>
<tr>
<%if(porcentajeAcumulado < 0){ %>
<td style="color:
red"><%=Math.round(porcentajeAcumulado) %>%</td>
<%}else{ %>
<td><%=Math.round(porcentajeAcumulado) %>%</td>
<%} %>
<%if(porcentajeProyectado < 0){ %>
<td style="color:
red"><%=Math.round(porcentajeProyectado) %>%</td>
<%}else{ %>
<td><%=Math.round(porcentajeProyectado) %>%</td>
<%} %>
</tr>
<tr>
<td>
<div id="chart_div_acumulada" style="width:
450px; height: 400px; padding-left: 50px;"></div>
<script type="text/javascript">
google.charts.load('current', {packages:
['corechart', 'bar'], 'language': 'es'});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data =
google.visualization.arrayToDataTable([
["", "", { role: "style" }],
[""+<%=request.getParameter("ano1") %>,
<%=ventaAcumulada1%>, '#BDBDBD'],
[""+<%=request.getParameter("ano2") %>,
<%=ventaAcumulada2%>, '#E6E6E6'],
]);
var options = {
legend: { position: 'none' },
bar: {groupWidth: "50%"},
chart: {
title: ' ',
},
bars: 'vertical',
vAxis: {format: 'currency'},
height: 400,
colors: ['#BDBDBD', '#E6E6E6']
};
var chart = new
google.visualization.ColumnChart(document.getElementById("chart_div_acumulada"));
chart.draw(data,
google.charts.Bar.convertOptions(options));
}
</script>
</td>
<td>
<div id="chart_div_proyectada" style="width:
450px; height: 400px; padding-left: 50px;"></div>
<script type="text/javascript">
google.charts.load('current', {packages:
['corechart', 'bar'], 'language': 'es'});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data =
google.visualization.arrayToDataTable([
["", "", { role: "style" }],
[""+<%=request.getParameter("ano1") %>,
<%=ventaProyectada1%>, '#BDBDBD'],
[""+<%=request.getParameter("ano2") %>,
<%=ventaProyectada2%>, '#E6E6E6'],
]);
var options = {
legend: { position: 'none' },
bar: {groupWidth: "50%"},
chart: {
title: ' ',
},
bars: 'vertical',
vAxis: {format: 'currency'},
height: 400,
colors: ['#BDBDBD', '#E6E6E6']
};
var chart = new
google.visualization.ColumnChart(document.getElementById("chart_div_proyectada"));
chart.draw(data,
google.charts.Bar.convertOptions(options));
}
</script>
</td>
</tr>
</table>
Y solo se muestra la gráfica de la primera tabla
¿Alguna solución?
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/851a760e-d99c-4005-8d59-be7b2eb60c8a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
