jQuery with ZingChart
Web charts built with JavaScript are a great way to add interactivity to your apps and sites, but if you prefer working in jQuery, your options can be limited. Developers are often left to choose between convenience or features. All the bells and whistles in 100 lines of code or a simpler version in 30? In order to address this, the team at ZingChart have developed a wrapper to use their API with jQuery syntax, allowing devs to quickly build charts with the rich interactivity they want.
Scripts and Files
If you don’t have a copy of the ZingChart library or jQuery wrapper, there are a few options:
Grab it directly from the CDN Link – http://cdn.zingchart.com/
Download it from GitHub – https://github.com/zingchart/ZingChart-jQuery
Download it through Bower (bower install zingchart-jquery)
Setting Up
Set up your HTML file by including the ZingChart library and any additional modules you need. You’ll also need to include jQuery and, finally, the ZingChart jQuery wrapper.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingChart jQuery Wrapper Demo</title>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>
Init by reference
$("#demo-1").zingchart({
data: data1
});
Init with data
$("#demo-2").zingchart({
data: {
type: "line",
"background-color":"#eff0f0",
"tooltip":{
"padding":"20 20 20 20",
"font-family":"arial",
"font-color":"#666666",
"border-radius":5,
"shadow":0
},
"scale-x":{
"line-color":"#666666",
"tick":{
"line-color":"#666666"
},
"item":{
"font-color":"#666666",
"font-family":"arial"
}
},
"scale-y":{
"line-color":"#666666",
"tick":{
"line-color":"#666666"
},
"item":{
"font-color":"#666666",
"font-family":"arial"
}
},
plot:{
aspect:"spline",
"hover-state":{
"shadow":0
},
"marker":{
"size":8,
"border-width":0,
"background-color":"#00ccff",
"shadow":0
}
},
series: [
{
values: [3,4,10,2,6,5],
"line-color":"#00ccff",
"shadow":0
}
]
}
});
DOM Manipulation
The first demo is an example of DOM manipulation using one of the listeners from the wrapper, .nodeHover(). Hovering over a node updates the table below it–particularly useful in situations where you need to provide additional information about chart data outside of the chart itself. There are listeners for all chart objects as well as certain events, such as .feedStart(), .historyBack(), and many more.
$("#demo-1").nodeHover(
// plotMouseOver function
function(){
// Get all values for the hovered plot
var plotVals = $(this).getPlotValues({
plotindex:this.event.plotindex
});
// Get hover node index
var idx = this.event.nodeindex;
for (var i = 0; i<plotVals.length; i++) {
// Set each table elem equal to the cooresponding node
$("#table-1 td").eq(i).text(plotVals[i])
// Highlight the corresponding hovered node in the table
$("#table-1 td").eq(idx).addClass("hover");
}
},
// plotMouseOut function
function(){
// Reset the table text
$("#table-1 td").each(function(){
$(this).text("--").removeClass("hover");
});
});
Chart Manipulation
The second chart demonstrates the reverse–chart manipulation via the DOM. Using normal jQuery, we place input listeners on a set of sliders. Slider input is cast to an int and passed to a .setNodeValue() call for the corresponding node.
$("input[type='range']").each(function(idx){
// Bind input events to each slider
$(this).on("input",function(){
// Get the value of each slider on input events
var newVal = parseInt($(this).val());
// Set the value of the corresponding node to the slider's new value
$("#demo-2").setNodeValue({
plotindex:0,
nodeindex:idx,
value: newVal
})
});
});
Loading AJAX Data
Loading new data is a snap. Upon a successful .get request, pass your results in with one of the many setter methods such as .appendSeriesData(), .setSeriesValues(), .modify(), .setData(), etc. In the example below, we use .setSeriesValues() to pass in a new array of values returned from our AJAX call.
$("button").click(function(){
// Issue a get request
$.get( 'https://api.myjson.com/bins/530az', function() {})
// Upon a successful get request...
// (notice we haven't even touched the ZingChart API yet)
.done(function(res){
// Store the new data in a variable (totally optional)
var newData = res.data;
// Set the series values equal to the newData
$("#demo-3").setSeriesValues({
"values": [newData]
});
// Tada! Your chart just used AJAX data. Begin the disco.
});
});
