{"id":34885,"date":"2016-04-07T06:00:06","date_gmt":"2016-04-07T13:00:06","guid":{"rendered":"http:\/\/webdesignledger.com\/?p=34885"},"modified":"2016-04-22T12:00:41","modified_gmt":"2016-04-22T19:00:41","slug":"coding-radar-chart-jquery","status":"publish","type":"post","link":"https:\/\/webdesignledger.com\/coding-radar-chart-jquery\/","title":{"rendered":"Coding a Radar Chart in jQuery"},"content":{"rendered":"

If you are into front-end development, you can\u2019t escape from two things – jQuery and data visualization. jQuery is one of the most popular JavaScript libraries which is being used by more than 70% of top one million websites (source<\/a>). And with the increasing amount of data, sooner or later you will have to get your hands dirty with making charts.<\/p>\n

That\u2019s why this article combines both – jQuery and creating charts. I am going to walk you through the process of creating beautiful charts using FusionCharts<\/a> and its jQuery charts<\/a> plugin. Although I am going to make a radar chart, you can use this process to make any other chart that is part of FusionCharts\u2019 library of 90+ charts as well.<\/p>\n

Creating a Radar Chart – 4 Step Process<\/h2>\n

I have divided the process of making our chart into four easy-to-follow steps. But before we begin, here is a quick look into what we are trying to make:<\/p>\n

\"radar-chart\"

You can see the live version at this JSFiddle<\/a>. To view the source-code, click the \u2018Edit in JSFiddle\u2019 button on top right of the screen.<\/p>\n

Step-1: Get the Data<\/h3>\n

This is usually the first step for making any kind of chart or graph. For the purpose of this tutorial, I am going to to use dummy data representing allocated budget and actual spending of a company (Acme Inc.).<\/p>\n

FusionCharts accepts both JSON and XML data formats. I am going to use JSON as it has now become the standard data exchange format of the web. First we need to define a category<\/code> array which will contain all the categories under which budget was allocated. It will be an array of objects like this:<\/p>\n

\"categories\"<\/span>: [{\r\n  \"category\"<\/span>: [{\r\n      \"label\"<\/span>: \"Engineering\"<\/span>\r\n    }, {\r\n      \"label\"<\/span>: \"Sales\"<\/span>\r\n    }\r\n    \/\/ more categories<\/span>\r\n  ]\r\n}]<\/code><\/pre>\n
Next we need to put the data that we want to plot in dataset<\/code> array. Inside dataset<\/code> you can have one object for each series of data you want to plot. In our case we have two series – Allocated Budget<\/code> and Actual Spend<\/code>.<\/p>\n
\"dataset\"<\/span>: [{\r\n  \"seriesname\"<\/span>: \"Allocated Budget\"<\/span>,\r\n  \"data\"<\/span>: [{\r\n      \"value\"<\/span>: \"10000\"<\/span>\r\n    }, {\r\n      \"value\"<\/span>: \"16500\"<\/span>\r\n    }\r\n    \/\/ more data<\/span> points for first series<\/span>\r\n  ]\r\n}, {\r\n  \"seriesname\"<\/span>: \"Actual Spend\"<\/span>,\r\n  \"data\"<\/span>: [{\r\n      \"value\"<\/span>: \"8000\"<\/span>\r\n    }, {\r\n      \"value\"<\/span>: \"9500\"<\/span>\r\n    }\r\n    \/\/ more data<\/span> points for first series<\/span>\r\n  ]\r\n}]<\/code><\/pre>\n
Step-2: Include Dependencies<\/h3>\n
Our project is dependent on following JavaScript files:<\/p>\n