Mapping Chart Data

Before we code the chart component, we should think about its functionality and how it could be reused it in a future project.

Things that we would want the chart to have are:

  • a flexible width and height to make it resizable on any device
  • a label indicating the quantity of a bar (the amount of hours)
  • a label showing the date (when did we work)

Our goal is to receive the data in a specific format and then render the chart agnostic. It will allow us to reuse this component in any other module should we need to, or even a project that is not Meteor-based. All we need to do is ensure that the data is passed in the correct format.

That being said, let’s define the data parameter which will be an array of objects, each object comprising two parameters: the quantity (on the y axis - q) and the label (on the x axis - label). Our chart component will iterate over every object and draw a bar associated for each one, labeling it horizontally with the date value and defining its height based on the hours value.

Now we should add our chart to our App component and fill in the function that will send data to our new HourChart component.

Add the mapData function to your App component. It should initialize an array of objects with no quantities and previously defined labels (the days of the week). Next we map the hours object (returned from our collection) with the help of MomentJS to add the number of hours to the q property. Complete the function based on the comments:

   getMeteorData: function() {

   // Create a data object and return it
     mapData: function() {     
       // Create a key - value store using q on the y-axis and label on x-axis
       var data = [
         { q: 0, label: 'Mon' },
         { q: 0, label: 'Tue' },
         { q: 0, label: 'Wed' },
         { q: 0, label: 'Thu' },
         { q: 0, label: 'Fri' },
         { q: 0, label: 'Sat' },
         { q: 0, label: 'Sun' }

       // Loop over the data variable and map the dates from the database to a day of the week  (use moment's weekday function)
       CODE HERE

       // Return the data variable
       return data;

   render: function() {

Don't forget to add the HourChart into the righthand column and pass the props as data (data={this.mapData()}).

Now that we have all our components on the App component, let's create the chart component using D3!


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more