Sketch plugin for creating charts with random data
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets adding missing files Oct 25, 2018
chippen-charts.sketchplugin/Contents Remove version Dec 2, 2018
images gif how it works Oct 30, 2018
src Remove version Dec 2, 2018
.appcast.xml Update .appcast with new tag Dec 2, 2018
.gitignore node_modules Oct 25, 2018
LICENSE init Oct 24, 2018
README.md gif how it works Oct 30, 2018
package-lock.json Publish 3.3.3 release 🚀 Dec 2, 2018
package.json Publish 3.3.3 release 🚀 Dec 2, 2018

README.md

Chippen charts

Random bar charts for your data driven mockups

This is a Sketch plugin for creating charts with random data for use in mockups. Change the size of selected rectangles. Chose between random and linear. Works for both horizontal and vertical bar charts. Made with love by Small Multiples in Chippendale.

How it works

Workflow

  1. Create desired amount of rectangles
  2. Layers must be in the correct order
  3. Make sure layers are either bottom or left aligned
  4. Run the plugin and adjust settings in dialog window if necessary
  5. The size of you bars will be adjusted

Settings

Horizontal or vertical bar chart

Chippen Chart detects wheter you are about to create a vertical or horizontal bar chart using the x and y-position of your selected layers. If there is no common x or y-value it will by default apply the logic for vertical bars.

Min and max size (pixel)

Chippen chart detects minimum and maximum pixel height of selected layers and apply those to the new bar chart. You can also adjust your desired extrema in the dialog window. If all selected layers share the same height the plugin will apply a default value for either min or max.

Trend type

You can choose between 5 trend types. All of them will use the min and max value you define. Random will apply completely random integer numbers. Linear_ will interpolate values between min and max. Natural will do the same while adding a notion of randomness.

  • Random
  • Trend going up ↑ (linear)
  • Trend going up ↑ (natural)
  • Trend going down ↓ (linear)
  • Trend going down ↓ (natural)

Examples

Create and select rectangles

Define chart setting

You can define the height / width of the smallest and largest bar. The plugin will automatically trey to use the extrema of your current selection.

This is how a random chart looks like

Defining a chart with trend going up

Besindes random numbers you can choose between linear trends and natural trends. Natural trends are like linear ones, but they have a little bit of randomeness aplpied to them.

This is how a trend up (natural) chart looks like

Showcase of different types

Troubleshooting

Unintended results will appear when the proportional resizing is set between a layer's width and height. Proportional resizing must be disabled 🔓

Love it or hate it?

Let us know. info@small.mu | @smallmultiples