No matter the type of developer (back-end or front-end) you are, you are bound to encounter data visualization in your work life sooner or later. The scope can range from creating just a couple of graphs to making a full-blown analytics dashboard. Data visualization is something you cannot escape.
If making charts is so important, why not learn it properly? Well, now we will, as I am going to walk you through the process of creating some beautiful charts. We are going to use JavaScript charts library offered by FusionCharts as it provides a good collection of charts, is easy to learn and works in all the browsers.
First I will make a simple chart in JavaScript, and then I will use the events & methods provided by FusionCharts to extend our chart’s functionality.
This is what we are building today:
See the Pen Working with JavaScript Charts by Vikas (@vikaslalwani) on CodePen.
It’s a 2D column chart showing an interesting soccer stat. If you hover over the columns, you will see that the text inside the bottom left box changes. This is achieved via
event. ‘Download SVG’ button will allow you to export chart as an SVG file and ‘Show 2015-2016 data’ button will update the chart with latest data (chart will initially load with 2014-15 data).
Now, let’s get started!
Making a Simple Chart
To make it little easier to understand, I have divided the process into following two steps:
Step-1: Get All the JavaScript Files and Set up Chart Container
For our project, we need two JavaScript files –
and
. You will find both the files inside JS folder in the download package. We need to include them using HTML
tag like this:
Now we need to create a container for our chart. For this, HTML
element works best:
Step-2: Create Chart Object and Render the Chart
Next step is to declare FusionCharts constructor. And for that we need two things – chart object and data array. This is what the syntax of constructor looks like (explanation after code snippet)
Attributes like
,
,
etc. are self-explanatory.
defines the id of the element where chart will be rendered. Two main elements in the above code snippet are chart object and data array (inside
). After both chart configurations and data are set, last thing to do is to call render method of our chart variable (
)
Chart object contains chart configuration options like caption, font properties, plot colors etc. In FusionCharts’ terminology, these are called chart attributes. There are hundreds of attributes you can use to customize your chart. It’s not possible to remember everything, so best is to go to above linked page and search for the chart type you are making and then use that list as reference.
FusionCharts accepts data for the chart as array of objects containing label and value pairs. We are loading data for 2014-15 at the time of first render, and will plot next season’s data later on button click.
Adding Event Handlers and Using Chart API
At this point we have a basic chart that visualizes the data we had. But in the real world we want to do more with our charts like handling events, exporting chart data etc. For those purposes we have to make use of events and methods. Below I have covered some of the most common use cases – mouse events like click & hover, downloading chart as SVG and updating chart with new data.
Handling Mouse Events
When you hover over different columns of the chart, you will notice the change in text inside the bottom left box. I am achieving this through something called dataPlotRollOver. It is an event raised by the FusionCharts object whenever a user hovers over a data plots (column, line, pie etc.). We can listen to this event through an event handler function.
Above code will go inside FusionCharts constructor just like
,
etc. we defined in step-2 above. Event handler receives two arguments –
and
.
contains details related to the event – type of event, event id etc., while
contains details about the particular data plot on which the event occurred. In our case it will have label, value etc. of the column that we mouseover.
We are extracting the label of the column on which our mouse is placed using
. You can replace
with
to make the event trigger on mouse-click instead of mouseover. You can learn more about various events supported on this API reference page, and for some theory about FusionCharts’ events you can refer events documentation page.
Downloading Chart in SVG Format
To download chart data we will make use of exportChart method:
lets us export a chart as an image (SVG in our case) or as a PDF document. We just need to define the type of format we want and FusionCharts will do rest of the job. In our example above, we are triggering it on click of ‘Download SVG’ button. To learn more about different formats in which you can export, please view this reference page.
Note: to enable exporting of a chart, the
attribute (of the chart object) should be set to 1. It will make use of FusionCharts’ export API to export the chart. You can also export chart at client-side by enabling the chart attribute
.
Updating Chart Data
Many times we want to to update a chart with more/new data after it is rendered. For example, imagine you are displaying month wise revenue of a company for past 5 years. Now in one view your chart might only display one year’s data, and for other years you have a drop-down menu. When somebody selects a different year from the drop-down you want to update your chart with that year’s data.
To achieve above functionality we can make use of
method.
lets us update the chart instantly with the new data. Here is how we use it:
Similar to the process described above, we are triggering this on click of a button. To make
work, we just need to specify new data (year_2015, defined as array of objects) and the format in which we are going to pass the data (
). Once we do that our chart data will get updated whenever somebody clicks the ‘Show 2015-16 data’ button.
Got questions or suggestions? Feel free to leave a comment below. I’m happy to help.
The post Working with JavaScript Charts appeared first on AppendTo Software Training for Teams.