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
Contabilidad,2,EconomiaPolitica,5,Estadisticas,1,EvaluacionProyectos,45,FinanzasCorporativas,8,GasPetroleo,6,GestionCalidad,2,GestionProduccion,14,GestionProyectos,10,IdentificacionProyectos,7,Imagenes,3,IngenieriaAmbiental,5,IngenieriaElectrica,4,IngenieriaIndustrial,6,IngenieriaLegal,5,IngenieriaMetodos,3,IngenieriaTransporte,5,Internet,6,InvestigacionOperaciones,3,Lean,7,Libros,6,Logistica,1,Logo,3,Macroeconomia,4,Matematicas,5,Microeconomia,9,Mineria,9,OPINION,17,OptimizacionDinamica,7,PaginaWeb,6,PlanNegocios,3,PreparacionProyectos,33,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
Cargado las publicaciones No se encontro ninguna publicación VER TODO Leer mas Respuesta Cancel respuesta Borrar Por Inicio PAGINAS PUBLICACIONES Ver todo RELACIONADO CON... ETIQUETA ARCHIVO BUSCAR TODA LAS PUBLICACIONES No se encontró ninguna coincidencia con su solicitud Volver al INICIO Domingo Lunes Martes Miercoles Jueves Viernes Sabado 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 just ahora Hace 1 minuto Hace $$1$$ minutos Hace 1 hora Hace $$1$$ horas Ayer Hace $$1$$ dias Hace $$1$$ semanas Hace más de 5 semanas Seguidores Seguir DESCARGA BLOQUEADO PASO 1: Compartir. PASO 2: Clic en el enlace que compartiste para desbloquear Copiar código Seleccionar código Códigos copiados en portapapeles No se pueden copiar los códigos / textos, por favor presione [CTRL] + [C] (o CMD + C en Mac) para copiar