Blog gratis
Reportar
Editar
¡Crea tu blog!
Compartir
¡Sorpréndeme!
Blog de la Escuela de Educación Secundaria Técnica N 8 de Quilmes
Administrador Prof. Claudio Enrique Alonso Alvite
img
07 de Mayo, 2015    General

HighCharts gráficas con JavaScript


Highcharts Solutions India

La necesidad de construir gráficas con JavaScript cada día aumenta más y es importante poder elegir un framework sencillo y a la vez potente para poder realizar estas tareas con seguridad. HighCharts es uno de los frameworks más conocidos el sector. Entre sus características principales destacan:

  1. Javascript: Esta creado con JavaScript que es uno de los lenguajes más utilizados por parte de los desarrolladores.
  2. Compatibilidad: La compatibilidad es máxima ya que soporta incluso Explorer 6 adecuandose a todos los navegadores y soportando un fuerte cross browsing.
  3. Tipos de Gráficas : Otra de las cosas que más destaca de HighChart es el amplio soporte de gráficas de todo tipo que tienen permitiendonos abordar la mayor parte de las casuísticas que nos encontremos.
  4. Facilidad de uso: Por último destacar es que un framework muy sencillo de utilizar con el cual el desarrollador en poco tiempo podrá ser productivo.

HighCharts un ejemplo básico

Trabajar con HighCharts es muy fácil. Lo primero que tenemos que hacer es instalar jQuery ya que el framework depende de él. Podríamos haber usado también Mootools o Prototype. Hecho esto podemos utilizar alguno de los códigos que viene de ejemplo en la librería para construir nuestra primera gráfica.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script src="jquery-1.11.1.js" type="text/javascript"></script>
<script src="highcharts.js"></script>
<script type="text/javascript">
     
$(document).ready(function() {
 
 
    $('#contenedor').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]
        }]
    });
});
 
 
 
</script>
 
 
<div id="contenedor">
 
</div>

Hemos rellenado título, subtítulo y asignado varias series de datos, el framework se encargará de dibujar la gráfica en el contenedor asignado sin que tengamos que realizar mayor esfuerzo.

Hightchart

Palabras claves ,
publicado por alonsoclaudio a las 22:56 · Sin comentarios  ·  Recomendar
 
Más sobre este tema ·  Participar
Comentarios (0) ·  Enviar comentario
Enviar comentario

Nombre:

E-Mail (no será publicado):

Sitio Web (opcional):

Recordar mis datos.
Escriba el código que visualiza en la imagen Escriba el código [Regenerar]:
Formato de texto permitido: <b>Negrita</b>, <i>Cursiva</i>, <u>Subrayado</u>,
<li>· Lista</li>
CALENDARIO
Ver mes anterior Noviembre 2017 Ver mes siguiente
DOLUMAMIJUVISA
1234
567891011
12131415161718
19202122232425
2627282930
BUSCADOR
Blog   Web
TÓPICOS
» General (2606)
NUBE DE TAGS  [?]
SECCIONES
» Inicio
ENLACES
MÁS LEÍDOS
» Cómo espiar WhatsApp
» Cómo usar Metashield protector for Client y por qué utilizarlo
» Ejecución remota de código arbitrario en OpenSSH
» Ganar dinero con 1.200 Millones de identidades robadas
» Hardware y sus 4 Funcionamientos Basicos y Principales en una Computadora
» #Phishing masivo a #BancoFrances, #PagoMisCuentas y #Movistar (110 afectados en 4 horas)
» Redes de la Deep Web: CJDNS y la Red Hyperboria
» Unidad Central de Procesamiento CPU
» Vulnerabilidad en Youtube permitió borrar cualquier video
» Wassap, la aplicación que permite usar WhatsApp desde la PC
SE COMENTA...
» Cómo espiar WhatsApp
29 Comentarios: prudent hackers, global hackers, SOLUTION HACKERS, [...] ...
» Curso en línea "Fundamentos de Administración de Sistemas Linux"
1 Comentario: ruchiroshni
» SoftPerfect WiFi Guard permite saber quién esta conectado a mi WiFi
1 Comentario: carlos lopez
» Analizando el LiveBox 2.1 de Orange
2 Comentarios: Nadie, brahim
» Antenas WiFi de gran potencia. Enlaces a 1.000 Km.
2 Comentarios: julio enoy, julio enoy
SOBRE MÍ
FOTO

Prof. Claudio Enrique Alonso Alvite



» Ver perfil

AL MARGEN
Escuela de Educacion Secundaria Tecnica N 8 de Quilmes
(Técnicos en Informática Personal y Profesional)
FULLServices Network | Blogger | Privacidad