Initially when we released Mockups, we thought Charts should not have the option to color. They should look and feel just like wireframes.

Upon working with several users who tried to create dashboard wireframes, their first instinct was to reach out to the top "Fill" color to see if they could add color to their charts. So we had to promote this feature ahead of others and release it asap.

So here is how we color our Chart mockups

Image

 

Drag the Bar chart from the left panel to the right hand side

The chart shows with no colors

How to edit the Bar chart

1. Double click the bar chart

Image

2. Change the Rows and columns values to reflect how you want your bar chart

3.Image

4. We update the labels and values columns and then click OK

5.Image

6. Right click on the Chart to see the color context menu

Image

Let us go through each of the newly added context menu

Toggle Grid

By selecting the Toggle Grid, we can switch between the background Grid

Image

Toggle Color

By selecting Toggle Color, you can turn coloring on/off.

Image

By select Toggle Color again, it will show the wireframe look as above(previous image)

Toggle Color Style

There are two color styles available

1. Color Series

When you provide a starting color from the Fill toolbar button, the chart will compute all the color in its series by adjusting the HSV value (hue,saturation,value)

So in this case our start color dictates what the remaining bars will be colored with

Image

Switching to more brighter color

Image

2. Color Shades

Color shades works similarly, except in this case it produces the shades of the same start color

Image

 

Toggle Sequential Colors

Based on visualization principles, all bars in a single bar chart should be of the same color so to facilitate quick switching you can use this menu to use single color for all bars

Image

 

Much of the coloring can be discovered through playing with the options

All of the remaining charts behave similarly (except where the chart should not)

Dashboard Charts with Transparency

If you turn the opacity value for any chart you can create some beautiful combination charts. Here in the example below the Pie chart is behind the bar chart but since there is transparency set for the bar, it creates a nice glass effect

Image

 

Some more color examples

Image

 

And some more

Image

Related posts:

  1. How to build Table Grids
  2. KPI widget Mockup for Dashboards
  3. How to mockup dials, speedometer, gauges for Dashboards
  4. MockupTiger Release 1.2.63 – 20110825
  5. Mockup Grid Component – Is this the most advanced table/grid in HTML5 ?

Posted in Tutorials