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
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>
|
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: