Plotr Project Page › Documentation › Option: colorScheme

NOTE: this page is a work in progress!

Plotr comes with a bunch of predefined color schemes, but it also provides you the ability to generate your own sets, or hard-code them yourself.

Using the predefined color schemes

Plotr comes with six predefined color schemes: red, green, blue, grey, black and darkcyan. They’re defined in Base.js. The definitions look like this:

Plotr.Base.colorSchemes = {
	red: '#6d1d1d',
	green: '#3c581a',
	blue: '#224565',
	grey: '#444444',
	black: '#000000',
	darkcyan: '#305755'
};

Each key (red, green etc.) has an hexadecimal color code value. Now, assume we’ve got four datasets and we want to use the ‘blue’ color scheme. This is how the options object will look like:

var options = {
	"colorScheme": "blue"
};

You can experiment with the predefined color schemes by using the plotr configurator. All you have to adjust is the value selected in the color scheme selectbox (shown in the image below)

Switch between predefined color schemes

Using generated color schemes

Color schemes are special objects called Hashes. Those objects aren’t core javascript objects, but are defined by the Prototype JS library.

Hash can be thought of as an associative array, binding unique keys to values (which are not necessarily unique), though it can not guarantee consistent order its elements when iterating. Because of the nature of JavaScript programming language, every object is in fact a hash; but Hash adds a number of methods that let you enumerate keys and values, iterate over key/value pairs, merge two hashes together, encode the hash into a query string representation, etc.

The color schemes are generated by Plotr.Base.generateColorscheme() in Base.js. The first argument of this function is a hex color string like ‘#ff0000′ (red). The second argument is an array of the names of the datasets.
Because we want to have a different color for each dataset

// Example datasets, we only need the keys.
var dataset = {
	'd1': [[0, 1], [1, 1], [2, 1.414], [3, 1.73]],
	'd2': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73]],
	'd3': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2]],
	'd4': [[0, 0.86], [1, 0.83], [2, 3], [3, 1.73]]
};
// So the keys are: 'd1', 'd2', 'd3' and 'd4'.

// Generate a colorscheme.
var generatedScheme = Plotr.Base.generateColorscheme(
	'#ff0000', // => base color
	[ 'd1', 'd2', 'd3', 'd4'] // => array of keys
);

// Use the generated color scheme.
var options = {
	"colorScheme": generatedScheme
};

To get the best results, you have to know what color to choose as the base color. To base color is the darkest color in the color scheme. The function generateColorscheme() takes the base color and for each dataset it raises the intensity of the base color. When you want to plot a chart that has lot’s of datasets, you have to take dark color, otherwise the generated colors will eventually be white. I’m aware of this problem and it will be fixed in the next version. For now, when dealing with lots of datasets, go on to the next paragraph.

Defining custom color schemes

When you’re not satisfied with the generated color schemes, or you end up with white colored datasets, you should use the custom color schemes. Here’s how:

var customScheme = new Hash({
	'd1': '#00A800',
	'd2': '#F07800',
	'd3': '#F00000',
	'd4': '#900060',
	'd5': '#000000'
});

// Use the custom color scheme.
var options = {
	"colorScheme": customScheme
};

At the time of writing the current version of Plotr is 0.3.0. Some things might have changed.