Geochart de la Copa De Fútbol Mundial

¿Como Configurar un geochart de la Copa De Fútbol Mundial ?



Lo primero que tenemos que hacer es referciar el api ajax de google charts con la siguiente linea script:


 <!--referciar el api ajax de google charts-->



  <script type='text/javascript' src="https://www.google.com/jsapi"></script>



     <!--Tamaño del mapa-->



  <div id="country_div" style="width: 550px; height: 350px;"></div>




Ahora si ya que tenemos refenciando el api, lo que continua es configurarlo para indicar que tipo de gráfico es que queremos presentar en nuestra pagina web, para eso utilizamos la siguientes lineas de codigo:



////Cargar el API de visualización y el paquete GeoChart.



      google.load('visualization', '1', { 'packages': ['geochart'] });



      ////una devolución de llamada que se ejecutará cuando se carga el API de visualización de Google.



      google.setOnLoadCallback(drawRegionsMap);









En la segunda linea de código podemos apreciar que se llama a la función 'drawRegionsMap',dicha función es la encargada de crear y rellenar la tabla de datos que requiere nuestro mapa para poder ser visualizado.






//// se crea un arreglo, donde se indica que la primera linea el pais con que se va a trabajar 
      //// y en la segunda el valor numerico del mismo
      function drawRegionsMap() {
          var data = google.visualization.arrayToDataTable([
           ['Country', 'Copas Ganadas'],
           ['Brazil', 5],
           ['Germany', 4],
           ['Italy', 4],
           ['Argentina', 2],
           ['Uruguay', 2],
           ['France', 2],
           ['England', 1],
           ['Spain', 1]
         ]);






Ahora si continuamos con la función, el siguiente código es un arreglo el cual se encarga de configurar las opciones que deberá tener nuestro mapa.



//Estilos de Grafico en Formato JSON



          var options = { legend: 'none', // se quita el slider indicador de valores minimos y maximos



              datalessRegionColor : 'Peru', // Indica en Color de los paises que no han ganado



              backgroundColor: { fill: 'dodgerblue',stroke:'DodgerBlue',strokeWidth:'5' },//color del relleno



              colorAxis: { colors: ['Gold', 'GoldenRod']}// color del valor minimo y del malor maximo



          };




////se instacia y se dibuja el grafico
          var chart = new google.visualization.GeoChart(document.getElementById('country_div'));
          chart.draw(data, options);














Y Por Ultimo añadimos una tabla y su diseño para dar un presentación mejor a nuestro gráfico.














 <!--Hoja del Estilos de la tabla-->
<style>
    table{
        border-radius: 15px;
        border: 1px solid white;
        background-color: #808080;
    }
    th,td{
        color: White;
        font-family: Consolas;
        font-weight: 700;
        padding: 5px;
    }
    body{
        color: Black;
        font-family: Consolas;
    }
</style>
 </head>
 <body>
    <div id="chart_div" style="width: auto; height: auto;">
        <h2>Copas Mundiales De Futbol</h2>
        <table>
            <tr>
                <th>Campeón</th>
                <th>Años</th>
            </tr>
            <tr>
                <td>Brasil</td>
                <td>1958, 1962, 1970, 1994, 2002</td>
            </tr>
            <tr>
                <td>Alemania</td>
                <td>1954, 1974, 1990, 2014</td>
            </tr>
            <tr>
                <td>Italia</td>
                <td>1934, 1938, 1982, 2006</td>
            </tr>
            <tr>
                <td>Argentina</td>
                <td>1978, 1986</td>
            </tr>
            <tr>
                <td>Uruguay</td>
                <td>1930, 1950</td>
            </tr>
            <tr>
                <td>Francia</td>
                <td>1998</td>
            </tr>
            <tr>
                <td>Inglaterra</td>
                <td>1966</td>
            </tr>
            <tr>
                <td>España</td>
                <td>2010</td>
            </tr>
        </table>
    </div>























Descargar Ejemplo
































































































Entradas más populares de este blog









Geochart - Republica Mexicana




















Imagen







 Sencillo ejemplo de como utilizar el Geochart de los "Graficos de Google".   Como se puede apreciar en la siguiente imagen el mapa muestra todos los estados de la republica mexicana, teñidos en distintos colores de los cuales indican la cantidad de población del país, ademas si se acerca el cursor ha alguno de ellos aparace un pequeño tooltip con el nombre del estado y la población del estado en el año 2013.         ¿Como funciona geochart en este ejemplo?     Lo primero que tenemos que hacer es referciar el api ajax de  google  charts con la siguiente linea script:  < script  type = 'text/javascript'  src = 'https://www.google.com/jsapi' ></ script >    Ahora si ya que tenemos refenciado la api, lo que continua es configurar el api para indicar que tipo de gráfico es que queremos presentar en nuestra pagina web, para eso utilizamos la siguientes lineas de codigo:   //Cargar el API de visualización y el paquete GeoChart.       google.load ( 'v








Leer más










TypeScript (Tipos De Datos)




















Imagen







 TypeScript  es la solución que presenta Microsoft  que nos permite trabajar con JavaScript como si fuera un lenguaje de programación orientado a objetos, así es un JavaScript que cuenta con su propio compilador.     TypeScript se presenta como una tecnología escalable capaz de ofrecer clases, módulos e interfaces que nos permiten construir componentes robustos, algo que debemos entender antes de continuar es que TypeScript se desarrollo bajo la idea de “Starts from JavaScript, Ends with JavaScript”, esto quiere decir que nuestros archivos  se codifican en un JavaScript regido por las reglas de la POO, y que cuando se compilan se crea una archivo con el JavaScript normal, esto permite que TypeScript puede utilizar código JavaScript existente e incorporar bibliotecas de JavaScript como  jQuery, MongoDB, Node.js, y D3.js, y ser utilizado o extendido  desde otro código o libreria JavaScript.      Básicamente el compilador del TypeScript se encarga de limpiar el código y dejar simplemente 








Leer más










JS convertir una cadena de texto en mayúsculas, minúsculas o solo la primer letra de cada texto




















Imagen







Ejemplo en JS con Jquery de como podemos transformar las letras de un texto ingresado en un texto capitalizad o en cada una de sus palabras o solo la primer letra de todo el texto, convertir en mayúsculas todo el texto o todo en minúsculas .    <html>       <head></head>       <body>           <input type= "text"  class= "capitalizeText"  placeholder= "Texto Capitalizado" /><br><br>           <input type= "text"   class= "firstLetterText"  placeholder= "Primer letra mayúsculas" /><br><br>           <input type= "text"  class= "toUpperText"  placeholder= "TODO MAYÚSCULAS" /><br><br>           <input type= "text"  class= "toLowerText"  placeholder= "todo minúsculas" /><br><br>                      <script src=" https://ajax.googleapis. com/ajax/libs/jquery/3.1.1/ jque








Leer más