Visualizing Data Makes It Easier To Read
When dealing with data analysis, most companies rely on MS Excel or Google Sheets. While those are powerful tools, it’s difficult to notice trends, much less make any sense out of large rows of spreadsheet data. Dealing with data presented this way isn’t very interesting, but once you add visualization to that data, things become easier to manage, and that’s the topic of today’s tutorial - making interactive charts using jQuery.
It’s difficult to notice trends from rows of spread sheet data, but once you add visualization...
I will use for this project as it offers a large library of 90+ charts, is compatible with every browser, and is pretty easy to work with. It also offers a dedicated plugin for jQuery that will make our job easier.
The term ‘data plot’ is contextual; it refers to a column in a column chart, lines in a line chart, pie slices in a pie chart. By clicking on a data plot from the parent chart, you are presented with a child chart, showing the relative data one level deeper.
Clicking a data plot on the parent chart will bring up a child chart.
Before we start the tutorial, let’s cover the basic anatomy of FusionCharts. Every chart is composed of these key elements:
· The title on the chart. It explains what is being charted.
· The text beneath the caption specifying additional chart information, oftentimes it states a timeframe from which the data was collected.
· This displays a symbol for each data plot on the chart. A particular plot can be enabled or disabled by clicking on its respective legend icon.
· These are data representations on the chart. A data plot can be a column in a column chart, lines in a line chart, or pie slices in a pie chart.
· Text that appears when you hover over a data plot, used to convey additional information about that particular data plot.
Making a Drill-down Chart
First, we need to include all the JS files that our project is dependent on by using the tag. If the page does not already exist, please create a blank HTML doc and include below files in the section. Now we need the following four files:
· Minified jQuery
· FusionCharts’ (include both and )
Our section will now look like this:
Now that we have all the dependencies included, it’s time to create the container for the chart and embed it in our page with the following HTML code:
Now, we can select it using jQuery’s selector inside the code:
If you have more than one chart on your page, you will need a separate container for each chart with a unique .
Step 2: Getting and Structuring Data
FusionCharts accepts data in both JSON and XML formats, but I’ve chosen to use JSON as it’s become the standard format for data exchange across web apps. The JSON data array for a basic chart contains an object for each data plot, and inside each data plot object we define its respective label and value. That structure looks like:
As we plot our drill-down chart, its JSON gets more complex. The link between parent and child charts requires one more - pair inside each object of data array. The new key (unsurprisingly, called ) will contain the id of the child chart that you will get when its parent data plot is clicked. The format for defining the child chart is . Since we’re using JSON, we know that whatever we link will look like . Here is how we define it for our chart:
Step 3: Inserting Chart Data
Once you have the data ready, it’s time to insert the chart on your page using the method provided by the jQuery plugin:
Let’s break down the above code snippet:
· defines the type of parent chart we are plotting. In this case, . Every chart in the FusionCharts library has a unique alias. You can find the alias for the chart you want to plot on FusionCharts’ list of charts page.
· sets the unique id for the chart, not to be confused with the id of the element containing our chart. A chart’s is used to select a chart for applying event handlers and calling methods. We will make use of this in Step 5.
· and set the dimension of the chart in pixels or percentage. 100% width tells the chart to occupy the full container width.
· We define the data format using the attribute. We are using JSON for our example but there are other acceptable data formats as well, such as an XML URL. To learn more about data formats, refer to FusionCharts’ official documentation page.
· contains the actual content of the chart, and the object inside it contains the chart’s configuration options, such as caption and subcaption. The array should look familiar since we made it in Step 2 (it contains the data to be plotted), and contains the content for the child-chart (the chart you get after you click a data plot on the parent chart).
Step 4: Creating the Linked Data Array for Child Charts
}, //more data]