Website Developer

Website Developer

If you’re into front-finish website developer, you cannot avoid a couple of things – jQuery and knowledge visualization. jQuery is among the most widely used JavaScript libraries that is getting used by greater than 70% of top a million websites (source). Along with the growing quantity of data, eventually you’ll have to get the hands dirty with making charts.

For this reason this short article combines both – jQuery and creating charts. I will take you step-by-step through the entire process of creating beautiful charts using FusionCharts and it is jQuery charts wordpress plugin. Although I will create a radar chart, this can be used tactic to make every other chart that belongs to FusionCharts’ library of 90 charts too.

Website developer a Radar Chart – 4 Step Process

I’ve divided the entire process of making our chart into four easy-to-follow steps. Before we start, this is a quick consider what we should are attempting to make:

radar-chart

ADVERTISEMENT

You can observe the live version only at that JSFiddle. To see the origin-code, click on the ‘Edit in JSFiddle’ button on the top right from the screen.

Step-1: Obtain the Data

Normally, this is the initial step to make any type of chart or graph. With regards to this tutorial, I will to make use of dummy data representing allotted budget and actual spending of the company (Acme Corporation.).

FusionCharts accepts both JSON and XML data formats. I will use JSON because it is now the conventional data exchange format from the website developer. First we have to define a category array that will contain all of the groups to which budget was allotted. It will likely be a range of objects such as this:

“groups”: [,

// more groups

]

]

Next we have to place the data that you want to plot in dataset array. Inside dataset you could have one object for every number of data you need to plot. Within our situation we’ve two series – Allotted Budget and Actual Spend.

“dataset”: [Allotted Budget”,

“data”: [,

// more data points for first series

]

, ,

// more data points for first series

]

]

Step-2: Include Dependencies

Our project relies upon following JavaScript files:

jQuery – download it came from here or include it via CDN.

Website Developer
Website Developer

3 FusionCharts JS files: fusioncharts.js, fusioncharts.charts.js and powercharts.js. You are able to download all of the files out of this page (see under JS folder).

jQuery charts wordpress plugin – download it from wordpress plugin page.

<!– jQuery –>

<script type=”text/javascript” src=”jquery.js”></script>

<!– FusionCharts files–>

<script type=”text/javascript” src=”fusioncharts.js”></script>

<script type=”text/javascript” src=”fusioncharts.charts.js”></script>

<script type=”text/javascript” src=”powercharts.js”></script>

<!– jQuery plugin –>

<script type=”text/javascript” src=”jquery-plugin.js”></script>

Step-3: Create and choose a Chart Container

HTML <div> elements perform best for housing a chart. You ought to have another <div> container for every chart for you page. This is the way we define a container and choose website developer via jQuery’s $ selector:

HTML:

<div id=”radar-chart”>Radar chart will load here.</div>

Choosing it via jQuery:

$(“#radar-chart”)

Step-4: Insert the Chart

We’re almost there. Now we simply need to make use of the insertFusionCharts method supplied by the wordpress plugin to insert the chart into our page. This is how we all do it (explanation after code snippet):

$(“#radar-chart”).insertFusionCharts(Corporation.”,

“captionFontSize”: “22”,

// more chart configuration options

,

“groups”: [

// described in step-1

],

“dataset”: [

// described in step-1

]

)

The majority of the terms within the above code snippet are self-explanatory, and so i could keep the outline short and to the stage:

type sets the kind of chart you want to plot.

height and width define the dimension from the chart.

dataFormat sets the format by which we’ll pass the information (json or xml).

dataSource consists of chart configuration options and also the data you want to plot. Chart configuration options goes inside chart object and therefore are technically referred to as chart characteristics (in FusionCharts). dataset and groups arrays were covered in step-1.

Quick Note on Enhancing Design

If you see the above mentioned code snippet carefully, you will find that our chart object only had two chart characteristics, as the source code for that chart has greater than 20!

What’s happening here?

Well, the truth is there are other than 100 different characteristics will personalize a chart. As it is difficult to pay for everything, I will give you an origin that’ll be hugely useful by trying to personalize a chart.

Open this site and kind the specific chart you need to personalize. It’ll open complete listing of characteristics you can use with that chart, with their short descriptions and acceptable values. For instance, to personalize a radar chart you’ll reference radar chart’s page.

That’s it! Should you be following along and did everything I described above, you’ll want had a working chart right now. Otherwise, mind to the JSFiddle demo website developer produced and take couple of mins to know in which you went wrong.