Include Visualization JavaScript

From Q
Jump to navigation Jump to search

form.group("OUTPUT") // Chart type selector. // Separate words in chart types e.g. scatter plot not scatterplot var chartType = form.comboBox({name: "formChartType", label: "Chart type", alternatives: ["Area", "Column", "Donut", "Bar", "Bar Pictograph", "Bean", "Box", "Density", "Geographic Map", "Heat", "Histogram", "Line", "Palm", "Pie", "Radar", "Stream", "Scatter", "Time Series", "Venn", "Violin"], default_value: "Column", required: true}).getValue(); form.comboBox({name: "formChartOutput", label: "Show as", alternatives: ["Chart", "Table"], default_value: "Chart"}); // * Data types * // These should be as rich as possible. While we do not want duplicates, // the more informative we can make the inputs the better. var INPUTS_types = {}; INPUTS_types['Pasted'] = "Type or paste in data"; INPUTS_types['Table'] = "Link to a table in 'Pages'"; INPUTS_types["tables"] = "Link to multiple tables in 'Pages'"; INPUTS_types['r'] = "Use an existing R Output in 'Pages'"; INPUTS_types["variable"] = "Link to a variable in 'Data'"; INPUTS_types['variables'] = "Link to variables in 'Data'"; INPUTS_types["binaryMulti"] = "Variable Set: Binary - Multi"; INPUTS_types["numberMulti"] = "Variable Set: Number - Multi"; INPUTS_types["sets"] = "Link to variable sets in 'Data'"; INPUTS_types["set"] = "Link to a variable in 'Data'"; // Default axis names var categoriesAxisLabel = "CATEGORIES (X) AXIS"; var valuesAxisLabel = "VALUES (Y) AXIS"; function SwappedXY() { categoriesAxisLabel = "CATEGORIES (Y) AXIS"; valuesAxisLabel = "VALUES (X) AXIS"; } // * Combo box alternatives * categories_number_formats = values_number_formats = ["Automatic", "Number", "Category", "Percentage", "Date/Time", "Currency", "Metric units suffix", "Scientific", "Custom"]; hover_number_formats = ["Automatic", "Number", "Category", "Percentage", "Metric units suffix", "Scientific", "Custom"]; // no currency since cannot add as prefix and no date because of charting requirements data_label_formats = ["Automatic", "Number", "Percentage"]; date_formats = ["YY (Year, 2 digit)", "DD Mon YY", "DD Month YY", "DD MM YY", "YYYY (Year, 4 digit)", "DD Mon YYYY", "DD Month YYYY", "DD MM YYYY", "Mon DD YY", "Month DD YY", "MM DD YY", "Mon DD YYYY", "Month DD YYYY", "MM DD YYYY", "YY Mon DD", "YY Month DD", "YY MM DD", "YYYY Mon DD", "YYYY Month DD", "YYYY MM DD", "Custom"]; // * Font alternatives * font_families = ["Andale Mono", "Arial", "Arial Black", "Century Gothic", "Comic Sans MS", "Courier New", "Georgia", "Impact", "Open Sans", "Times New Roman", "Trebuchet MS", "Verdana"]; // *Controls linked to specific chart types* // - We uses lowercase camel to represent the input data controls. These are not the names of the actual controls. // - The input data controls for a specific chart type are store in 'input_data'. // - All other controls that modify the data are stored in 'INPUTS'. // - Other than for 'INPUTS', the name of an array of controls becomes the name of the group on the Charts tab. // - The names used to refer to individual controls in the arrays are the same as the names of the R parameters (where there is a one-to-one match) // Default controls (modified below for specific charts) APPEARANCE = null; GRIDLINES = null; DATA_SERIES = ['Colors']; DATA_LABELS = ['DataLabelShow', 'DataLabelDecimals', 'DataLabelFont', 'DataLabelPrefix', 'DataLabelSuffix']; TITLE = ['Title', 'Subtitle', 'Footer']; tidy = true; xLabel = 'Variable(s)'; yLabel = 'Groups'; INPUTS_data = ['Pasted', 'Table', 'r', 'variables']; CATEGORIES_AXIS = ['CategoriesTitle', 'CategoriesAxisShow', 'CategoriesTickFont', 'CategoriesTickAngle', 'CategoriesNumberFormat', 'LabelWrap','CategoriesSuffix', 'CategoriesPrefix']; VALUES_AXIS = ['ValuesTitle', 'ValuesAxisShow', 'ValuesTickFont', 'ValuesNumberFormat']; HOVER = ['HoverNumberFormat']; LEGEND = ['LegendShow', 'LegendFont', 'LegendPosition']; INPUTS = ['x', 'y', "AsPercentages", "FirstAggregate"]; FONT = ['GlobalFontFamily', 'GlobalFontColor']; function AddMargins() { MARGINS = ['MarginTop', 'MarginLeft', 'MarginBottom', 'MarginRight'];} if (chartType == "Venn") { FONT = null; DATA_SERIES = null; TITLE = null; CATEGORIES_AXIS = null; VALUES_AXIS = null; LEGEND = null; INPUTS_data = ["binaryMulti", 'r', 'Pasted', 'Table', 'variables']; INPUTS = ["AsPercentages"]; tidy = false; DATA_LABELS = ["DataLabelFontSize"]; hover_number_formats = ["Automatic", "Number"]; } else if (chartType == "Stream") { DATA_LABELS = null; TITLE = null; LEGEND = null; CATEGORIES_AXIS = ['CategoriesNumberFormat'] // Additional controls are defined below VALUES_AXIS = ['ValuesNumberTicks', 'ValuesAxisShow', 'ValuesNumberFormat']; categories_number_formats = ["Automatic", "Number", "Date/Time", "Scientific", "Custom"]; values_number_formats = ["Automatic", "Number", "Scientific", "Custom"]; hover_number_formats = ["Automatic", "Number"]; AddMargins(); }else if (chartType == "Pie" || chartType == "Donut") { var radiusLabel = "Donut hole radius %"; if (chartType == "Pie") radiusLabel = "Radius of pie groupings % (multi-column tables only)"; VALUES_AXIS = null; HOVER = null; TITLE = ['Title']; DATA_SERIES.push('SubsliceColors'); DATA_LABELS = ["DataLabelFormat", "DataLabelFont", "DataLabelPrefix", "DataLabelSuffix"]; APPEARANCE = ["PieRadius"]; } else if (chartType == "Radar") { categoriesAxisLabel = "Angular axis"; valuesAxisLabel = "Radial axis"; CATEGORIES_AXIS = ['CategoriesAxisShow', 'CategoriesTickFont', 'CategoriesTickAngle', 'LabelWrap']; VALUES_AXIS = ['ValuesAxisShow', 'ValuesTickFont', 'ValuesNumberFormat']; hover_number_formats = ["Automatic", "Number", "Percentage"]; DATA_LABELS = ['DataLabelShow', 'DataLabelFormat', 'DataLabelFont', 'DataLabelPrefix', 'DataLabelSuffix']; } else if (chartType == "Palm") { FONT = ['GlobalFontFamily']; CATEGORIES_AXIS = ['CategoriesTitle', 'CategoriesTickFont']; VALUES_AXIS = ['ValuesTitle', 'ValuesAxisShow', 'ValuesTickFont', 'ValuesNumberFormat', 'ValuesSuffix', 'ValuesPrefix']; values_number_formats = ["Automatic", "Number", "Percentage", "Currency"]; DATA_LABELS = null; LEGEND = ['LegendFont']; TITLE = null; HOVER = null; } else if (chartType == "Time Series") { INPUTS_data = ['Pasted', 'Table']; INPUTS = ['x', 'y']; DATA_LABELS = null; TITLE = ['Title']; LEGEND = null; HOVER = null; CATEGORIES_AXIS = ['CategoriesTitle', 'CategoriesTickFont']; VALUES_AXIS = ['ValuesTitle', 'ValuesTickFont']; APPEARANCE = ["WindowStart"]; } else if (chartType == "Geographic Map") { } else if (chartType == "Heat") { // TODO add controls for Heat } else if (chartType == "Scatter") { INPUTS_data = ['Pasted', 'Table', 'tables', 'r', 'variables']; INPUTS = ['x', 'y', 'ScatterSizes', 'ScatterColors', 'ScatterLabels']; categoriesAxisLabel = "X AXIS"; valuesAxisLabel = "Y AXIS"; xLabel = 'X coordinates'; yLabel = 'Y coordinates'; FITLINE = null; HOVER = null; VALUES_AXIS = ['ValuesTitle', 'ValuesAxisShow', 'ValuesTickFont', 'ValuesNumberFormat', 'ValuesSuffix', 'ValuesPrefix']; APPEARANCE = ['dummy']; DATA_LABELS = null; // this is overridden if LabeledScatter var isLabeled = false; //isLabeled is set in the DATA MANIPULATION tab, as is DATA_LABELS and APPEARANCE } else if (["Column", "Bar", "Area", "Line"]. indexOf(chartType) != -1) { if (chartType.indexOf("Bar") != -1) SwappedXY(); if (chartType != "Line") APPEARANCE = ['Stacked']; FITLINE = ['FitLine']; GRIDLINES = ['ShowGrid']; DATA_LABELS = ['DataLabelShow', 'DataLabelFormat', 'DataLabelFont', 'DataLabelPrefix', 'DataLabelSuffix']; } else if (["Box", "Bean", "Density", "Histogram", "Violin"]. indexOf(chartType) != -1) { INPUTS_data = ['Pasted', 'Table', 'r', 'variables', "sets"]; INPUTS = ['x', 'y']; APPEARANCE = ['DensityColor']; xLabel = 'Variable(s)'; DATA_SERIES = null; DATA_LABELS = null; LEGEND = null; CATEGORIES_AXIS = ['CategoriesTickFont', 'LabelWrap']; TITLE = ['Title']; vertical = ['Violin', 'Box'].indexOf(chartType) > -1; APPEARANCE.push('boxVertical'); if (chartType == 'Violin') APPEARANCE.push('ShowMean') else if (chartType == 'Bean') APPEARANCE.push('ValuesColor') else (chartType != 'Bean') APPEARANCE.push('ShowValues', 'ValuesColor') GRIDLINES = ['ShowGrid']; AddMargins(); } else if (chartType == "Bar Pictograph") { INPUTS = ['x', 'AsPercentages', 'FirstAggregate']; // only accepts 1-d tables CATEGORIES_AXIS = ['CategoriesAxisShow', 'CategoriesTickFont', 'CategoriesTickHorizAlign']; DATA_LABELS = ['DataLabelFont', 'DataLabelFormat', 'DataLabelPrefix', 'DataLabelSuffix', 'DataLabelPosition']; APPEARANCE = ['Icon', 'FillDirection', 'IconPadding']; VALUES_AXIS = null; HOVER = null; LEGEND = null; TITLE = null; FONT = ['GlobalFontFamily', 'GlobalFontColor']; } else throw "Unknown chart type"; //// Creating the controls //// Data Selector. // Creating an array of the the data input controls var data_INPUTS_alternatives = new Array(INPUTS_data.length); var i = 0; for(var i = 0; i < INPUTS_data.length; i++) data_INPUTS_alternatives[i] = INPUTS_types[INPUTS_data[i]]; // Creating the data inputs. form.group("DATA") var dtype = form.comboBox({name: "formDataSource", label: "Data source", alternatives: data_INPUTS_alternatives, required: true, prompt: "The location of the data to be used in the chart."}).getValue(); if (dtype == INPUTS_types['Table']) form.dropBox({name: "formTable", label: 'Table', types: ['Table', "RItem:integer,numeric,matrix,array,data.frame,table"], required: true, prompt: "Typically, a table contains data that has already been summarized (e.g., aggregated). Tables are stored in the Pages tree (top-left)."}); else if (dtype == INPUTS_types["tables"]) { form.dropBox({name: "formTables", label: "Tables", types: ['Table', "RItem:integer,numeric,matrix,array,data.frame,table"], required: true, multi: true, min_inputs: 2}); if (chartType == "Scatter") { isLabeled = true; APPEARANCE.push('ScatterTrendLine'); } } else if (dtype == INPUTS_types['r']) { form.dropBox({name: "formOther", label: "R Output", types: ["RItem:integer,numeric,matrix,array,table,list"], required: true}); } var aggregate = false; if (dtype == INPUTS_types['Pasted']) { form.dataEntry({name: "formPastedData", prompt: "Opens a spreadsheet into which you can enter data."}) //"Press the 'Edit' button below to add in the data." } else if (dtype == INPUTS_types["sets"] || dtype == INPUTS_types["set"]) { form.dropBox({label: "Variable set", name: "formX", types:["Questions"], prompt: "Variable sets are shown as groups of variables in the 'Data' tree (bottom-left). 'Binary - Multi' variable sets are represented by a column of checkboxes.", multi: dtype == INPUTS_types["sets"]}); } else if (dtype == INPUTS_types["binaryMulti"]) { form.dropBox({label: "Variable set", name: "formX", types:["Questions: PickAny"], prompt: "Variable sets are shown as groups of variables in the 'Data' tree (bottom-left). 'Binary - Multi' variable sets are represented by a column of checkboxes."}); } else if (dtype == INPUTS_types['variable']) { form.dropBox({label: "Variable", name: "formX", types:['variable'], prompt: "Variable shown in the 'Data' tree (bottom-left).", multi: false, required: true}).getValue(); } else if (dtype == INPUTS_types['variables']) { if (INPUTS.indexOf('ScatterLabels') > -1) var VLabels = form.dropBox({label: "Labels", name: "formScatterLabels", types:['variables'], prompt: "Variables are shown in the 'Data' tree (bottom-left).", multi: false, required: false}); if (INPUTS.indexOf('x') > -1) var varX = form.dropBox({label: xLabel, name: "formX", types:['variables'], prompt: "Variables are shown in the 'Data' tree (bottom-left).", multi: chartType != "Scatter", required: false}); if (INPUTS.indexOf('y')> -1 && (chartType == "Scatter" || (varX != null))) form.dropBox({label: yLabel, name: "formY", types:['variable'], prompt: "Variables are shown in the 'Data' tree (bottom-left).", multi: false, required: false}); if (INPUTS.indexOf('ScatterSizes')> -1) var VSizes = form.dropBox({label: "Sizes", name: "formZ", types:['variables'], prompt: "Variables are shown in the 'Data' tree (bottom-left).", multi: false, required: false}); if (INPUTS.indexOf('ScatterColors')> -1) var VColors = form.dropBox({label: "Colors", name: "formZ2", types:['variables'], prompt: "Variables are shown in the 'Data' tree (bottom-left).", multi: false, required: false}); } form.group("DATA MANIPULATION"); if (INPUTS.indexOf("FirstAggregate") > 0) aggregate = form.checkBox({label: "Aggregate the data prior to plotting", name: "formFirstAggregate", default_value: [INPUTS_types['Pasted'],INPUTS_types['Table'], INPUTS_types['tables'], INPUTS_types['r']].indexOf(dtype) == -1, prompt: "The data is 'raw', where each row represents an individual case. It needs to be aggregated prior to plotting."}).getValue(); if (aggregate && dtype == INPUTS_types['Pasted']) { form.checkBox({label: "First row contains column names", name: "formPastedColumnNames", default_value: true}); form.checkBox({label: "First column contains row names", name: "formPastedRowNames", default_value: false}); form.checkBox({label: "Factor variables", name: "formPastedFactor", default_value: true}); form.checkBox({label: "US date convention (mm/dd/yyyy)", name: "formPastedDateConvention", default_value: true}); } if (tidy) form.checkBox({label: "Automatically tidy the data", name: "formTidy", default_value: true, prompt: "Automaticaly tidy the data."}); if (chartType != 'Donut') // && chartType != "Scatter") form.checkBox({name: "formTranspose", label: "Switch rows and columns"}); // Creating other Input controls on the Inputs page. if (INPUTS != null) { form.textBox({label: "Rows to ignore", type: "text", default_value: "NET, Total, SUM", name: "formIgnoreRows", required: false}); form.textBox({label: "Columns to ignore", type: "text", default_value: "NET, Total, SUM", name: "formIgnoreColumns", required: false}); if (INPUTS.indexOf('AsPercentages') > -1) form.checkBox({name: "formAsPercentages", label: "Show as percentages"}); if (chartType == 'Scatter') { // Scatter is always labeled in INPUTS_types['tables'] // For other input types we need to check if ((dtype != INPUTS_types['tables'] && dtype != INPUTS_types['variables']) || (dtype == INPUTS_types['variables'] && VLabels.getValue() != null)) isLabeled = !(form.checkBox({name: "formScatterLabelsAsHover", label: "Show labels on hover only", default_value: true, required: true}).getValue()); if (isLabeled) { APPEARANCE.push('ScatterMaxLab'); categories_number_formats = ["Automatic", "Number", "Currency"]; values_number_formats = ["Automatic", "Number", "Currency"]; data_label_formats = ["Automatic", "Number", "Currency"] DATA_LABELS = ['DataLabelFormat', 'DataLabelFont', 'DataLabelPrefix', 'DataLabelSuffix']; } if (!isLabeled && ((dtype != INPUTS_types['tables'] && dtype != INPUTS_types['variables']) || (dtype == INPUTS_types['variables'] && VSizes.getValue() != null))) APPEARANCE.push('ScatterSizeType'); if ((dtype != INPUTS_types['tables'] && dtype != INPUTS_types['variables']) || (dtype == INPUTS_types['variables'] && VColors.getValue() != null)) APPEARANCE.push('ScatterColorType'); if (!isLabeled) FITLINE = ['FitLine']; if (APPEARANCE.length == 1) APPEARANCE = null; } } if (dtype == INPUTS_types['variables']) form.checkBox({label: "Variable names", name:"formNames", default_value: false}); //// Creating controls on the Chart page form.page('Chart'); if (APPEARANCE != null) { var isStacked = false; form.group('APPEARANCE'); if (APPEARANCE.indexOf("Icon") > -1) { var custom_icon_label = "(Custom icon)"; var picto_icon = form.comboBox({name: "formIcon", label: "Icon", alternatives: [ custom_icon_label, "Apple","Baby", "Beer", "Bread","Cake", "Car", "Circle", "Cross", "Elephant", "Gun", "Heart", "House", "Money", "Soldier", "Square", "Star", "Sick person", "Stick man", "Stick woman", "Thumbs up", "Thumbs down", "Tick", "Truck", "User", "Water drop", "Weight", "Wine"], default_value: "Stick man"}).getValue(); if (picto_icon == custom_icon_label) { form.textBox({name: "formCustomIcon", label: "Icon URL", type: "text", required: true}); var customBase = form.textBox({name: "custombaseurl", label: "Base icon URL", type: "text", required: false, prompt: "Leave blank to hide unfilled icons"}).getValue(); } form.textBox({name: "formIconScale", label: "Units per icon (scale)", type: "number", required: false, prompt: "Leave blank to determine based on range of Input data"}); form.textBox({name: "formTotalIcons", label: "Total icons", type: "number", required: false, prompt: "Leave blank to determine from Input data"}); var ncolOpt = form.textBox({name:"formIconNCol", label: "Maximum icons per row", type: "number", prompt: "Leave blank for all icons to be placed in a single row", required: false}).getValue(); form.comboBox({name:"formFillDirection", label: "Direction of fill", alternatives: ["From left", "From right"], default_value: "From left"}); if (picto_icon != custom_icon_label) { var baseOpt = form.checkBox({name: "formHideBase", label: "Hide base image", default_value: true}).getValue(); if (!baseOpt) form.colorPicker({name: "formBaseColor", label: "Icon base color",default_value: "#CCCCCC"}); var labColAsIcon = form.checkBox({name: "formLabelColorAsIcon", label: "Labels colored as icons"}).getValue(); if (ncolOpt != "" && baseOpt) form.checkBox({name:"formFixNRows", label:"Fixed number of rows per bar", default_value: true}); } if (ncolOpt != "" && picto_icon == custom_icon_label && !customBase) form.checkBox({name:"formFixNRows", label:"Fixed number of rows per bar", default_value: true}); form.numericUpDown({name: "formIconPadding", label: "Space between bars", minimum: 0, default_value: 2, increment:1}); } if (APPEARANCE.indexOf("Stacked") > -1) isStacked = form.checkBox({label: "Stack series", name: "formStackSeries", default_value: false}).getValue(); if (APPEARANCE.indexOf("PieRadius") > -1) form.numericUpDown({name: "formPieRadius", label: radiusLabel, default_value: 70, increment: 1, minimum: 0, maximum: 100}); if (APPEARANCE.indexOf("ScatterMaxLab") > -1) form.numericUpDown({name: "formScatterMaxLab", label: "Maximum data labels (left of column 1) to plot", default_value: 50, maximum: 1000, minimum: 0}); if (APPEARANCE.indexOf("ScatterTrendLine") > -1) form.checkBox({label: "Show trend lines", name: "formTrendLines", default_value: false}); if (APPEARANCE.indexOf("ScatterSizeType") > -1) form.comboBox({label: "Treat sizes variable (column 3) as", name:"formScatterSizeType", alternatives:['Area', 'Diameter'], default_value:'Area'}); if (APPEARANCE.indexOf("ScatterColorType") > -1) form.comboBox({label: "Treat colors variable (column 4) as", name:"formScatterColorType", alternatives:['Categories', 'Numeric scale'], default_value:'Numeric scale'}); if (APPEARANCE.indexOf("DensityColor") > -1) form.colorPicker({name: "formDensityColor", label: "Color", default_value: "#5C9AD3"}); if (APPEARANCE.indexOf("boxVertical") > -1) { var v = form.checkBox({name: "formVertical", label: "Plot vertically", default_value: vertical}); if (!v.getValue()) SwappedXY(); } if (APPEARANCE.indexOf("ShowValues") > -1) form.checkBox({name: "formShowValues", label: "Plot the individual data values", default_value: false}); if (APPEARANCE.indexOf("ValuesColor") > - 1) form.colorPicker({name: "formValuesColor", label: "Data value color", default_value: "#5C9AD3"}); if (APPEARANCE.indexOf("ShowMean") > -1) { var c = form.checkBox({name: "formShowMean", label: "Plot the mean value", default_value: true}); if (c.getValue()) form.colorPicker({name: "formMeanColor", label: "Color of the mean dot", default_value: "#ffffff"}); c = form.checkBox({name: "formShowMedian", label: "Plot the median", default_value: true}); if (c.getValue()) form.colorPicker({name: "formMedianColor", label: "Color of the median line", default_value: "#000000"}); c = form.checkBox({name: "formShowQuartiles", label: "Plot the quartiles", default_value: true}); if (c.getValue()) form.colorPicker({name: "formQuartilesColor", label: "Color of the quartiles box", default_value: "#000000"}); c = form.checkBox({name: "formShowRange", label: "Plot the range", default_value: true}); if (c.getValue()) form.colorPicker({name: "formRangeColor", label: "Color of the range line", default_value: "#000000"}); } if (chartType == "Box") form.comboBox({name: "formBoxPoints", label: "Box points", alternatives: ["All", "Outliers", "Suspected outliers"], default_value: "Suspected outliers", required: true}); if (chartType == "Histogram") { form.checkBox({name: "formHistogramCumulative", label: "Cumulative histogram", default_value: false}); form.checkBox({name: "formHistogramCounts", label: "Show counts", default_value: false}); var c = form.checkBox({name: "formAutomaticBinning", label: "Automatic column widths (bins)", default_value: true}); if (!c.getValue()) form.numericUpDown({name: "formMaximumBins", label: "Maximum columns (bins)", default_value: 20}); } if (APPEARANCE.indexOf("WindowStart") > -1) form.numericUpDown({name: "formWindowStart", label: "Range window start (days from data end)", default_value: 30}); } if (DATA_SERIES != null && !(chartType == "Bar Pictograph" && picto_icon == custom_icon_label)) { form.group("DATA SERIES"); if (DATA_SERIES.indexOf('Colors') > -1) { var colOpt = form.comboBox({name: "formPalette", label: "Color palette", alternatives: ["Default colors", "Primary colors", "Rainbow", "Light pastels", "Strong colors", "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 (red, yellow, white)", "Terrain colors (green, beige, grey)", "Custom color", "Custom gradient", "Custom palette"], default_value: "Default colors", required: true}); if (colOpt.getValue() == "Custom color") form.colorPicker({name: "formCustomColor", label: "Custom color", default_value: "#5C9AD3"}); if (colOpt.getValue() == "Custom gradient") { form.colorPicker({name: "formCustomGradientStart", label: "Gradient start", default_value: "#5C9AD3"}); form.colorPicker({name: "formCustomGradientEnd", label: "Gradient end", default_value: "#ED7D31"}); } if (colOpt.getValue() == "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."}); } if (DATA_SERIES.indexOf('SubsliceColors') > -1) { var colOpt = form.comboBox({name: "formSubslicePalette", label: "Outer ring color palette", alternatives: ["Group colors", "Default colors", "Primary colors", "Rainbow", "Light pastels", "Strong colors", "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 (red, yellow, white)", "Terrain colors (green, beige, grey)", "Custom color", "Custom gradient", "Custom palette"], default_value: "Group colors", required: true}); if (colOpt.getValue() == "Custom color") form.colorPicker({name: "formSubsliceCustomColor", label: "Custom color", default_value: "#5C9AD3"}); if (colOpt.getValue() == "Custom gradient") { form.colorPicker({name: "formSubsliceCustomGradientStart", label: "Gradient start", default_value: "#5C9AD3"}); form.colorPicker({name: "formSubsliceCustomGradientEnd", label: "Gradient end", default_value: "#ED7D31"}); } if (colOpt.getValue() == "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."}); } } if (typeof FITLINE != 'undefined' && FITLINE != null && !isStacked) { form.group("TREND LINES"); if (FITLINE.indexOf('FitLine') > -1) { var fitOpt = form.comboBox({name: "formFit", label: "Show line of best fit", alternatives: ["None", "Linear", "Smooth"], default_value: "None"}); if (fitOpt.getValue() != "None") { form.checkBox({name: "formFitIgnoreLast", label: "Ignore last data point", default_value: false}); form.comboBox({name: "formFitLineType", label: "Line type", alternatives: ["dot", "dash", "longdash", "dashdot", "solid"], default_value:"dot"}); form.numericUpDown({name: "formFitLineWidth", label: "Line width", default_value: 1, minimum: 1, maximum: 20}); var fitcolOpt = form.comboBox({name: "formFitPalette", label: "Fit line color palette", alternatives: ["Group colors", "Default colors", "Primary colors", "Rainbow", "Light pastels", "Strong colors", "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 (red, yellow, white)", "Terrain colors (green, beige, grey)", "Custom color", "Custom gradient", "Custom palette"], default_value: "Group colors", required: true}); if (fitcolOpt.getValue() == "Custom color") form.colorPicker({name: "formFitCustomColor", label: "Custom color of fit line", default_value: "#5C9AD3"}) if (fitcolOpt.getValue() == "Custom gradient") { form.colorPicker({name: "formFitCustomGradientStart", label: "Gradient start of fit lines", default_value: "#5C9AD3"}); form.colorPicker({name: "formFitCustomGradientEnd", label: "Gradient end of fit lines", default_value: "#ED7D31"}); } if (fitcolOpt.getValue() == "Custom palette") form.textBox({name: "formFitCustomPalette", label: "Custom palette of fit lines", default_value: "#5C9AD3, #ED7D31", prompt: "Enter color as a string. Multiple values should be separated by commas."}); } } } if (FONT != null) { form.group("FONT"); if (FONT.indexOf('GlobalFontFamily') > -1) var globalFontFamily = form.comboBox({name: "formFont", label: "Global font family", alternatives: font_families, default_value: "Arial"}).getValue(); if (FONT.indexOf('GlobalFontColor') > -1 && !(chartType == "Bar Pictograph" && labColAsIcon)) var globalFontColor = form.colorPicker({name: "formFontColor", label: "Global font color", default_value: "#2C2C2C"}).getValue(); } if (DATA_LABELS != null) { form.group("DATA LABELS"); var datalabshow = true; if (DATA_LABELS.indexOf('DataLabelPosition') > -1) { var dLabOpt = form.comboBox({name:"formDataLabelPosition", label: "Show data label", alternatives: ["No", "Next to bar", "Below row label", "Above row label", "Below icons", "Above icons"], default_value: "Next to bar"}).getValue(); if (dLabOpt == "No") datalabshow = false; if (dLabOpt == "Below icons" || dLabOpt == "Above icons") form.comboBox({name:"formDataLabelHorizAlign", label:" Data label horizontal alignment", alternatives: ["Default", "Left", "Center", "Right"], default_value: "Default"}); } if (DATA_LABELS.indexOf('DataLabelShow') > -1) datalabshow = form.checkBox({name: "formDataLabelShow", label: "Show data labels", default_value: false}).getValue(); if (datalabshow && DATA_LABELS.indexOf('DataLabelFont') > -1) { form.comboBox({name: "formDataLabelFontFamily", label: "Data label font family", alternatives: font_families, default_value: globalFontFamily}); if (!(chartType == "Bar Pictograph" && labColAsIcon)) form.colorPicker({name: "formDataLabelFontColor", label: "Data label font color", default_value: globalFontColor}); form.numericUpDown({name: "formDataLabelFontSize", label: "Data label font size", default_value: 10}); } if (chartType == "Venn" && DATA_LABELS.indexOf('DataLabelFontSize') > -1) form.numericUpDown({name: "formDataLabelFontSize", label: "Data label font size", default_value: 10}); if (datalabshow && DATA_LABELS.indexOf('DataLabelFormat') > -1) var dataLabelFormat = form.comboBox({name: "formDataLabelNumberType", label: "Number type", alternatives: data_label_formats, default_value: categories_number_formats[0], required: true}).getValue(); if (datalabshow && (DATA_LABELS.indexOf('DataLabelDecimals') > -1 || (DATA_LABELS.indexOf('DataLabelFormat') > -1 && dataLabelFormat != "Automatic"))) form.numericUpDown({name: "formDataLabelDecimals", label: "Decimal places", default_value: 2, increment: 1, minimum: 0, maximum: 12}); if (datalabshow && DATA_LABELS.indexOf('DataLabelPrefix') > -1) form.textBox({name:'formPrefix', label: 'Custom prefix', required: false}); if (datalabshow && DATA_LABELS.indexOf('DataLabelSuffix') > -1) form.textBox({name:'formSuffix', label: 'Custom suffix', required: false}); if (DATA_LABELS.indexOf('data.label.max.plot') > -1) form.numericUpDown({name: "formMaxLab", label: "Maximum data labels to plot", default_value: 50, maximum: 200, minimum: 0}); } if (GRIDLINES != null) { form.group("GRID LINES"); if (GRIDLINES.indexOf('ShowGrid') > -1) form.checkBox({name: "formShowGrid", label: "Show grid lines", default_value: true}); } if (LEGEND != null) { form.group("LEGEND"); var hasleg = 1; if (LEGEND.indexOf('LegendShow') > -1) hasleg = form.checkBox({name: "formLegendShow", label: "Show legend (if applicable)", default_value: true}).getValue(); if (hasleg && LEGEND.indexOf('LegendFont') > -1) { form.comboBox({name: "formLegendFontFamily", label: "Legend font family", alternatives: font_families, default_value: globalFontFamily}); if (chartType != "Palm") form.colorPicker({name: "formLegendFontColor", label: "Legend font color", default_value: globalFontColor}); form.numericUpDown({name: "formLegendFontSize", label: "Legend font size", default_value: 10}); } if (hasleg && LEGEND.indexOf('LegendPosition') > -1) { form.numericUpDown({name: "formLegendXPos", label: "Horizontal placement", default_value: 1.02, increment: 0.02, minimum: -2, maximum: 3, prompt: "Choose numeric value between -2 (far left) to 3 (far right)"}); form.numericUpDown({name: "formLegendYPos", label: "Vertical placement", default_value: 1.00, increment: 0.02, minimum: -2, maximum: 3, prompt: "Choose numeric value between -2 (below) and 3 (above)"}); } } if (TITLE != null) { form.group('Title'); if (TITLE.indexOf('Title') > -1) { titleOpt = form.textBox({name:"formTitle", label:"Title", required:false}); if (typeof titleOpt != "undefined" && titleOpt.getValue() != "") { form.comboBox({name: "formTitleFontFamily", label: "Title font family", alternatives: font_families, default_value: globalFontFamily}); form.colorPicker({name: "formTitleFontColor", label: "Title font color", default_value: globalFontColor}); form.numericUpDown({name:"formTitleFontSize", label:"Title font size", default_value: 16}); } } if (TITLE.indexOf('Subtitle') > -1) { subtitleOpt = form.textBox({name:"formSubtitle", label:"Subtitle", required:false}); if (typeof subtitleOpt != "undefined" && subtitleOpt.getValue() != "") { form.comboBox({name: "formSubtitleFontFamily", label: "Subtitle font family", alternatives: font_families, default_value: globalFontFamily}); form.colorPicker({name: "formSubtitleFontColor", label: "Subtitle font color", default_value: globalFontColor}); form.numericUpDown({name:"formSubtitleFontSize", label:"Subtitle font size", default_value: 12}); } } if (TITLE.indexOf('Footer') > -1) { footerOpt = form.textBox({name:"formFooter", label:"Footer", required:false}); if (chartType == "Scatter" || (typeof footerOpt != "undefined" && footerOpt.getValue() != "")) { form.comboBox({name: "formFooterFontFamily", label: "Footer font family", alternatives: font_families, default_value: globalFontFamily}); form.colorPicker({name: "formFooterFontColor", label: "Footer font color", default_value: globalFontColor}); form.numericUpDown({name:"formFooterFontSize", label:"Footer font size", default_value: 8}); var footerWrapOpt = form.checkBox({name: "formFooterWrap", label: "Wrap footer", default_value: true}); if (footerWrapOpt.getValue()) form.numericUpDown({name: "formFooterWrapNchar", label: "Footer line width", default_value: 150, minimum: 5, increment: 5, maximum: 5000}); } } } if (CATEGORIES_AXIS != null) { form.group(categoriesAxisLabel); if (CATEGORIES_AXIS.indexOf('CategoriesTitle') > -1) { form.textBox({name: "formCategoriesTitle", label: "Axis title", required: false}); form.comboBox({name: "formCategoriesTitleFontFamily", label: "Axis title font family", alternatives: font_families, default_value: globalFontFamily}); if (chartType != "Palm") form.colorPicker({name: "formCategoriesTitleFontColor", label: "Axis title font color", default_value: globalFontColor}); form.numericUpDown({name: "formCategoriesTitleFontSize", label: "Axis title font size", default_value: 12}); } var showX = true; var labelShowX = "Show axis"; if (chartType == "Bar Pictograph") labelShowX = "Show row labels"; if (CATEGORIES_AXIS.indexOf('CategoriesAxisShow') > -1) showX = form.checkBox({name: "formCategoriesAxisShow", label: labelShowX, default_value: true}).getValue(); if (showX) { if (CATEGORIES_AXIS.indexOf('CategoriesNumberFormat') > -1) { var xNumberType = form.comboBox({name: "formCategoriesNumberType", label: "Number type", alternatives: categories_number_formats, default_value: categories_number_formats[0], required: true}).getValue(); if (xNumberType == "Date/Time") xNumberType = form.comboBox({name: "formCategoriesDateType", label: "Date type", alternatives: date_formats, default_value: date_formats[0], required: true}).getValue(); if (xNumberType == "Custom") form.textBox({name: "formCategoriesNumberCustom", label: "Custom code", default_value: "%d %b %y", required: true}); if (xNumberType == 'Currency') form.textBox({name: "formCategoriesCurrency", label: "Currency symbol", default_value: "", required: true}); if (xNumberType == 'Number' || xNumberType == 'Currency') form.checkBox({name: "formCategoriesSeparateThousands", label: "Separate thousands by comma", default: true}); if (xNumberType == 'Number' || xNumberType == 'Percentage' || xNumberType == 'Scientific' || xNumberType == 'Currency') form.numericUpDown({name:"formCategoriesDecimals", label:"Decimal places", default_value: 2}); if (xNumberType == 'Metric units suffix') form.numericUpDown({name:"formCategoriesDecimals", label:"Significant digits", default_value: 2, minimum: 1}); if (CATEGORIES_AXIS.indexOf('CategoriesPrefix') > -1) form.textBox({name: "formCategoriesPrefix", label: "Custom prefix", default_value: "", required: false}); if (CATEGORIES_AXIS.indexOf('CategoriesSuffix') > -1) form.textBox({name: "formCategoriesSuffix", label: "Custom suffix", default_value: "", required: false}); } if (CATEGORIES_AXIS.indexOf('CategoriesTickInterval') > -1) form.numericUpDown({name: "formCategoriesTickInterval", label: "Tick interval", default_value: 1, increment: 1, minimum: 1, maximum: 1000}); if (CATEGORIES_AXIS.indexOf('CategoriesTickFont') > -1) { form.comboBox({name: "formCategoriesTickFontFamily", label: "Axis label font family", alternatives: font_families, default_value: globalFontFamily}); if (chartType != "Palm" && !(chartType == "Bar Pictograph" && labColAsIcon)) form.colorPicker({name: "formCategoriesTickFontColor", label: "Axis label font color", default_value: globalFontColor}); form.numericUpDown({name: "formCategoriesTickFontSize", label: "Axis label font size", default_value: 10}); } if (CATEGORIES_AXIS.indexOf('CategoriesTickHorizAlign')) form.comboBox({name:"formCategoriesTickHorizAlign", label: "Horizontal alignment", alternatives: ["Default", "Left", "Center", "Right"], default_value: "Default"}); if (CATEGORIES_AXIS.indexOf('CategoriesTickAngle') > -1) form.comboBox({name: "formCategoriesTickAngle", label: "Axis label orientation", alternatives: ["Automatic", "Horizontal", "Vertical", "Diagonal"], default_value: "Automatic"}); if (CATEGORIES_AXIS.indexOf('LabelWrap') > -1) { var xWrapOpt = form.checkBox({name: "formLabelWrap", label: "Wrap axis label", default_value: true}); if (xWrapOpt.getValue()) form.numericUpDown({name: "formLabelWrapNchar", label: "Axis label line width", default_value: 21, minimum: 5, increment: 5, maximum: 1000}); } } if (chartType == "Stream") { form.comboBox({name: "formCategoriesTickUnits", label: "Tick units", alternatives: ["Automatic", "Number", "Month", "Year"], default_value: "Automatic"}); form.numericUpDown({name: "formCategoriesTickInterval", label: "Tick distance", default_value: 3, minimum: 1, increment: 1, maximum: 1000}); } } if (VALUES_AXIS != null) { form.group(valuesAxisLabel); if (VALUES_AXIS.indexOf('ValuesTitle') > -1) { form.textBox({name: "formValuesTitle", label: "Axis title", required: false}); form.comboBox({name: "formValuesTitleFontFamily", label: "Axis title font family", alternatives: font_families, default_value: globalFontFamily}); if (chartType != "Palm") form.colorPicker({name: "formValuesTitleFontColor", label: "Axis title font color", default_value: globalFontColor}); form.numericUpDown({name: "formValuesTitleFontSize", label: "Axis title font size", default_value: 12}); } var showY = true; if (VALUES_AXIS.indexOf('ValuesAxisShow') > -1) showY = form.checkBox({name: "formValuesAxisShow", label: "Show axis", default_value: true}).getValue(); if (showY) { if (VALUES_AXIS.indexOf('ValuesNumberFormat') > -1) { var yNumberType = form.comboBox({name: "formValuesNumberType", label: "Number type", alternatives: values_number_formats, default_value: values_number_formats[0], required: true}).getValue(); if (yNumberType == "Date/Time") yNumberType = form.comboBox({name: "formValuesDateType", label: "Date type", alternatives: date_formats, default_value: date_formats[0], required: true}).getValue(); if (yNumberType == "Custom") form.textBox({name: "formValuesNumberCustom", label: "Custom code", default_value: "%d %b %y", required: true}); if (yNumberType == 'Currency') form.textBox({name: "formValuesCurrency", label: "Currency symbol", default_value: "", required: true}); if ((yNumberType == 'Number' || yNumberType == 'Currency') && chartType != "Palm") form.checkBox({name: "formValuesSeparateThousands", label: "Separate thousands by comma", default: true}); if (yNumberType == 'Number' || yNumberType == 'Percentage' || yNumberType == 'Scientific' || yNumberType == 'Currency') form.numericUpDown({name:"formValuesDecimals", label:"Decimal places", default_value: 2}); if (yNumberType == 'Metric units suffix') form.numericUpDown({name:"formValuesDecimals", label:"Significant digits", default_value: 2, minimum: 1}); if (VALUES_AXIS.indexOf('ValuesPrefix') > -1) form.textBox({name: "formValuesPrefix", label: "Custom prefix", default_value: "", required: false}); if (VALUES_AXIS.indexOf('ValuesSuffix') > -1) form.textBox({name: "formValuesSuffix", label: "Custom suffix", default_value: "", required: false}); } if (showY && VALUES_AXIS.indexOf('ValuesNumberTicks') > -1) //Weird parameter for Stream Graph form.numericUpDown({name: "formValuesNumberTicks", label: "Number of ticks", default_value: 5, increment: 1, minimum: 1, maximum: 1000}); if (showY && VALUES_AXIS.indexOf('ValuesTickFont') > -1) { form.comboBox({name: "formValuesTickFontFamily", label: "Axis label font family", alternatives: font_families, default_value: globalFontFamily}); if (chartType != "Palm") form.colorPicker({name: "formValuesTickFontColor", label: "Axis label font color", default_value: globalFontColor}); form.numericUpDown({name: "formValuesTickFontSize", label: "Axis label font size", default_value: 10}); } } } if (HOVER != null) { form.group("HOVER"); var showHover = true; if (HOVER.indexOf('HoverShow') > -1) showHover = form.checkBox({name: "formHoverShow", label: "Show hover text", default_value: true}); if (showHover) { if (HOVER.indexOf('HoverNumberFormat') > -1 && (chartType != "Venn" || dtype == INPUTS_types['binaryMulti'] || dtype == INPUTS_types['variables'])) // only show for Venn if raw data { var hoverNumberType = form.comboBox({name: "formHoverNumberType", label: "Number type", alternatives: hover_number_formats, default_value: hover_number_formats[0], required: true}).getValue(); if (hoverNumberType == "Date/Time") hoverNumberType = form.comboBox({name: "formHoverDateType", label: "Date type", alternatives: date_formats, default_value: date_formats[0], required: true}).getValue(); if (hoverNumberType == "Custom") form.textBox({name: "formHoverNumberCustom", label: "Custom code", default_value: "%d %b %y", required: true}); if (hoverNumberType == 'Number' && chartType != "Venn" && chartType != "Stream") form.checkBox({name: "formHoverSeparateThousands", label: "Separate thousands by comma", default: true}); if (hoverNumberType == 'Number' || hoverNumberType == 'Percentage' || hoverNumberType == 'Scientific') form.numericUpDown({name:"formHoverDecimals", label:"Decimal places", default_value: 2}); if (hoverNumberType == 'Metric units suffix') form.numericUpDown({name:"formHoverDecimals", label:"Significant digits", default_value: 2, minimum: 1}); } } } if (typeof MARGINS != 'undefined') { form.group("MARGINS"); if (MARGINS.indexOf('MarginTop') > -1) form.numericUpDown({name: "formMarginTop", label: "Top", default_value: 30, increment: 1, minimum: 0, maximum: 1000}); if (MARGINS.indexOf('MarginLeft') > -1) form.numericUpDown({name: "formMarginLeft", label: "Left", default_value: 80, increment: 1, minimum: 0, maximum: 1000}); if (MARGINS.indexOf('MarginBottom') > -1) form.numericUpDown({name: "formMarginBottom", label: "Bottom", default_value: 50, increment: 1, minimum: 0, maximum: 1000}); if (MARGINS.indexOf('MarginRight') > -1) form.numericUpDown({name: "formMarginRight", label: "Right", default_value: 40, increment: 1, minimum: 0, maximum: 1000}); }

Retrieved from ‘https://wiki.q-researchsoftware.com/index.php?title=Include_Visualization_JavaScript&oldid=32733’