Getting Started with billboard.js charts

billboard.js is a JavaScript library that facilitates data visualization in charts and is based on D3 V4+. billboad.js makes it easier for developers to visualize data instantly without needing to write a lot of boilerplate code.

1. Prerequisites

  • Node.js installed on your computer.
  • Npm installed on your computer.
  • Javascript and HTML knowledge.

2. Project setup

  • Create a project directory named charts.
  • Within the charts directory created above, create a new HTML file name index.html.

2.1. Installing billboard.js

billboard.js can be added to a project in two ways:

  1. Manual download Download billboad.js files from the billboard.js official website. Add the CSS and Javascript files downloaded into the chart directory we created above.

In the index.html, add the code snippet below into the header section.

   <!-- Load D3.js -->
    <script src="https://d3js.org/d3.v5.min.js"></script>

    <!-- Load billboard.js -->
    <script src="billboard.js"></script>

    <!-- Load style -->
    <link rel="stylesheet" href="billboard.css">
  1. Installation through npm. To install billboard.js into our project through npm, we must initialize npm in the root directory of our project.
  • Change to current terminal directory to our project directory.
  • Execute the command below to create package.json and package.lock.json files which are used by Node.js to manage external libraries added to Node.js applications.
 $ npm init

To install billboard.js into our project through npm, execute the command below.

 $ npm install billboard.js

2.2. Supported chart types in billboard.js

billboard.js supports a variety of charts. Below are certain chart types supported by billboard.js.

Chart types

2.3. Creating charts using billboard.js

In this section, we are going to create a simple chart using billboard.js.

  1. Create an HTML file names chart.html in the project folder we created above.
  2. Add the code snippet below to the chart.html file.
   <!DOCTYPE html>

    <title>billboard.js application</title>

    <head>
    <!-- loading billboard.js styles from the cdn -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">

    <!--Loading D3.js -->
    <script src="https://d3js.org/d3.v5.min.js"></script>

    <!-- Loading billboard.js scripts from the cdn --> 
    <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
    </head>
    <body>

    </body>

    </html>

Create a div with an id charting within the body tag in the chart.html file we created above.

 <div id="charting"></div>

Create a file named charting.js in the root project directory and add the code snippet below.

bb.generate({
    bindto: "#charting",
    data: {
        columns: [
            ["Java", 10, 320, 400, 210, 90, 210],
            ["Python", 310, 200, 210, 24, 220, 30]
        ],
        types: {
          Java: "area-spline",
          Python: "step"
        },
        colors: {
          Java: "blue",
          Python: "green"
        }
    }
    });
  • bb.generate({}) generates a chart with the arguments passed to it.
  • bindto: "#charting" holds the div id where the chart will be displayed in our HTML file.
  • data holds an object with all the information required to create the chart.
  • columns hold the data from which the chart will be plotted.
  • types indicates the type of chart to be used. In our chart, we are using a line chart for Java and a step-chart for Python.
  • colors specifies the color in which each data will be presented.
  1. Add the charting.js script to the chart.html file at the bottom of the body tag.
<script src="charting.js"></script>

The chart shown below is plotted.

Chart Image

2.4. Displaying categorical data using billboard.js

When a large set of data is to be displayed, then displaying them in categories becomes handy.

  • Create a div with id categorical in the chart.html file we created earlier.
  • Create a Javascript file named categorical.js in the project directory.
  • Add the code snippet below to the file created above.
   var chart = bb.generate({
    bindto: "#categorical",
    data: {
    x: "x",
    columns: [
        ["x", "www.siteone.com", "www.sitetwo.com", "www.sitethree.com", "www.sitefour.com"],
        ["downloads", 50, 100, 200, 600],
        ["uploads", 80, 110, 150, 220]
    ],
    groups: [
      [
        "downloads",
        "loading"
      ]
    ],
        colors: {
          downloads: "blue",
          uploads: "green"
        },
    type: "bar",
    },
    axis: {
        x: {
        type: "category"
        }
    },
    bindto: "#categoryData"
    });

The categorical data above is displayed in the chart as shown in the image below.

Image with Categorical data

2.5. Chart themes in billboard.js

billboard.js comes with various themes, some of which include:

  • graph
  • datalab
  • insight
  • default

To use the above themes, load the CSS file provided by billboard.js into your HTML file as shown below.

<link rel="stylesheet" href="
https://naver.github.io/billboard.js/release/latest/dist/theme/insight.css">

3. Conclusion

Now that you have learned how to integrate billboard.js into a Node.js application, explore the available charts and themes from the billboard.js official docs.

Happy coding!

Related posts:

Working with APIs in TypeScript
The History of Node.js
Top Node.js Interview Questions
Writing A Multiplayer Text Adventure Engine In Node.js: Game Engine Server Design (Part 2)
Node.js Network Requests using Axios
How to Build a Static site with Gatsby.js
Building a RESTful API with Adonis.js
Optimizing Critical-Path Performance With Express Server And Handlebars
Introduction to hapi.js Framework
Breaking Down MEAN vs MERN Stacks
Why Node.js is Great for Backend Development?
Getting Started with Json Web Auth using Angular 11 and Node.js
Open-source packages & Code Security using NPM
React To The Future With Isomorphic Apps
Getting Started with Node.js REPL
Better Error Handling In NodeJS With Error Classes
Getting Started With Node.js Timers
Create and Deploy NPM Packages
How To Build A Skin For Your Web App With React And WordPress
Analyzing Your Company’s Social Media Presence With IBM Watson And Node.js
Creating Node.js Application Using Express Generator
Most Useful Node.js Packages
How to Build a Custom URL Shortener using Node.js, Express, and MongoDB
Creating a Real Time Chat App using React and Socket IO with E2E Encryption
Implementing Lipa na Mpesa Online using Node.js
Getting Started with Google Sheets API in Node.js
How To Build A CLI Tool With Node.js And PhantomJS
Writing A Multiplayer Text Adventure Engine In Node.js: Adding Chat Into Our Game (Part 4)
Sharing Code Between Projects: Lessons Learned In The Trenches
Building A Node.js Express API To Convert Markdown To HTML
Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers
Creating Secure Password Flows With NodeJS And MySQL