Visualization - Template

From Q
Jump to navigation Jump to search

This feature creates a re-usable template that can be used in all Visualization outputs in the document. So you can specify appearance settings (such as color palettes and font settings) and these get applied automatically to any visualization you hook up to the template.

A step-by-step guide is found on the Displayr blog.

How to apply

To apply a template to a visualization, you first make the visualization, and then go to its Object Inspector (right-hand panel). In its Object Inspector, go to Chart > APPEARANCE > Use template and then select the template you want to use from the dropdown (which will have a little R symbol next to it).

Use template.PNG

The appearance of the visualization will keep up to date with any changes you make to the template (provided you have set everything to Automatic calculations).

Example

In the following example, a template is created and then applied to an area chart visualization.

A template is altered as per the following, using the various COlOR and FONT option tabs. In particular, the Named Colors option was used to match brand names to a specific color.

  • Default settings

  • Altered template

Then for the following area visualization (small multiples):

Before area.PNG


Going to the visualization's Object Inspector > Chart options, the template was selected in the dropdown:

Use template.PNG



Resulting in this automatic change to the appearance:

After area.PNG

Options

INPUTS

Color palette This can be one of the standard palettes, or you can create a palette using Named colors: the color of each data series is associated with the name of the data series. The color of missing values with no associated name is specified by Default color. Note that this palette is only used in charts where the color palette dropdown is set to Default or template settings.

CHART FONTS

These fonts are used in most visualizations (all of them except the ones that are controlled by Number fonts). Note that only the relevant text components for each chart type will be applied to a visualization.

NUMBER FONTS

These fonts are used when the template is used in Number in Oval, Number in Rectangle, Number in Donut, Number in Gauge, Number in Bar, Pictograph - Single Icon, Pictograph - Repeated Icons and Use default or template font settings is selected.

More Information

How to create a visualization template in Displayr

Code

// VERSION 2.0.1

