(tutorial) Building Charts and Dashboards With gridstack.js and Highcharts

(A Javascript gridstack.js Highcharts tutorial for making a dashboard with data visualizations (charts!) using gridstack.js and Highcharts in five minutes flat. Easy. To jump straight to the code, check out the github link at the end of the post. Want to know what you’re getting into? Check out my jsfiddle where you can quickly play with the code and output from this tutorial.)

You know what this world needs more of? Charts. We need more charts. Data viz ftw. And they should be interactive. And you should be able to drag them around. And resize them. Agreed? Fantastic – let’s get started.

What you’ll need:

Now that we’ve prepped all of our dependencies, let’s create a file called gridstack-highcharts.html. Get all those normal HTML tags in there – html, head, body, etc. etc. In the head section, we’re going to reference all of our dependencies. It should look something akin to…

It’s time to build some widgets! We’re going to make two and drop them into the body section of gridstack-highcharts.html. Feel free to change the width/height/coordinates as you’d like, but the following is what mine looks like. Keep in mind that gridstack.js likes Bootstrap, so we’re going to strap ourselves in.

I’ve added a couple preliminary elements for our charts. You’ll be glad that those are in there in just a minute. For now, let’s check out what we’ve got. If we open our HTML file in a browser, we’ll see…

Hm. No, I don’t think that’s quite complete.

Maybe we should add in a line or two of Javascript and get this widgetized! Back in gridstack-highcharts.html, in the head section, we’re going to add another Javascript file: gridstack-highcharts.js. While we’re in the head section, let’s put borders around our widgets to make them more defined:

Now let’s create a new Javascript file in the same location as our HTML file, and give it that name we just referenced – gridstack-highcharts.js. In this file, when the document is ready, we’re going to

Now when we reload gridstack-highcharts.htmlin our browser, we get widgets that can be dragged and resized!

Great! Now let’s add a couple pie charts. I’ve taken the liberty of gathering a little information on who voted for and who voted against the new healthcare reform bill in the United States (May 4, 2017). We’ll be making one pie chart showing what percentage of the people who voted for the reform were democrat vs republican, and we’ll do another pie chart showing the same percentages against the reform. To build our charts, we’re going to:

Store some Highcharts options into variables for reusability

Write one function to render the first pie chart and write another for the second

Initialize the charts in our on document ready code

I don’t want my charts to be particularly flashy, but it’s very easy to make changes if you do want to change yours. Pie charts, bar charts, line charts, drill downs. Highcharts documentation is helpful.

Our Highcharts options

Our first chart

Our second chart

Now if we call these two functions from our main function ( initializeChart() and initializeChartTwo) and load our html page, we have something that looks a little like…

Almost there, but the sizing doesn’t look right

Darn, Highcharts, you haven’t automatically set your height for us! That’s okay, we can write a quick function to set the Highcharts element to the same height as its parent (and then we’ll call .reflow()to tell Highcharts to refresh the chart).

resizeChart will set the height of the chart and trigger a reflow

At the top of our Javascript file, let’s create a function called resizeChart.

Back in our document ready function, we’ll need to call our new resize function. In case we decide to add more charts, we’ll loop through each element and call our function.

Awesome! We now have draggable, resizable widgets displaying charts! If you’re as excited as I am, you’ve already clicked around. If you’ve already clicked around, you’ve found that the charts are not resizing when the widgets are resized. No problem. We can tap into the event triggered by gridstack when resize is complete – gsresizestop. Cake! (Note – you must be using version 0.3.0+ of gridstack.js to have access to this event).

Resize charts when we resize our widgets

Go ahead. Reload your page and resize the widgets. Watch the charts resize with them. We’re all done! Easy as pie(charts). Now go forth and design your own wonderful charts and dashboards.

If you have any questions or comments, please leave them for me here or reach out to me on the gridstack.js Slack. This gridstack.js Highcharts tutorial has hopefully helped you build your own charts in dashboards using gridstack.js and Highcharts. Tell me what tutorial you’d like to see next!