FusionCharts Cross-browser jQuery Charts API

The FusionCharts jQuery plugin helps you add interactive JavaScript charts to your web, mobile and enterprise applications.
It combines the delight and comprehensiveness of FusionCharts Suite XT with the easy-to-use jQuery syntax.

Creating a simple chart using jQuery

Creating a chart involves 4 simple steps:

· Download jQuery and FusionCharts Suite XT. Copy the downloaded JavaScript files to the relevant folder in your web application

· Include jQuery.min.js, FusionCharts.js and FusionCharts.jQueryPlugin.js in your web page

· Create a <div> or a container to hold the chart

· Use insertFusionCharts(), appendFusionCharts() or prependFusionCharts() method to create the chart instance, and provide attributes like width, height, data format and data object.

Shown below is a simple Column 3D chart created using jQuery.

$("‎#chartContainer1").insertFusionCharts({
type: "Column3D",
width: "600",
height: "300",
dataFormat: "json",
dataSource: {
"chart":{
"caption":"Monthly Sales Summary",
"subcaption":"For the first half of 2013",
"xAxisName":"Month",
"yAxisName":"Sales",
"numberPrefix":"$",
"bgcolor":"ffffff"
},
"data":[
{ "label":"January", "value":"14400" },
{ "label":"February", "value":"19600" },
{ "label":"March", "value":"24000" },
{ "label":"April", "value":"15700" },
{ "label":"May", "value":"23700" },
{ "label":"June", "value":"22800" }
],
"trendlines":[ {
"line":[{
"startValue":"17100",
"displayValue":"Last year's {br} average",
"valueOnRight":"1",
"color":"999999"
}]
}]
}
});

To change the chart type from Column 3D to Pie 3D, the following code is used. You can change multiple properties of the chart at the same time, by clubbing all the attributes together in updateFusionCharts() method.

$("‎#btnPie3d").click(function(){
$("#chartContainer1").updateFusionCharts({"swfUrl":"Pie3D"});
});


Thanks.

WHY USE JSON OVER XML?

There are times when you may be unsure what format to choose when transmiting data between a server and web application. Here are a few reasons why you might choose to use JSON rather than XML and a few why you might choose XML rather than JSON.

What is JSON?

JavaScript Object Notation (JSON) is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript programming language for representing simple data structures and associative arrays, called objects. Despite its relationship to JavaScript, it is language-independent, with parsers available for most programming languages.

What is XML?

Extensible Markup Language (XML) is a set of rules for encoding documents in machine-readable form. XML’s design goals emphasize simplicity, generality, and usability over the Internet.

 Reasons to choose JSON over XML

1.    JSON requires less tags than XML – XML items must be wrapped in open and close tags whereas JSON you just name the tag once

2.    Because JSON is transportation-independent, you can just bypass the XMLHttpRequest object for getting your data.

3.    JavaScript is not just data – you can also put methods and all sorts of goodies in JSON format.

4.    JSON is better at helping procedural decisions in your JavaScript based on objects and their values (or methods).

5.    You can get JSON data from anywhere, not just your own domain. There’s no more proxy server nonsense.

6.    Yahoo has a really good YUI2 JSON API.

7.    JSON is easier to read than XML – Obviously a personal preference

Reasons to choose XML over JSON

1.    Easy to take XML and apply XSLT to make XHTML.

2.    XML is supported by many more desktop applications than JSON.

3.    JSON can be put in the XML on the way back to the client – the benefit of both! It’s called XJAX (stands for X-domain JavaScript And XML).

4.    Simply, AJAX includes XML in it and not JSON.

Ignored powerful shortcuts of jQuery

Many developers ignore shortcuts and power of jQuery and I myself being a victim of some of the useful, handy but yet ignored shortcuts of jQuery. These are not some advance or complex shortcuts but I guess these are used a lot. 

Consider, below jQuery code lines.

1	$("#elm").css("display", "none"); //Line 1

2	$("#elm").css("display", ""); //Line 2

3	$("#elm").html(""); //Line 3

Above code lines are very common but its unfortunate because some faster and more readable shortcuts available, yet ignored. Find below jQuery code lines that does the exactly same thing but these are more readable and fast.

1	$("#elm").hide(); //Line 1

2	$("#elm").show(); //Line 2

3	$("#elm").empty(); //Line 3

There are many more examples which you can find in your code. For example, to add CSS Class to any element

1	$("#elm").prop("class", "cssClass");

where the better approach would be,

1	$("#elm").addClass("cssClass");

Another example is of setting height and width,

1	$("#elm").css("height", "100px"); //Line 1

2	$("#elm").css("width", "100px"); //Line 2

using in-built jQuery functions,

1	$("#elm").height(100); //Line 1

2	$("#elm").width(100); //Line 2

Another common situation is of toggling (show/hide) of element. For example, 

1	if($("#elm").is(":visible"))

2	$("#elm").css("display", "none");

3

else

4	$("#elm").css("display", "");

where the better approach is,

1	$("#elm").toggle();

You can find many such situation where in-built jQuery functions can be used. Hope you find this useful and if you are also ignoring these shortcuts, then you need to move on...

Good Luck....