form.setHeading("Visualization - Template");
var font_families = !!Q.GetAvailableFontNames ? Q.GetAvailableFontNames() : ["Arial", "Arial Black", "Comic Sans MS",  "Courier New", "Georgia", "Impact", 
                 "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
var palettes = ["Named colors", "Custom palette", "Custom gradient", "Default colors", "Colorblind safe colors", "Rainbow", "Light pastels", "Strong colors", "Spectral colors (red, yellow, blue)", "Spectral colors (blue, yellow, red)", "Reds, dark to light", "Reds, light to dark", "Greens, dark to light", "Greens, light to dark", "Blues, dark to light", "Blues, light to dark", "Greys, dark to light", "Greys, light to dark", "Heat colors (yellow, red)", "Terrain colors (green, beige, grey)"];
var colorInputOpts = ["Comma-seperated list of hex codes",  "Color pickers"];
var allow_control_groups = Q.fileFormatVersion() > 10.9;

if (allow_control_groups)
    form.group({label: "Color Palette"});
var qColor = form.comboBox({name: "formPalette", label: "Color palette", alternatives: palettes, default_value: "Spectral colors (blue, yellow, red)", required: true});
var colOpt = qColor.getValue();
if (colOpt == "Custom gradient")
{
    if (!allow_control_groups)
        var qGradientLabel = form.newLabel("Gradient start/end");
    form.colorPicker({name: "formCustomGradientStart", label: !allow_control_groups ? "" : "Gradient start", default_value: "#5C9AD3"});
    form.colorPicker({name: "formCustomGradientEnd", label: !allow_control_groups ? "" : "Gradient end", default_value: "#ED7D31"});

} else if (colOpt == "Custom palette")
{
    form.textBox({name: "formCustomPalette", label: "Custom palette", default_value: "#5C9AD3, #ED7D31", prompt: "Enter color as a string. Multiple values should be separated by commas."});
    // Do not use color pickers because there is no nice way to control the number of color pickers

} else if (colOpt == "Named colors")
{
    form.colorPicker({name: "formColor0", label: "Default color", default_value: "#CCCCCC", prompt: "Choose color used when no matching name is found"});
    var qColorInputOpts = form.comboBox({name: "formColorInput", label: "Specify colors using", alternatives: colorInputOpts, default_value: colorInputOpts[1]}).getValue();
    if (qColorInputOpts == colorInputOpts[0])
    {
        var qColors = form.textBox({name: "formColors", label: "Color palette"}).getValue();
        var numColors = qColors.split(",").length;
        for (var i = 1; i <= numColors; i++)
            form.textBox({name: "formColorName" + i, label: "Color name " + i, required: false});
    }
    else
    {
        var i = 1;
        var qCName = form.textBox({name: "formColorName" + i, label: "Color name " + i, required: false}).getValue();
        while(qCName != "")
        {
            form.colorPicker({name: "formColor" + i, label: "Color " + i, prompt: "Pick color associated with " + qCName});
            qCName = form.textBox({name: "formColorName" + (i + 1), label: "Color name " + (i + 1), required: false}).getValue();
            i++;
        }
    }
}

if (allow_control_groups)
    form.page("Chart fonts");
if (allow_control_groups)
    form.group({label: "Global font", expanded: true});
var globalFontFamily = form.comboBox({name: "formGlobalFontFamily", label: "Global font family", alternatives: font_families, default_value: "Open Sans", editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."}).getValue();
var globalFontColor = form.colorPicker({name: "formGlobalFontColor", label: !allow_control_groups ? "" : "Global font color", default_value: "#444444"}).getValue();
var globalFontSize = form.numericUpDown({name: "formGlobalFontSize", label: "Font size", default_value: 8, increment: 0.5}).getValue(); // specifies data label font size, defaults for other fonts will be multiplied accordingly
var globalfontUnits = form.comboBox({name: "formGlobalFontUnits", label: "Font units", alternatives: ["pt", "px"], default_value: "pt", prompt: "Are font sizes specified in terms of points or pixels?"}).getValue();

if (allow_control_groups)
    form.group({label: "Data label font", expanded: false});
form.comboBox({name: "formDataLabelFontFamily", label: "Data label font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formDataLabelFontColor", label: "Data label font color", default_value: globalFontColor});
form.numericUpDown({name: "formDataLabelFontSize", label: "Data label font size", default_value: globalFontSize, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Legend font", expanded: false});
form.comboBox({name: "formLegendFontFamily", label: "Legend font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formLegendFontColor", label: "Legend font color", default_value: globalFontColor});
form.numericUpDown({name: "formLegendFontSize", label: "Legend font size", default_value: globalFontSize, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Title font", expanded: false});
form.comboBox({name: "formTitleFontFamily", label: "Title font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formTitleFontColor", label: "Title font color", default_value: globalFontColor});
form.numericUpDown({name: "formTitleFontSize", label: "Title font size", default_value: 1.6 * globalFontSize, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Subtitle font", expanded: false});
form.comboBox({name: "formSubtitleFontFamily", label: "Subtitle font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formSubtitleFontColor", label: "Subtitle font color", default_value: globalFontColor});
form.numericUpDown({name: "formSubtitleFontSize", label: "Subtitle font size", default_value: globalFontSize, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Footer font", expanded: false});
form.comboBox({name: "formFooterFontFamily", label: "Footer font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formFooterFontColor", label: "Footer font color", default_value: globalFontColor});
form.numericUpDown({name: "formFooterFontSize", label: "Footer font size", default_value: 0.8 * globalFontSize, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Panel axis title font", expanded: false});
form.comboBox({name: "formPanelTitleFontFamily", label: "Panel title font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formPanelTitleFontColor", label: "Panel title font color", default_value: globalFontColor});
form.numericUpDown({name: "formPanelTitleFontSize", label: "Panel title font size", default_value: 1.2 * globalFontSize, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Categories axis title font", expanded: false});
form.comboBox({name: "formCategoriesTitleFontFamily", label: "Categories axis title font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formCategoriesTitleFontColor", label: "Categories axis title font color", default_value: globalFontColor});
form.numericUpDown({name: "formCategoriesTitleFontSize", label: "Categories axis title font size", default_value: 1.2 * globalFontSize, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Categories axis tick label font", expanded: false});
form.comboBox({name: "formCategoriesTickFontFamily", label: "Categories axis tick label font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formCategoriesTickFontColor", label: "Categories axis tick label font color", default_value: globalFontColor});
form.numericUpDown({name: "formCategoriesTickFontSize", label: "Categories axis tick label font size", default_value: globalFontSize, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Values axis title font", expanded: false});
form.comboBox({name: "formValuesTitleFontFamily", label: "Values axis title font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formValuesTitleFontColor", label: "Values axis title font color", default_value: globalFontColor});
form.numericUpDown({name: "formValuesTitleFontSize", label: "Values axis title font size", default_value: 1.2 * globalFontSize, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Values axis tick label font", expanded: false});
form.comboBox({name: "formValuesTickFontFamily", label: "Values axis tick label font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formValuesTickFontColor", label: "Values axis tick label font color", default_value: globalFontColor});
form.numericUpDown({name: "formValuesTickFontSize", label: "Values axis tick label font size", default_value: globalFontSize, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Hover text font", expanded: false});
form.comboBox({name: "formHoverFontFamily", label: "Hover font family", alternatives: font_families, default_value: globalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formHoverFontColor", label: "Hover font color", default_value: globalFontColor});
form.numericUpDown({name: "formHoverFontSize", label: "Hover font size", default_value: globalFontSize * 1.15, increment: 0.5});

if (allow_control_groups)
    form.page("Number fonts");

if (allow_control_groups)
    form.group({label: "Global font", expanded: true});
var globalNumberFontFamily = form.comboBox({name: "formGlobalNumberFontFamily", label: "Global font family", alternatives: font_families, default_value: "Arial", editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."}).getValue();
var globalNumberFontColor = form.colorPicker({name: "formGlobalNumberFontColor", label: !allow_control_groups ? "" : "Global font color", default_value: "#808080"}).getValue();
var globalNumberfontUnits = form.comboBox({name: "formGlobalNumberFontUnits", label: "Font units", alternatives: ["pt", "px"], default_value: "pt", prompt: "Are font sizes specified in terms of points or pixels?"}).getValue();

if (allow_control_groups)
    form.group({label: "Data label font", expanded: false});
form.comboBox({name: "formDataLabelNumberFontFamily", label: "Data label font family", alternatives: font_families, default_value: globalNumberFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.comboBox({name: "formDataLabelNumberFontWeight", label: "Data label font weight", alternatives: ["Normal", "Bold"], default_value: "Normal"});
form.colorPicker({name: "formDataLabelNumberFontColor", label: "Data label font color", default_value: globalNumberFontColor});
form.numericUpDown({name: "formDataLabelNumberFontSize", label: "Data label font size", default_value: 24, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Text above font", expanded: false});
form.comboBox({name: "formTextAboveFontFamily", label: "Text above font family", alternatives: font_families, default_value: globalNumberFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.comboBox({name: "formTextAboveFontWeight", label: "Text above font weight", alternatives: ["Normal", "Bold"], default_value: "Normal"});
form.colorPicker({name: "formTextAboveFontColor", label: "Text above font color", default_value: globalNumberFontColor});
form.numericUpDown({name: "formTextAboveFontSize", label: "Text above font size", default_value: 10, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Text below font", expanded: false});
form.comboBox({name: "formTextBelowFontFamily", label: "Text below font family", alternatives: font_families, default_value: globalNumberFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.comboBox({name: "formTextBelowFontWeight", label: "Text below font weight", alternatives: ["Normal", "Bold"], default_value: "Normal"});
form.colorPicker({name: "formTextBelowFontColor", label: "Text below font color", default_value: globalNumberFontColor});
form.numericUpDown({name: "formTextBelowFontSize", label: "Text below font size", default_value: 10, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Gauge labels font", expanded: false});
form.comboBox({name: "formGaugeFontFamily", label: "Gauge labels font family", alternatives: font_families, default_value: globalNumberFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.colorPicker({name: "formGaugeFontColor", label: "Gauge labels font color", default_value: "#B3B3B3"});
form.numericUpDown({name: "formGaugeFontSize", label: "Gauge labels font size", default_value: 9, increment: 0.5});

if (allow_control_groups)
    form.group({label: "Hover text font", expanded: false});
form.comboBox({name: "formHoverNumberFontFamily", label: "Hover font family", alternatives: font_families, default_value: globalNumberFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
form.numericUpDown({name: "formHoverNumberFontSize", label: "Hover font size", default_value: 11, increment: 0.5});
form.colorPicker({name: "formHoverNumberFontColor", label: "Hover font color", default_value: "#FFFFFF"});
form.colorPicker({name: "formHoverNumberBGColor", label: "Hover background color", default_value: "#808080"});



# VERSION 2.0.0

tmp.colors <- formPalette
if (tmp.colors %in% c("Custom gradient", "Custom palette"))
{
    tmp.colors <- flipChartBasics::ChartColors(NA,
                        given.colors = formPalette,
                        custom.color = NULL,
                        custom.gradient.start = formCustomGradientStart,
                        custom.gradient.end = formCustomGradientEnd,
                        custom.palette = formCustomPalette, silent = TRUE)
    names(tmp.colors) <- NULL
} else if (tmp.colors == "Named colors")
{
    i <- 1
    color.names <- c()
    tmp.colors <- get0("formColors")
    if (!is.null(tmp.colors))
        tmp.colors <- flipTransformations::TextAsVector(tmp.colors)
    while (sum(nchar(get0(paste0("formColorName", i)))) > 0)
    {
        if (formColorInput == "Color pickers")
            tmp.colors <- c(tmp.colors, get0(paste0("formColor", i)))
        color.names <- c(color.names, flipU::TrimWhitespace(get0(paste0("formColorName", i))))
        i <- i + 1
    }
    if (any(duplicated(color.names)))
        stop("Names associated with colors cannot contain duplicates: '", 
             paste(color.names[which(duplicated(color.names))], collapse = "', '"), "'")
    names(tmp.colors) <- color.names
    tmp.colors <- c(tmp.colors, 'Unnamed values' = formColor0) 
}

font.family = "Open Sans"
font.color = "#444444"

template <- structure(list(colors = tmp.colors,
    global.font = list(family = formGlobalFontFamily, color = formGlobalFontColor, size = formGlobalFontSize, units = formGlobalFontUnits),
    fonts = list("Data labels" = list(family = formDataLabelFontFamily, color = formDataLabelFontColor, size = formDataLabelFontSize),
                 "Legend" = list(family = formLegendFontFamily, color = formLegendFontColor, size = formLegendFontSize),
                 "Title" = list(family = formTitleFontFamily, color = formTitleFontColor, size = formTitleFontSize),
                 "Subtitle" = list(family = formSubtitleFontFamily, color = formSubtitleFontColor, size = formSubtitleFontSize),
                 "Footer" = list(family = formFooterFontFamily, color = formFooterFontColor, size = formFooterFontSize),
                 "Panel title" = list(family = formPanelTitleFontFamily, color = formPanelTitleFontColor, size = formPanelTitleFontSize),
                 "Categories axis tick labels" = list(family = formCategoriesTickFontFamily, color = formCategoriesTickFontColor, size = formCategoriesTickFontSize),
                 "Categories axis title" = list(family = formCategoriesTitleFontFamily, color = formCategoriesTitleFontColor, size = formCategoriesTitleFontSize),
                 "Categories axis tick labels" = list(family = formCategoriesTickFontFamily, color = formCategoriesTickFontColor, size = formCategoriesTickFontSize),
                 "Values axis title" = list(family = formValuesTitleFontFamily, color = formValuesTitleFontColor, size = formValuesTitleFontSize),
                 "Values axis tick labels" = list(family = formValuesTickFontFamily, color = formValuesTickFontColor, size = formValuesTickFontSize),
                 "Hover text" = list(family = formHoverFontFamily, color = formHoverFontColor, size = formHoverFontSize)
                ),
    global.number.font = list(units = "pt"), 
    number.fonts = list(
        `Data label` = list(family = formDataLabelNumberFontFamily, color = formDataLabelNumberFontColor, size = formDataLabelNumberFontSize, weight = formDataLabelNumberFontWeight),
        `Gauge labels` = list(family = formGaugeFontFamily, color = formGaugeFontColor, size = formGaugeFontSize), 
        `Text above` = list(family = formTextAboveFontFamily, color = formTextAboveFontColor, size = formTextAboveFontSize, weight = formTextAboveFontWeight),
        `Text below` = list(family = formTextBelowFontFamily, color = formTextBelowFontColor, size = formTextBelowFontSize, weight = formTextBelowFontWeight),
        `Hover text` = list(family = formHoverNumberFontFamily, color = formHoverNumberFontColor, size = formHoverNumberFontSize, bg.color = formHoverNumberBGColor)
    )),        
class = "AppearanceTemplate")
Retrieved from ‘https://wiki.q-researchsoftware.com/index.php?title=Visualization_-_Template&oldid=64443’