TUTORIAL GAUGES

Gauges Highcharts Tutorial en Español(2/3)

Diseño web

Continuando con la serie de tutoriales de higcharts en esta entrega veremos como manipular los famosos gauges.

Esto sera lo que haremos un Activity gauge :

Activity gauge

Aprenderemos a crear un tema, esto se puede aplicar a todas las gráficas disponibles en higcharts, aunque también puedes conseguir temas ya listos como el “dark unica”.

como dije en el primer tutorial para hacer uso de esta librería primero se debe descargar el fichero zip o si prefieres los CDN, todo esto lo conseguimos en la web oficial. A continuación debemos enlazar este script a la cabecera del archivo html.

Que necesitas primero?, incluir en tu cabecera los siguientes links

si se hace uso del fichero:

<script src="path/highcharts.js"></script>
<script src="path/highcharts-more.js"></script>
<script src="path/modules/solid-gauge.js"></script>

Con CDN:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

e incluir un div que va a contener el gráfico.

<div id="container" style="width: 400px; height: 400px; margin: 0 auto"></div>

ahora comenzamos a crear el tema, para esto vamos al aparatado de highcharts que tiene los temas que traen, copiamos y luego a editar:

ubicaremos la parte de las fuentes para cambiarlas, la escogida fue Righteous de las google fonts, copiamos el link, el nombre y estilo

// cambiar las fuentes
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Righteous',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);

luego dentro del tema

style: {
 fontFamily: "'Righteous', cursive" //nombre de la fuente y tipo
 },

para el color de los apartados:

colors: ["#BC4BFD", "#71F79F", "#5C9CFE", "#24CFFB", "#71F79F", "#ff0066", "#eeaaee",
 "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],

para conseguir diferentes colores puedes usar la coolors .

usaremos un background tipo gradiente, otra de las opciones que trae esta librería

chart: {
 backgroundColor: {
 linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1, x3:2, y3:2 },
 stops: [
 [0, '#FFFBFA'],
 [1, '#C8C6D7']
 ]
 },

 

en cuanto a la sección de titulo y subtitulo podemos cambiar el color,tamaño y transformación(elegir si todas son en mayúsculas o minúsculas)

 title: {
 style: {
 color: '#494850',
 fontSize: '30px'
 }
 },
 subtitle: {
 style: {
 color: '#494850',
 textTransform: 'uppercase'
 }
 }

El tootltip(es el que muestra la información de cada serie), se puede cambiar  al color tanto de la fuente como del fondo

tooltip: {
//cambio de la info
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#000'
}

por último cambiaremos el color y el ancho de los iconos de las series

.attr({
 'stroke': '#F5F5F5', //color
 'stroke-linecap': 'round',
 'stroke-linejoin': 'round',
 'stroke-width': 4, //ancho
 'zIndex': 10
 })

como siempre el código completo te lo dejo en este link o si prefieres descargar el tema ve aquí, solo recuerda que el código del tema tienen que ir antes del de la gráfica.

Anuncios

Highcharts Tutorial en Español(1/3)

Diseño web

 

tuto (1)

Como dije en la entrada Para que sirve Highcharts?, hoy  empieza la serie de tutoriales de higchart, para esto tenemos a su estrella los chart que llevan sus mismo nombre:

Esto es lo que haremos:

chart (4)

aunque parece muy simple cubrirá varios aspecto de estilos,para que puedas jugar y adaptarlo.

Para hacer uso de esta librería primero se debe descargar el fichero zip o si prefieres los CDN, todo esto lo conseguimos en la web oficial. A continuación debemos enlazar este script a la cabecera del archivo html.

si se hace uso del fichero:

<script src="path/highcharts.js"></script>
<script src="path/modules/exporting.js"></script>

Con CDN:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

luego debemos declarar un div contenedor donde se visualizara nuestro gráfico

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Nota: tengamos muy en cuenta en id que le ponemos al div, lo usaremos mas adelante

Ahora si podemos empezar con la gráfica primero copia el código base que te brinda la página vamos a demos para este ejemplo se usara “base line”  y luego en edit in jsfiddle, como veras este link te abre los códigos que se usaran en los diferentes lenguajes lo que vamos a copiar es:

$(function () {
 $('#container').highcharts({
 title: {
 text: 'Monthly Average Temperature',
 x: -20 //center
 },
 subtitle: {
 text: 'Source: WorldClimate.com',
 x: -20
 },
 xAxis: {
 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 },
 yAxis: {
 title: {
 text: 'Temperature (°C)'
 },
 plotLines: [{
 value: 0,
 width: 1,
 color: '#808080'
 }]
 },
 tooltip: {
 valueSuffix: '°C'
 },
 legend: {
 layout: 'vertical',
 align: 'right',
 verticalAlign: 'middle',
 borderWidth: 0
 },
 series: [{
 name: 'Tokyo',
 data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
 }, {
 name: 'New York',
 data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
 }, {
 name: 'Berlin',
 data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
 }, {
 name: 'London',
 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
 }]
 });
});

donde  dice container es el nombre que le dimos al div

$('#container').highcharts({

 

para cambiar el color de fondo

chart: {
 backgroundColor: '#FCF9F9',
 type: 'line'
 }

Cambiando el titulo y subtitulo,solo tenemos que encontrar la parte del código que se llama title y la otra subtitle y cambiar donde dice text:

title: {
 text: 'Temperatura promedio Mensual',
 x: -20 //center
 },
 subtitle: {
 text: 'Fuente: WorldClimate.com',
 x: -20
 }

para cambiar color de una serie especifica agreguemos el atributo que nos da higchart llamado color luego de los valores, ejemplo:

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
color: '#EE2222'

Por ultimo deshabilitaremos los créditos de higchart y el botón que permite imprimir la gráfica (todo esto es opcional)

credits: {
 //quitando los creditos
 enabled: false
 }, 
exporting: {
 //deshabilitando el boton de print
 enabled: false
 }

y listo con esto cubrimos varios aspectos importantes sobre la personalización de los gráficos con higchart.

**Para acceder al proyecto complete ve aquí **

Si tienes otra duda no dudes en dejar tu comentario, estos atributos y muchos más lo puedes con seguir en la documentación oficial.

Para que sirve Highcharts?

Diseño web

Bueno estoy retomando el blog, aunque solo tengo una entrada últimamente he tenido muchísimas cosas que quiero compartir, por eso me he convencido de no ser una de esas personas que esperan,  el momento perfecto, el lugar perfecto,etc… Y simplemente escribir. (Así que vienen muchas cosas).

highchart

A lo que vine:

Highcharts es una librería que facilita la creación de gráficos, a través de javascript con una infinidad de uso, totalmente customizable y compatible con múltiples navegadores y plataformas. Lanzado en el año 2009, es uno de lo productos desarrollados por la compañía noruega Highsoft.

Los gráficos con los que cuenta:

Podemos encontrar los típicos gráficos de columna, linea de series, y pie chart o gráfico de tarta

highcharts

también  tiene los famosos gauges

Highcharts Gauges

highstocks

Estos cuentan con ubicación e información localizada, al igual que los otros gráficos interactivo por lo cual se puede brindar mucha información.

Highmaps

Este último es uno de mis favoritos!

déjame saber si ya conocías esta librería, o cual usas para crear tus gráficos.

Pronto tendré una serie con varios tutoriales sobre los diferentes gráficos y como manipularlos.