Graficos en Blogger o Pagina Web con Highcharts y GoogleCharts

Si algún momento visitaste una página web o blog de datos con gráficas interactivas o dinámicas, este truco le interesa, vamos a explicar c...


Si algún momento visitaste una página web o blog de datos con gráficas interactivas o dinámicas, este truco le interesa, vamos a explicar como agregar o integrarlas en una Página Web o Blogger, con solo copiar directamente código javaScript que se cargan directamente en nuestra web site, principalmente los servicios de Google Charts o Highcharts. Con este sencillo minitutorial puede hacer que sus datos cobren vida, ambos servicios le facilitan la creación de gráficos a los desarrolladores o webmasters. Google Charts o Highcharts son dos servicios para crear gráficos con JavaScript más populares.

Ambos tienen una biblioteca de gráficos escrita en JavaScript, que ofrece una manera fácil de agregar gráficos interactivos a su sitio web, blog o aplicación web. Actualmente soporta gráficos de: línea, spline, area, areaspline, columna, bar, pie (torta), scatter, angular gauges, arearange, areasplinerange, columnrange, burbuja, box plot, barras de error, embudo, cascada, polar y mapas tematicos, principalmente en Highcharts.

En cuanto a la compatibilidad, plataformas y responsive, funcionan en todos los navegadores móviles y de escritorio modernos, incluyendo el iPhone / iPad o iOS / Android, e incluso Internet Explorer, porque se basa únicamente en tecnologías de navegación nativas y no requiere plugins de cliente como Flash o Java, no es necesario instalar nada en el servidor PHP o ASP.NET. A continuación el truco:


A: HIGHCHARTS




Gráfica 1: Ejemplo de Highcharts charts

En el servicio Highcharts no es muy difícil pero con más opciones como lo puedes ver en los demos o ejemplos (http://www.highcharts.com/demo/), solo hay una variante con respecto a google charts, las cuales constan de dos pasos:

Paso 1: Copia el siguiente código para gráficos en la cabecera de tu plantilla HTML, entre <head> y </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script src='http://code.highcharts.com/highcharts.js'/>
<script src='http://code.highcharts.com/modules/exporting.js'/>

Paso 2: En la sección de demos, escoger, click el gráfico que necesitas o te gusta e ir las opciones de VIEW OPTIONS o EDIT IN JSFIDDLE, y luego copiar el código JavaScript en el cuerpo entre <body> y </body> de tu plantilla o Gadget/JavaScript, y pegar (asegúrate que el código quede entre <script type="text/javascript"> y </script> sin olvidar el <div.../>) el código en el lugar que quieres insertar, como el siguiente ejemplo del gráfico de línea (line chart):
<div id="graficaLineal" style="width: 100%; height: 500px; margin: 0 auto"></div>
<script type="text/javascript">
 var chart;
 $(document).ready(function() {
  chart = new Highcharts.Chart({
   chart: {
    renderTo: 'graficaLineal',
    defaultSeriesType: 'line'
   },
   title: {
    text: 'Ruben Apaza: Cantidad de Visitas, 2010-2016'
   },
   subtitle: {
    text: 'www.rubenapaza.com'
   },
   xAxis: {
    categories: ['2010',
'2011','2011','2012','2013','2014','2015','2016'],
    title: {
     text: 'Año'
    }
   },
   yAxis: {
    title: {
     text: 'Nº Visitas'
    }
   },
   tooltip: {
    enabled: true,
    formatter: function() {
     return '<b>'+ this.series.name +'</b><br/>'+
      this.x +': '+ this.y +' '+this.series.name;
    }
   },
   plotOptions: {
    line: {
     dataLabels: {
      enabled: true
     },
     enableMouseTracking: true
    }
   },
   series: [{
                  name: 'Visitas',
                  data: [37097,35027,45005,80090,74093,70048,114008,208086]
              },
              {
                  name: 'Visitantes Únicos',
                  data: [31022,28070,36055,64000,58018,55081,85029,122061]
              },
              {
                  name: 'Páginas Vistas',
                  data: [60067,52026,64082,115003,119037,97051,160061,346043]
              }],
  });
 });  
</script>
Y finalmente modificar los datos según tu necesidad. Como Bonus extra con Highcharts se puede agregar MAPAS con Highmaps, para ello se requiere adicionalmente los siguientes códigos entre <head> y </head>, por ejemplo de Bolivia, con el código obtenido de http://code.highcharts.com/mapdata/ opción DEMOS:
<script src='https://code.jquery.com/jquery-3.1.1.min.js'/>
<script src='https://code.highcharts.com/maps/modules/map.js'/>
<script src='https://code.highcharts.com/mapdata/custom/world.js'/>

<script src='https://code.highcharts.com/maps/highmaps.js'/>
<script src='https://code.highcharts.com/maps/modules/exporting.js'/>
<script src='https://code.highcharts.com/mapdata/countries/bo/bo-all.js'/>
Y copiar y pegar el código en el donde necesites poner el mapa, como sigue:
<div id="bolivia" style="width: 100%; height: 500px; margin: 0 auto">
</div>
<script type="text/javascript">
var data = [
    ['bo-lp', 2719344],
    ['bo-cb', 1762761],
    ['bo-cq', 581347],
    ['bo-eb', 422008],
    ['bo-or', 494587],
    ['bo-po', 828093],
    ['bo-sc', 2657762],
    ['bo-tr', 483518],
    ['bo-pa', 110436]
];
Highcharts.mapChart('bolivia', {
    chart: {
        map: 'countries/bo/bo-all'
    },
    title: {
        text: 'BOLIVIA: Poblacion Departamental, 2012'
    },
    subtitle: {
        text: '(Habitantes)'
    },
    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },
    colorAxis: {
        min: 0
    },
    series: [{
        data: data,
        name: 'Poblacion',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});
</script>

Debe quedar como el siguiente ejemplo de Bolivia

Grafica 3: Ejemplo de Mapa Temático de la Población de Bolivia, Censo 2012



B: GOOGLE CHARTS

Gráfica 1: Ejemplo de google charts

En el servicio google es más fácil pero no es responsive (no es multiplataforma), solo tienes que a esta dirección https://google-developers.appspot.com/chart/ de ahí escoger el grafico que necesitas o te gusta, y luego copiar el código JavaScript en el cuerpo entre <body> y </body> de tu plantilla o Gadget/JavaScript -sin necesidad de agregar algo en la cabecera de tu plantilla- en el lugar que quieres insertar, como el siguiente ejemplo del gráfico de torta (pie chart):
<div id="torta" style="width: 900px; height: 500px;"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Paises', 'visitas'],
          ['Mexico',     32],
          ['Bolivia',      28],
          ['Colombia',  22],
          ['Peru', 12],
          ['Otros',    32]
        ]);
        var options = {
          title: 'www.rubenapaza.com: Porcentaje de Visitas (%)'
        };
        var chart = new google.visualization.PieChart(document.getElementById('torta'));
        chart.draw(data, options);
      }
    </script>
