Google Chart con GridView y ModalPopUp
Veremos en este post cómo usar la API de
Google Chart. Esta API es muy sencilla de usar, simplemente hay que construir una url que contenga una sintaxis correcta, esta url nos devuelve una imagen que podemos recorger y mostrarla en un control image.
Pero lo vamos a complicar un poco, vamos a mostrar un gráfico de tarta pero recogiendo los valores de una fila de un GridView. Para ello utilizaremos un código que ya mostré en
otro post y que nos permite elegir una fila simplemente haciendo click sobre ella.
El resultado de la estadística lo mostraremos en un ModalPopUpExtender al que además le añadiremos un DragPanel para que nos permita mover la estadística. El resultado será como este:
Como ya dije, no voy a explicar cómo seleccionar la row para mostrar la estadística, eso aquí, el grid está basado en una tabla de la base de datos de prueba que nos proporciona Microsoft, Adventureworks, la pueden bajar aquí.
El código no es nada complejo, después de elegir la fila, componemos la url válida de google chart, la almacenaremos en un label que no se ve en la página, tiene un css que la oculta:
<asp:Label ID="url" Text="Vacio" runat="server" CssClass="hide"></asp:Label>
Y en el evento SelectedIndexChanged del GridView rellenamos esta label, tal que:
Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged
' COMPONE URL GOOGLE CHART
Dim _Max As Double = (Math.Max(Math.Max(Convert.ToDouble(Me.GridView1.SelectedRow.Cells(2).Text), Convert.ToDouble(Me.GridView1.SelectedRow.Cells(3).Text)), Convert.ToDouble(Me.GridView1.SelectedRow.Cells(4).Text)))
Dim _Min As Double = (Math.Min(Math.Min(Convert.ToDouble(Me.GridView1.SelectedRow.Cells(2).Text), Convert.ToDouble(Me.GridView1.SelectedRow.Cells(3).Text)), Convert.ToDouble(Me.GridView1.SelectedRow.Cells(4).Text)))
Me.url.Text = "http://chart.apis.google.com/chart?chs=350x100&chd=t:" & Format(Int(Me.GridView1.SelectedRow.Cells(2).Text), "#") & "," & Format(Int(Me.GridView1.SelectedRow.Cells(3).Text), "#") & "," & Format(Int(Me.GridView1.SelectedRow.Cells(4).Text), "#") & "&cht=p3&chl=" & Me.GridView1.SelectedRow.Cells(2).Text & "|" & Me.GridView1.SelectedRow.Cells(3).Text & "|" & Me.GridView1.SelectedRow.Cells(4).Text & "&chds=0," & Format(Int(_Max), "#")
End Sub
Este código compone la url, en concreto, el gráfico de tarta, entre otras cosas hay que pasarle los valores mínimos y máximos para que se dibuje de forma correcta. De ahí que se utilice Math.Max y Math.Min para ello.
La imagen con la estadística la he colocado dentro de un ModalPopUpExtender, a este se le ha aplicado estilos para que se muestre de forma atractiva. Estos estilos lo pueden ver si se bajan el código del proyecto al final del post.
El javascript que llama el link de "Ver Imagen" es el siguiente:
<script type="text/javascript">
function getChart(){
// RECODIFICA URL GOOGLE.
var _url = document.getElementById("url").innerHTML;
_url= _url.replace(/&/g,"&");
// COMPRUEBA SI SE HA ELEGIDO ROW
if (_url != 'Vacio')
{
document.getElementById('GoogleChart').src = _url;
document.getElementById('GoogleChart').style.visibility="visible";
}
else
{
document.getElementById('GoogleChart').style.visibility="hidden";
}
return false;
}
</script>
¿Qué hace este script? Lo primero es cambiar el & por el encoding correcto que exige Google Chart, &, para ello se utiliza la función replace. A continuación comprueba que se ha elegido una fila en el GridView, si esto no se hubiera hecho, la label que hemos usado para rellenar la url tendría un valor de "Vacio", si esto es así, lo que se hace es ocultar la imagen para que no se vea mal. Si se ha elegido una row entonces la muestra.
En cuanto al DragPanel del ModalPopUpExtender es muy sencillo, usamos el control DragPanelExtender del ToolKit de Ajax, ahora bien hay que realizar un truco y es incluir dentro del panel al que queremos dragear otro panel que sirva de contenedor, tal que así:
<ajaxcontroltoolkit:ModalPopupExtender ID="mdlPopupExtender" runat="server" TargetControlID="MuestraChart" PopupControlID="mdlpopup"
CancelControlID="BtnCerrar" BackgroundCssClass="modalBackground" RepositionMode="None" BehaviorID="mdlpop" >
</ajaxcontroltoolkit:ModalPopupExtender>
<ajaxcontroltoolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="mdlpopup" DragHandleID="panele">
</ajaxcontroltoolkit:DragPanelExtender>
<asp:linkbutton ID="MuestraChart" runat="server" Text="Ver Imagen" OnClientClick="return getChart();">
</asp:linkbutton>
<asp:panel CssClass="containermdl" ID="mdlpopup" runat="server" style="display:none">
<asp:panel ID="panele" runat="server">
<div class="headermdl">
Prueba Google Chart</div>
<div class="bodymdl">
<img src="" alt="Sample chart" id="GoogleChart" style="visibility:hidden" runat="server" />
</div>
<div class="footermdl">
<asp:Button ID="BtnCerrar" CssClass="closemdl" runat="server" />
</div>
</asp:panel>
</asp:panel>
Y ahora el DragPanelExtender apuntará a "panele" como DragHandleId y a "mdlpopup" como TargetControlId.
Por supuesto, para utilizar otro tipo de gráfico, simplemente habrá que cambiar el código asociado al evento SelectedIndexChanged del GridView.
Creo no haberme olvidado nada. Saludos
Bajar fuente.