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.

 

10 Cursos de programación Gratis(En español))

Programación

Follow my blog with Bloglovin

La programación se está convirtiendo en la “profesión del futuro”, aunque creo que ya lo es en vista de cómo están caminando las cosas, en cuanto a los avances tecnológicos como el “Internet de las cosas” (en otro post hablare de esto).

Sé que muchas personas están interesadas en conocer sobre como programar. ¿Pero por dónde empezar?, bueno aquí te dejo cursos en español totalmente GRATIS, sin más preámbulos estos son:

6bwxgmnc4ccjpdhkouwj2a-code-logo-640x640

CODE.– está dirigida a los más pequeños, aun así, sirve para todos los que no tengan ni mínima idea de las bases de programación, te enseña a través de juegos.

logo-openwebinars

OPENWEBINARS.- es una plataforma de cursos pagos, sin embargo, los de introducción a la programación y HTML están disponibles de manera gratuita.

15726b4565649b579b6e0255a7ba445c

AULAFACIL.-en esta web puedes encontrar curso tanto de nivel principiante como intermedio, realmente me gusta mucho toda la información técnica y práctica, lo único negativo a destacar es que es diseño de la página necesita un cambio.

ad60099634084625bb7f3b0331222195

UDEMY.- aquí consigues desde los fundamentos básico de la programación, ordenado por clases.

logo-aulary-com

AULARY.- tiene cursos de diferentes áreas incluyendo la programación.

pildoras_1_0

PILDORASINFORMATICAS.- es un canal muy completo, en su descripción prosa lo siguiente “Se tratarán diversas materias, desde ofimática básica y avanzada hasta programación, pasando por diseño gráfico y web.” Y la verdad es que estoy muy de acuerdo con esto, es uno de los que más contenido puedes encontrar, solo dependerá de lo quieras aprender.

miniplatzi

PLATZI.- una de las comunidades más completas que he encontrado en español, el canal de YouTube te ofrece distintos curso incluyendo programación, también explican términos y nuevas tendencias dentro del área.

codigofacilito

CODIGOFACILITO.- este fue uno de los primeros canales que conseguí en mi paso por YouTube, las verdad es que toda la comunidad que están creando ha venido en alza, con la incorporación de nuevos talentos invitados de otros canales, la variedad y continua actualización de su contenido me parece uno de los puntos más fuertes.

logo

DEVCODE.- su contenido es muy bueno, aunque están más enfocados en el diseño web igualmente se pueden encontrar videos de cursos para aprender a programar.

isotipo

CODEJOBS.- con su lema “Comparte el conocimiento”, este canal ofrece diversos cursos para que tu aprendas a programar.

Terminado este Top 10 lo único que te faltará será tiempo!.Si conoces de otros sitios, no dudes en comentar!