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!

comments powered by Disqus