Adapting and Changing Bullet Chart Components

This lesson explores some of the simple changes that can be made to bullet charts that may not necessarily be obvious.

Understand your data

The first point to note is that understanding the data loaded from the JSON file is key to knowing what your chart is going to do.

We’ll start by looking at our data in a way that hopefully makes the most sense.

You may be faced with data for a bullet chart that’s in a format as follows:

[
{"title":"CPU Load","subtitle":"GHz","ranges":[1500,2250,3000],"measures":
[2200],"markers":[2500]},
{"title":"Memory Used","subtitle":"MBytes","ranges":[256,512,1024],"measures":
[768],"markers":[900]}
]

This is perfectly valid data, but we’ll find it slightly easier to understand if we show it like this:

[
  {
    "title":"CPU Load",
    "subtitle":"GHz",
    "ranges":[1500,2250,3000],
    "measures":[2200],
    "markers":[2500]
  },
  {
    "title":"Memory Used",
    "subtitle":"MBytes",
    "ranges":[256,512,1024],
    "measures":[768],
    "markers":[900]
  }
]

The data is exactly the same (in terms of content), but I find it a lot easier to comprehend what’s going on with the second example.

There is a section in the course called “Understanding JavaScript Object Notation (JSON)” in the “Assorted Tips and Tricks” chapter. I found life a lot easier once I started to understand how data was structured in JSON. And if you take a bit of time to understand it, I think you’ll find life easier too.

Add as many individual charts as you want

The example data in the file is an array of two groups. Each group represents the information required to generate one bullet chart. Therefore, the example data above will create the following charts: