Crea una gráfica personalizada con Google Chart

En el ejercicio vamos a crear una gráfica de Pie con Google Chart, para esto vamos a ingresar a:


https://developers.google.com/chart/interactive/docs/gallery/piechart


Seleccionamos la gráfica que deseamos anexar en nuestra WebForm, abajo de cada gráfica aparece el código HTML, seleccionamos y copiamos el código entre las etiquetas <Head> ... </Head>



Creamos una WebForm y copiamos el código entre las etiquetas <Head>...</Head>.


Ahora debemos copiar la etiqueta <div>...</div> que contiene el llamado de la función.


Lo copiamos en nuestra WebForms.


Si ejecutamos la WebForm se visualizara la gráfica.

Ahora lo que haremos será cambiar los datos y el porcentaje que se visualiza en la gráfica.

Podrás llamar la información de una tabla de SQL Server o el contenido de un GriedView, para el ejemplo utilizaremos en contenido de un DataTable, para ellos utilizaremos el código del Post: 



En el código de nuestra WebForm crearemos una función que nos regresara la cadena que contendrá la información que se mostrara en la gráfica.



En el código HTMl que copiamos para la gráfica borraremos las siguientes líneas.


Las sustituimos por lo siguiente <%=crea_grafica()%>.


Ejecutamos el WebForm y veremos el resultado.



Publicar un comentario

5 Comentarios

  1. Hola, estoy queriendo hacer algo asi pero para verlo en un formulario winform en vb .net. Y no logro que se vea en el webbrowser. Creo el archivo html pero queda blanco el webbrowser no hay forma de que se vea, probe mil formas y no hay caso. Si abro el html directo en chrome o Edge se ve perfecto el grafico. Alguna sugerencia? gracias

    ResponderBorrar
    Respuestas
    1. Hola Roberto, donde tienes la gráfica web?, esta publicada en internet o la llamas en modo local?, muchas veces si ejecutas alguna aplicación web en local corre sin problema, pero si llamas la gráfica desde un .exe, esta debe estar publicada en internet.

      Saludos

      Borrar
  2. Hola la grafica la guardo en un archivo HTML, por ejemplo se llama Chart2.html, ese archivo yo quiero que se vuisualice en un control webBrowser en un form de una aplicacion winform VB .net 2017. Si abro el archivo Chart2.html en chrome, firefox o Edge veo sin problemas el gráfico, pero si lo quiero ver en mi formulario, simplemente sale vacío el webbrowser, sin dar error ni nada, simplemente hace como si no le hubiese pasado nada para mostrar.

    ResponderBorrar
    Respuestas
    1. Yo lo mostraría así:
      Me.WebBrowser1.Navigate("http://10.20.30.40/chart2.html")

      Pero como te comentaba debe estar en una IP publica o publicarlo en un hosting gratis.

      Borrar
  3. Muchas gracias, lo probé ya que tengo un servidor con IP publica, publique el html, todo bien pero cuando ejecuto mi aplicacion winform el webbrowser no muestra nada, una lástima pensé que se podría hacer algo asi, pero se ve que no se puede. Muchas gracias por la ayuda. Saludos

    ResponderBorrar