Scatter chart defined as data-type="scatter" plots shapes or labels/letters scattered across x and y axes. Letters to plot with their colors can be provided in the form of data sets where each set represent a single letter/shape to plot. Additionaly a third dimension representing the size/volume of the shape can also be provided inside sets.
3.1.1 Sets Space separated and [ ] enclosed sets are provided for data-sets attribute. A set is formatted as [x y 'letter' 'color' z] where x and y are x and y cartesian coordinates, letter is the label to plot, Optioanl 'color' is the fill style of label and is provided according to the reference without using color keywords. In th absence of 'color' inside sets, colors will be taken from color property inside data-text-opts if provided, or from data-colors if provided or from themes. The Optional z is the decimal value and represents the size/volume of the custom shape(This will not work for letters). For drawing custom shapes, function name as strinng can be provided to replace the letter with a shape. To identify that the given 'letter' string is the name of the function, it must be prepened by 'fn#' to make it look like 'fn#letter'. This function will receive the arguments ctx, x, y, z where ctx is the current drawing 2d context, x, y and z are normalized dimensions present in current set being traversed. The provided function must be present in global/window scope(See demo 3.3 and 3.6 for explanation).
3.1.2 Ranges default can be provided as data-range or can be defined explicitly for each x and y axes by data-range-x and data-range-y. Range for z axis will be computed if absent or can be provided by data-range-z.
3.1.3 Color Range Bubbles can be styled mapping a color range to z value for example to visualize temperature transition or to produce a heat map effect. It is provided as data-color-range attribute and will only affect those sets with no or empty styles. Its values must be a start and end color strings separated by a single space. Color strings are provided according to the reference. Note that color keywords e.g. red, green, blue will not work in this regard. It is recommended to provide colors in RGBA format. (For bubble chart, see demo 4.4)
3.1.4 Axes Both axes can be plotted by providing axis:value inside data-opts where value is the axis value to plot axis marker at. Explicit values for x-axis and y-axis can be provided by xAxis and yAxis properties respectively providing inside data-opts.
3.1.5 Options Various option attributes can be provided to configure letter colors, fonts, alpha, axis and offsets etc. Options are provided in key:value format e.g. key1:value1 key2:'String Value'. Key:Value must be distinguished by a single : with no space whereas different key:value pairs must be separated by a single space and strings containing space must be enclosed within Single Quotes (''). It is recommended to enclose all non decimal values within single quotes. Option configurations for Scatter Chart are explained below.
true value, bubbles will be drawn to plot a bubble chart. (For bubble chart)sets. (For bubble chart)'10px sans-serif'.data-colors or themes whichever applicable or evaluated by default to '#000'data-opts provided, letter colors/styles will be sheered with this alpha value.color but this will not override non empty styles present in sets. (See demo 3.3)0.0.data-text-stroke-opts present is attributes.
'10px sans-serif'.'#000'data-opts provided, letter stroke colors will be sheered with this alpha value.0.0.| 3.2 Simple Scatter Chart | |
|
|
| 3.3 Scatter Chart with custom shape |
JavaScript: drawStar function (Note how a shape function(drawStar) is provided to replace letter with a custom shape by prefixing label string with 'fn#')
function drawStar(ctx, x, y, z)
{
var r = z || ctx.canvas.width/25, p = 5;
ctx.save();
ctx.beginPath();
ctx.translate(x, y);
ctx.moveTo(0,0-r);
for (var i = 0; i < p; i++)
{
ctx.rotate(Math.PI / p);
ctx.lineTo(0, 0 - (r * 0.5));
ctx.rotate(Math.PI / p);
ctx.lineTo(0, 0 - r);
}
ctx.fill();
ctx.restore();
}
|
| 3.4 Scatter Chart with Letters and Colors |
|
| 3.5 Scatter Chart with TextStroke |
|
| 3.6 Scatter Chart with Custom Shape and Third Dimension (Size) |
JavaScript: drawStar function (Note how a shape function(drawSquare) is provided to replace letter with a custom shape by prefixing label string with 'fn#')
function drawSquare(ctx, x, y, z)
{
var r = z || ctx.canvas.width/25, p = 5;
ctx.save();
ctx.beginPath();
ctx.fillRect(x-z/2,y-z/2,z,z);
ctx.fill();
ctx.restore();
}
|