This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Spanish (Español) translation by Steven (you can also view the original English article)
Los gráficos web creados con JavaScript son una excelente manera de agregar interactividad a tus aplicaciones y sitios, pero si prefieres trabajar en jQuery, tus opciones pueden ser limitadas. Los desarrolladores suelen elegir entre conveniencia o características. ¿Todas las campanas y silbatos en 100 líneas de código o una versión más simple en 30? Para abordar esto, el equipo de ZingChart ha desarrollado un contenedor para usar su API con la sintaxis jQuery, lo que permite a los desarrolladores crear rápidamente gráficos enriquecidos con la interactividad que desean.
Casos de uso común
Hay una llamada jQuery para cada función en la API de ZingChart, las 169 de ellas. En este tutorial cubriremos un puñado de ellas en tres de los casos de uso más comunes:
- Manipulación del DOM
- Manipulación de gráficos
- Uso de datos AJAX
Puedes ver la referencia completa en la página de ZingChart jQuery en Github.
Scripts y archivos
Si no tienes una copia de la biblioteca ZingChart o del contenedor jQuery, hay algunas opciones:
- Obtenerlo directamente desde el enlace CDN – http://cdn.zingchart.com/
- Descargarlo de GitHub – https://github.com/zingchart/ZingChart-jQuery
- Descargarlo a través de Bower (
bower install zingchart-jquery)
Configuración
Configura tu archivo HTML incluyendo la biblioteca ZingChart y los módulos adicionales que necesites. También deberás incluir jQuery y, finalmente, el contenedor ZingChart jQuery. El contenedor es compatible con jQuery versiones 1.x y 2.x.
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<title>ZingChart jQuery Wrapper Demo</title> |
6 |
<script src="http://cdn.zingchart.com/zingchart.min.js"></script> |
7 |
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> |
8 |
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script> |
Inicializar gráficos ahora es sencillo con la llamada a .zingchart(). Este método (y todos los demás que toman un objeto como parámetro) pueden tomar datos de gráficos directamente o por referencia (en este caso, donde los datos se almacenan en una variable llamada data1).
Inicializar por referencia
1 |
$("#demo-1").zingchart({ |
2 |
data: data1 |
3 |
});
|
Inicializar con información
1 |
//Init chart with data directly
|
2 |
$("#demo-2").zingchart({ |
3 |
data: { |
4 |
type: "line", |
5 |
"background-color":"#eff0f0", |
6 |
"tooltip":{ |
7 |
"padding":"20 20 20 20", |
8 |
"font-family":"arial", |
9 |
"font-color":"#666666", |
10 |
"border-radius":5, |
11 |
"shadow":0 |
12 |
},
|
13 |
"scale-x":{ |
14 |
"line-color":"#666666", |
15 |
"tick":{ |
16 |
"line-color":"#666666" |
17 |
},
|
18 |
"item":{ |
19 |
"font-color":"#666666", |
20 |
"font-family":"arial" |
21 |
}
|
22 |
},
|
23 |
"scale-y":{ |
24 |
"line-color":"#666666", |
25 |
"tick":{ |
26 |
"line-color":"#666666" |
27 |
},
|
28 |
"item":{ |
29 |
"font-color":"#666666", |
30 |
"font-family":"arial" |
31 |
}
|
32 |
},
|
33 |
plot:{ |
34 |
aspect:"spline", |
35 |
"hover-state":{ |
36 |
"shadow":0 |
37 |
},
|
38 |
"marker":{ |
39 |
"size":8, |
40 |
"border-width":0, |
41 |
"background-color":"#00ccff", |
42 |
"shadow":0 |
43 |
}
|
44 |
},
|
45 |
series: [ |
46 |
{
|
47 |
values: [3,4,10,2,6,5], |
48 |
"line-color":"#00ccff", |
49 |
"shadow":0 |
50 |
}
|
51 |
]
|
52 |
}
|
53 |
});
|
1. Manipulación del DOM
La primera demostración es un ejemplo de la manipulación del DOM utilizando uno de los agentes de escucha del contenedor, .nodeHover(). Al pasar el cursor sobre un nodo, se actualiza la tabla debajo de ella, especialmente útil en situaciones en las que debes proporcionar información adicional sobre los datos del gráfico fuera del propio gráfico. Hay oyentes para todos los objetos de gráficos, así como ciertos eventos, como .feedStart(), .historyBack() y muchos más.
1 |
// Bind an event listener to node hover
|
2 |
$("#demo-1").nodeHover( |
3 |
|
4 |
// plotMouseOver function
|
5 |
function(){ |
6 |
// Get all values for the hovered plot
|
7 |
var plotVals = $(this).getPlotValues({ |
8 |
plotindex:this.event.plotindex |
9 |
});
|
10 |
|
11 |
// Get hover node index
|
12 |
var idx = this.event.nodeindex; |
13 |
|
14 |
for (var i = 0; i<plotVals.length; i++) { |
15 |
// Set each table elem equal to the cooresponding node
|
16 |
$("#table-1 td").eq(i).text(plotVals[i]) |
17 |
// Highlight the corresponding hovered node in the table
|
18 |
$("#table-1 td").eq(idx).addClass("hover"); |
19 |
}
|
20 |
},
|
21 |
|
22 |
// plotMouseOut function
|
23 |
function(){ |
24 |
// Reset the table text
|
25 |
$("#table-1 td").each(function(){ |
26 |
$(this).text("--").removeClass("hover"); |
27 |
});
|
28 |
});
|
Echa un vistazo a la demo para ver lo que eso nos da.
2. Manipulación de gráficos
El segundo gráfico muestra la manipulación del gráfico inverso a través del DOM. La entrada del control deslizante se convierte en un int y se pasa a una llamada .setNodeValue() para el nodo correspondiente.
1 |
$("input[type='range']").each(function(idx){ |
2 |
|
3 |
// Bind input events to each slider
|
4 |
$(this).on("input",function(){ |
5 |
// Get the value of each slider on input events
|
6 |
var newVal = parseInt($(this).val()); |
7 |
// Set the value of the corresponding node to the slider's new value
|
8 |
$("#demo-2").setNodeValue({ |
9 |
plotindex:0, |
10 |
nodeindex:idx, |
11 |
value: newVal |
12 |
})
|
13 |
});
|
14 |
});
|
Echa un vistazo a la demostración en Codepen para ver qué nos ofrece.
3. Carga de datos AJAX
Cargar datos nuevos es muy fácil. Tras una solicitud .get exitosa, pasa tus resultados con uno de los muchos métodos de establecimiento como .appendSeriesData(), .setSeriesValues(), .modify(), .setData(), etc. En el siguiente ejemplo, usamos .setSeriesValues() para pasar una nueva matriz de valores devueltos por nuestra llamada AJAX.
1 |
// Bind a click event to the button
|
2 |
$("button").click(function(){ |
3 |
|
4 |
// Issue a get request
|
5 |
$.get( 'https://api.myjson.com/bins/530az', function() {}) |
6 |
|
7 |
// Upon a successful get request...
|
8 |
// (notice we haven't even touched the ZingChart API yet)
|
9 |
.done(function(res){ |
10 |
|
11 |
// Store the new data in a variable (totally optional)
|
12 |
var newData = res.data; |
13 |
|
14 |
// Set the series values equal to the newData
|
15 |
$("#demo-3").setSeriesValues({ |
16 |
"values": [newData] |
17 |
});
|
18 |
|
19 |
// Tada! Your chart just used AJAX data. Begin the disco.
|
20 |
});
|
21 |
});
|
Nuevamente, echa un vistazo a la demostración en Codepen para ver lo que tenemos ahora.
Encadenamiento
El encadenamiento de métodos es una de las características más populares de jQuery. Este contenedor admite el encadenamiento para cualquier método o evento que devuelva un objeto jQuery. En lugar de llamar a las funciones de manipulación de gráficos por separado, ahora puedes encadenar tus llamadas en una línea:
1 |
$("#myChart").set3dView({"y-angle":10}).resizeChart({"width":600,"height":400}); |
El archivo de demostración completo está disponible para descargar.
Conclusión
Esa fue una ejecución muy rápida, demostrando cómo usar jQuery para ZingChart. ¡Con estos conceptos básicos deberías poder llevar tus propios gráficos mucho más lejos! Muéstranos tus ejemplos y no dudes en pedir sugerencias en los comentarios.
Recursos
- http://www.zingchart.com
- @ZingChart en Twitter
- zingchart en Facebook
- zingchart en LinkedIn
- zingchart en Google+
By
