How-to post #2: Rating-Style Piano Charts Using Rules

By | Published: April 28th, 2010

Now that we’re all clear about what a piano chart is and why we call it a piano, I wanted to post a follow-up to show a quick tutorial on building a more advanced piano chart using ZingChart’s rules array.

Using Rules in ZingChart

ZingChart allows the implementation of rules across many different objects, allowing a programmer to specify the colors, images, types and sizes of plots, value-boxes,  tooltips, ticks, and other chart elements based on data values. While implementations on basic chart types can make data easier to interpret, adding some creative rules in a piano chart type can make data really jump off the page.

Advanced Rule Implementation for Great Piano Charts

Color and brightness can be great aspects for a piano chart; the shades and clusters help draw trends and conclusions. Here’s an example where we’ve used rules to set a range of colors from dark red to dark green to identify car part scores on a range of 0 to 10, with colors changing at 2-point intervals.

This chart may be easy to interpret, but for most customer-facing charts, normal pianos and heatmaps aren’t going to make it past even a lenient designer. Unless, of course they’re designing a 1985 video game.

By changing the rules to call background-images instead of background-colors, chart makers have much greater design freedom. The range of scores can now be presented in a much more consumer-friendly format, as below:

Here we’ve used easily-recognizable filled circles to show the range of scores. The 5 images give users a quick glance at best performing years and parts; the hover-over tooltips reveal the exact value of each score.

How-to

Here’s how to turn a normal piano chart into a nice data visualization using rules to call images.

1. Within the “plot”: object, use “aspect”: “none”, as we’ll be using different images/colors instead of size or brightness to present data values.

2. Set “background-transparency”: to true to allow for a consistent plotarea background.

3. Implement rules arrays in the “plot”: object, and set background-images (preferably transparent .png images).

"plot":{
  "rules" : [
    {
    "rule" : "%v < 2",
    "background-image" : "images/icon-worst.png"
    },
    {
    "rule" : "%v >= 2 && %v < 4",
    "background-image" : "images/icon-not-so-good.png"
    },
    {
    "rule" : "%v >= 4 && %v < 6",
    "background-image": "images/icon-average.png"
    },
    {
    "rule" : "%v >= 6 && %v < 8",
    "background-image": "images/icon-good.png"
    },
    {
    "rule" : "%v >= 8",
    "background-image" : "images/icon-best.png"
    }
  ]
}

4. Style tooltip “background-color”: to coordinate with data values.

In our example, we used three color gradients, to represent below-average, average, and above average.

"tooltip": {
    "rules" : [
    {
    "rule" : "%v < 4",
    "background-color" : "#d6a698 #e33a28"
    },
    {
    "rule" :"%v >= 4 && %v < 6",
    "background-color" : "#d0d3db #989ba2"
    },                    
    {
    "rule" : "%v >= 6",
    "background-color" : "#abe155 #83b628"
    }
    ],
}

5. Style fonts/axes/colors to fit your brand or project.

For in-depth information and code examples on features and styling of chart elements, visit our docs.

6. Share your visual with us on twitter!