Y finalmente modificar los datos según tu necesidad. Espero que ayude ha aquellos que han estado buscando mejorar sus presentaciones en su web site, sobre todo para aquellos que trabajan con datos y gráficos.

COMENTARIOS

GOOGLE
Nombre

Contabilidad,2,EconomiaPolitica,5,Estadisticas,1,EvaluacionProyectos,46,FinanzasCorporativas,8,GasPetroleo,6,GestionCalidad,2,GestionProduccion,16,GestionProyectos,13,IdentificacionProyectos,8,Imagenes,3,IngenieriaAmbiental,5,IngenieriaElectrica,4,IngenieriaIndustrial,10,IngenieriaLegal,5,IngenieriaMetodos,3,IngenieriaTransporte,5,Internet,6,InvestigacionOperaciones,3,Lean,10,Libros,6,Logistica,1,Logo,3,Macroeconomia,4,Matematicas,5,Microeconomia,9,Mineria,12,OPINION,17,OptimizacionDinamica,7,PaginaWeb,6,PlanNegocios,3,PreparacionProyectos,34,SeguridadIndustrial,4,Variedad,12,
ltr
item
Ruben Apaza: Graficos en Blogger o Pagina Web con Highcharts y GoogleCharts
Graficos en Blogger o Pagina Web con Highcharts y GoogleCharts
https://2.bp.blogspot.com/-CcmPKrkbZfk/WN7yj_darvI/AAAAAAAADVc/mX6Jccs6b9456TmhLNbAXy3seotr6xy-QCLcB/s1600/highcharts_googlecharts_RubenApaza.png
https://2.bp.blogspot.com/-CcmPKrkbZfk/WN7yj_darvI/AAAAAAAADVc/mX6Jccs6b9456TmhLNbAXy3seotr6xy-QCLcB/s72-c/highcharts_googlecharts_RubenApaza.png
Ruben Apaza
https://www.rubenapaza.com/2017/03/graficos-en-blogger-o-paginas-web.html
https://www.rubenapaza.com/
https://www.rubenapaza.com/
https://www.rubenapaza.com/2017/03/graficos-en-blogger-o-paginas-web.html
true
6705892616169174074
UTF-8
Cargando todo No se encontró VER TODO Leer mas Responder Cancelar Borrar Por Portada PAGINAS ARTÍCULOS Ver todo RELACIONADOS ETIQUETA ARCHIVO BUSCAR TODO LOS ARTÍCULOS No encontró ninguna publicación relacionado Volver a Portada Domingo Lunes Martes Miercoles Jueves Viernes Sábado Dom Lun Mar Mie Jue Vie Sab Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre Ene Feb Mar Abr Mayo Jun Jul Ago Sep Oct Nov Dic ahora hace 1 minuto hace $$1$$ minutos hace 1 hora hace $$1$$ hora Ayer hace $$1$$ dias hace $$1$$ semanas hace 5 semanas Seguidores Seguir DESCARGA PREMIUM BLOQUEADO PASO 1: Compartir. PASO 2: Click en el enlace que ha compartido para desbloquear. Copiar todo Seleccionar todo Copiado en portapapeles. No se pueden copiar, presione [CTRL] + [C] (o CMD + C en Mac) para copiar