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 Abril 2018 Ver mes siguiente
DOLUMAMIJUVISA
1234567
891011121314
15161718192021
22232425262728
2930
BUSCADOR
Blog   Web
TÓPICOS
» General (2606)
NUBE DE TAGS  [?]
SECCIONES
» Inicio
ENLACES
MÁS LEÍDOS
» Analizando el LiveBox 2.1 de Orange
» 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
» 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
226 Comentarios: SOLUTION HACKERS, SOLUTION HACKERS, LOTTERY SPELL, [...] ...
» Analizando el LiveBox 2.1 de Orange
3 Comentarios: Gary ...
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