Of Charts and Dashboards

(A Javascript 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…

Dependencies gridstack.js

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.

HTML gridstack.jsI’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…

First widget gridstack.js

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:

Dependencies plus border gridstack.js

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

  • initialize the grid with five different handle to resize:
    • $(‘#grid’).gridstack({
      resizable: {
      handles: ‘e, se, s, sw, w’
      }
      });
  • grab the grid:
    • var grid = $(‘#grid’).data(‘gridstack’);
  • turn our elements into widgets!
    • for (var i = 0; i < $(‘.chart-container’).length; i++) {
      // convert elements to gridstack widgets
      grid.makeWidget($(‘.chart-container’)[i]);
      }
On document ready gridstack.js

Altogether, gridstack-highcharts.js should look like this

Getting started gridstack.js

Now if we could just add charts…

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:

  1. Store some Highcharts options into variables for reusability
  2. Write one function to render the first pie chart and write another for the second
  3. 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.

Highcharts options gridstack.js

Our Highcharts options

initializeChart gridstack.js

Our first chart

initializeChartTwo gridstack.js

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…

Health care charts gridstack.js

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 function for gridstack.js demo

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.

resizeChart call for gridstack.js demoBack 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 gridstack.js demo

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.

– dylan (@radiolips)

* Want to see the completed files? View them on github: https://github.com/radiolips/gridstack-highcharts

Looking for information on the future of gridstack.js? Click here for information about the upcoming version 1.0 release.

2 thoughts on “Of Charts and Dashboards

Leave a Reply

Your email address will not be published. Required fields are marked *