This should be placed in the UI where the inputs should be shown, with an id
that matches the id used in the linePlotServer() and linePlotOutputUI() functions.
Details
The user inputs for this module are separated from the outputs to allow for more flexible UI design.
The inputs will automatically be organized into a grid layout via the organize_inputs() function,
with columns controlling the number of columns in the grid.
Defaults can be set for each input by providing a named list of values to the defaults argument.
Nearly all parameters for linePlot() can be set via these inputs, so see the help
for that function for an exhaustive list.
Plot parameters and defaults
The following linePlot() parameters can be accessed via UI inputs and/or the defaults argument:
x- X-axis variable(s) (UI: "Select X values", default: 1st column, multiple: TRUE)y- Y-axis variable(s) (UI: "Select Y values", default: 2nd column, multiple: TRUE)group.by- Grouping variable (UI: "Group by", default: 1st categorical variable)order.by- Order by Y values (UI: "Order by Y", default: FALSE)x.adjustment- X-axis adjustment function (UI: "X Adjustment", default: "")y.adjustment- Y-axis adjustment function (UI: "Y Adjustment", default: "")facet.by- Faceting variable (UI: "Facet by", default: "")facet.scales- Facet scale behavior (UI: "Facet scales", default: "fixed")plot.mode- Plot type (UI: "Plot type", default: "lines")line.type- Line type (UI: "Line type", default: "solid")palette.selection- Color palette (UI: palette picker, derived from palette)axis.showline- Show axis lines (UI: via .uniform_axes_inputs_ui, default: TRUE)axis.mirror- Mirror axis lines (UI: via .uniform_axes_inputs_ui, default: TRUE)axis.linecolor- Axis line color (UI: via .uniform_axes_inputs_ui, default: "black")axis.linewidth- Axis line width (UI: via .uniform_axes_inputs_ui, default: 0.5)axis.tickfont.size- Tick font size (UI: via .uniform_axes_inputs_ui, default: 12)axis.tickfont.color- Tick font color (UI: via .uniform_axes_inputs_ui, default: "black")axis.tickfont.family- Tick font family (UI: via .uniform_axes_inputs_ui, default: "Arial")axis.tickangle.x- X-axis tick angle (UI: via .uniform_axes_inputs_ui, default: 0)axis.tickangle.y- Y-axis tick angle (UI: via .uniform_axes_inputs_ui, default: 0)axis.ticks- Tick position (UI: via .uniform_axes_inputs_ui, default: "outside")axis.tickcolor- Tick color (UI: via .uniform_axes_inputs_ui, default: "black")axis.ticklen- Tick length (UI: via .uniform_axes_inputs_ui, default: 5)axis.tickwidth- Tick width (UI: via .uniform_axes_inputs_ui, default: 1)title.font.size- Title font size (UI: via .uniform_axes_inputs_ui, default: 28)title.font.family- Title font family (UI: "Font", default: "Arial")title.text.color- Title text color (UI: via .uniform_axes_inputs_ui, default: "#000000")x.title- X-axis title (auto-calculated from data)y.title- Y-axis title (auto-calculated from data)flip.x- Flip X-axis (UI: "Flip X", default: FALSE)flip.y- Flip Y-axis (UI: "Flip Y", default: FALSE)
Parameters controlling additional functionality
The following parameters implementing plotly-specific features are also available:
hline.intercepts- Horizontal line Y-intercepts (UI: via .uniform_lines_inputs_ui, default: "")hline.colors- Horizontal line colors (UI: via .uniform_lines_inputs_ui, default: "#000000")hline.widths- Horizontal line widths (UI: via .uniform_lines_inputs_ui, default: "1")hline.linetypes- Horizontal line types (UI: via .uniform_lines_inputs_ui, default: "dashed")hline.opacities- Horizontal line opacities (UI: via .uniform_lines_inputs_ui, default: "1")vline.intercepts- Vertical line X-intercepts (UI: via .uniform_lines_inputs_ui, default: "")vline.colors- Vertical line colors (UI: via .uniform_lines_inputs_ui, default: "#000000")vline.widths- Vertical line widths (UI: via .uniform_lines_inputs_ui, default: "1")vline.linetypes- Vertical line types (UI: via .uniform_lines_inputs_ui, default: "dashed")vline.opacities- Vertical line opacities (UI: via .uniform_lines_inputs_ui, default: "1")abline.slopes- Diagonal line slopes (UI: via .uniform_lines_inputs_ui, default: "")abline.intercepts- Diagonal line Y-intercepts (UI: via .uniform_lines_inputs_ui, default: "")abline.colors- Diagonal line colors (UI: via .uniform_lines_inputs_ui, default: "#000000")abline.widths- Diagonal line widths (UI: via .uniform_lines_inputs_ui, default: "1")abline.linetypes- Diagonal line types (UI: via .uniform_lines_inputs_ui, default: "dashed")abline.opacities- Diagonal line opacities (UI: via .uniform_lines_inputs_ui, default: "1")
Examples
library(VizModules)
data(mtcars)
linePlotInputsUI("linePlot", mtcars)
#> <div class="tabbable">
#> <ul class="nav nav-tabs shiny-tab-input" id="linePlot-linePlotTabsetPanel" data-tabsetid="3014">
#> <li class="active">
#> <a href="#tab-3014-1" data-toggle="tab" data-bs-toggle="tab" data-value="Data">Data</a>
#> </li>
#> <li>
#> <a href="#tab-3014-2" data-toggle="tab" data-bs-toggle="tab" data-value="Facet">Facet</a>
#> </li>
#> <li>
#> <a href="#tab-3014-3" data-toggle="tab" data-bs-toggle="tab" data-value="Aesthetics">Aesthetics</a>
#> </li>
#> <li>
#> <a href="#tab-3014-4" data-toggle="tab" data-bs-toggle="tab" data-value="Axes">Axes</a>
#> </li>
#> <li>
#> <a href="#tab-3014-5" data-toggle="tab" data-bs-toggle="tab" data-value="Lines">Lines</a>
#> </li>
#> </ul>
#> <div class="tab-content" data-tabsetid="3014">
#> <div class="tab-pane active" data-value="Data" id="tab-3014-1">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-x.value-label" for="linePlot-x.value">Select X values:</label>
#> <div>
#> <select id="linePlot-x.value" class="shiny-input-select" multiple="multiple"><option value="mpg" selected>mpg</option>
#> <option value="cyl">cyl</option>
#> <option value="disp">disp</option>
#> <option value="hp">hp</option>
#> <option value="drat">drat</option>
#> <option value="wt">wt</option>
#> <option value="qsec">qsec</option>
#> <option value="vs">vs</option>
#> <option value="am">am</option>
#> <option value="gear">gear</option>
#> <option value="carb">carb</option></select>
#> <script type="application/json" data-for="linePlot-x.value">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-y.value-label" for="linePlot-y.value">Select Y values:</label>
#> <div>
#> <select id="linePlot-y.value" class="shiny-input-select" multiple="multiple"><option value="mpg">mpg</option>
#> <option value="cyl" selected>cyl</option>
#> <option value="disp">disp</option>
#> <option value="hp">hp</option>
#> <option value="drat">drat</option>
#> <option value="wt">wt</option>
#> <option value="qsec">qsec</option>
#> <option value="vs">vs</option>
#> <option value="am">am</option>
#> <option value="gear">gear</option>
#> <option value="carb">carb</option></select>
#> <script type="application/json" data-for="linePlot-y.value">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-group.by-label" for="linePlot-group.by">Group by:</label>
#> <div>
#> <select id="linePlot-group.by" class="shiny-input-select"><option value="" selected></option></select>
#> <script type="application/json" data-for="linePlot-group.by">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="material-switch">
#> <label for="linePlot-order.by" style="padding-right: 10px;">Order by Y</label>
#> <input id="linePlot-order.by" type="checkbox"/>
#> <label class="switch label-success bg-success" for="linePlot-order.by"></label>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-x.adjustment-label" for="linePlot-x.adjustment">X Adjustment</label>
#> <div>
#> <select id="linePlot-x.adjustment" class="shiny-input-select"><option value="" selected></option>
#> <option value="log2">log2</option>
#> <option value="log">log</option>
#> <option value="log10">log10</option>
#> <option value="neg_log10">neg_log10</option>
#> <option value="log1p">log1p</option>
#> <option value="as.factor">as.factor</option>
#> <option value="abs">abs</option>
#> <option value="sqrt">sqrt</option></select>
#> <script type="application/json" data-for="linePlot-x.adjustment">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-y.adjustment-label" for="linePlot-y.adjustment">Y Adjustment</label>
#> <div>
#> <select id="linePlot-y.adjustment" class="shiny-input-select"><option value="" selected></option>
#> <option value="log2">log2</option>
#> <option value="log">log</option>
#> <option value="log10">log10</option>
#> <option value="neg_log10">neg_log10</option>
#> <option value="log1p">log1p</option>
#> <option value="as.factor">as.factor</option>
#> <option value="abs">abs</option>
#> <option value="sqrt">sqrt</option></select>
#> <script type="application/json" data-for="linePlot-y.adjustment">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Facet" id="tab-3014-2">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-facet.by-label" for="linePlot-facet.by">Facet by:</label>
#> <div>
#> <select id="linePlot-facet.by" class="shiny-input-select"><option value="" selected></option></select>
#> <script type="application/json" data-for="linePlot-facet.by">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-facet.scales-label" for="linePlot-facet.scales">Facet scales</label>
#> <div>
#> <select id="linePlot-facet.scales" class="shiny-input-select"><option value="fixed" selected>fixed</option>
#> <option value="free">free</option>
#> <option value="free_x">free_x</option>
#> <option value="free_y">free_y</option></select>
#> <script type="application/json" data-for="linePlot-facet.scales" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Aesthetics" id="tab-3014-3">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-plot.type-label" for="linePlot-plot.type">Plot type:</label>
#> <div>
#> <select id="linePlot-plot.type" class="shiny-input-select"><option value="lines" selected>lines</option>
#> <option value="markers">markers</option>
#> <option value="lines+markers">lines+markers</option></select>
#> <script type="application/json" data-for="linePlot-plot.type" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-line.type-label" for="linePlot-line.type">Line type:</label>
#> <div>
#> <select id="linePlot-line.type" class="shiny-input-select"><option value="solid" selected>solid</option>
#> <option value="dot">dot</option>
#> <option value="dash">dash</option>
#> <option value="longdash">longdash</option>
#> <option value="dashdot">dashdot</option>
#> <option value="longdashdot">longdashdot</option></select>
#> <script type="application/json" data-for="linePlot-line.type" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div id="linePlot-palette.selection" class="shiny-html-output"></div>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Axes" id="tab-3014-4">
#> <div class="row">
#> <div class="col-sm-6"></div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="material-switch">
#> <label for="linePlot-flip.x" style="padding-right: 10px;">Flip X Axis</label>
#> <input id="linePlot-flip.x" type="checkbox"/>
#> <label class="switch label-success bg-success" for="linePlot-flip.x"></label>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="material-switch">
#> <label for="linePlot-flip.y" style="padding-right: 10px;">Flip Y Axis</label>
#> <input id="linePlot-flip.y" type="checkbox"/>
#> <label class="switch label-success bg-success" for="linePlot-flip.y"></label>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-font.type-label" for="linePlot-font.type">Title Font</label>
#> <div>
#> <select id="linePlot-font.type" class="shiny-input-select"><option value="Arial" selected>Arial</option>
#> <option value="Balto">Balto</option>
#> <option value="Courier New">Courier New</option>
#> <option value="Droid Sans">Droid Sans</option>
#> <option value="Droid Serif">Droid Serif</option>
#> <option value="Droid Sans Mono">Droid Sans Mono</option>
#> <option value="Gravitas One">Gravitas One</option>
#> <option value="Old Standard TT">Old Standard TT</option>
#> <option value="Open Sans">Open Sans</option>
#> <option value="Overpass">Overpass</option>
#> <option value="PT Sans Narrow">PT Sans Narrow</option>
#> <option value="Raleway">Raleway</option>
#> <option value="Times New Roman">Times New Roman</option>
#> <option value="Verdana">Verdana</option>
#> <option value="sans-serif">sans-serif</option>
#> <option value="serif">serif</option>
#> <option value="monospace">monospace</option></select>
#> <script type="application/json" data-for="linePlot-font.type" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="linePlot-text.colour">Title Color</label>
#> <input id="linePlot-text.colour" type="text" class="form-control shiny-colour-input" data-init-value="#000000" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-axis.title.font.size-label" for="linePlot-axis.title.font.size">Axis Title Size</label>
#> <input id="linePlot-axis.title.font.size" type="number" class="shiny-input-number form-control" value="18" data-update-on="change" min="1" step="1"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="linePlot-axis.title.font.color">Axis Title Color</label>
#> <input id="linePlot-axis.title.font.color" type="text" class="form-control shiny-colour-input" data-init-value="#000000" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-axis.title.font.family-label" for="linePlot-axis.title.font.family">Axis Title Font</label>
#> <div>
#> <select id="linePlot-axis.title.font.family" class="shiny-input-select"><option value="Arial" selected>Arial</option>
#> <option value="Balto">Balto</option>
#> <option value="Courier New">Courier New</option>
#> <option value="Droid Sans">Droid Sans</option>
#> <option value="Droid Serif">Droid Serif</option>
#> <option value="Droid Sans Mono">Droid Sans Mono</option>
#> <option value="Gravitas One">Gravitas One</option>
#> <option value="Old Standard TT">Old Standard TT</option>
#> <option value="Open Sans">Open Sans</option>
#> <option value="Overpass">Overpass</option>
#> <option value="PT Sans Narrow">PT Sans Narrow</option>
#> <option value="Raleway">Raleway</option>
#> <option value="Times New Roman">Times New Roman</option>
#> <option value="Verdana">Verdana</option>
#> <option value="sans-serif">sans-serif</option>
#> <option value="serif">serif</option>
#> <option value="monospace">monospace</option></select>
#> <script type="application/json" data-for="linePlot-axis.title.font.family" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="linePlot-axis.showline" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show Axis Borders</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="linePlot-axis.mirror" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Mirror Axis Borders</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="linePlot-show.major.grid.x" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show X Gridlines</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="linePlot-show.major.grid.y" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show Y Gridlines</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="linePlot-axis.linecolor">Axis Line Color</label>
#> <input id="linePlot-axis.linecolor" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-axis.linewidth-label" for="linePlot-axis.linewidth">Axis Line Width</label>
#> <input id="linePlot-axis.linewidth" type="number" class="shiny-input-number form-control" value="0.5" data-update-on="change" min="0" step="0.1"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-axis.tickfont.size-label" for="linePlot-axis.tickfont.size">Tick Label Size</label>
#> <input id="linePlot-axis.tickfont.size" type="number" class="shiny-input-number form-control" value="12" data-update-on="change" min="1" step="1"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="linePlot-axis.tickfont.color">Tick Label Color</label>
#> <input id="linePlot-axis.tickfont.color" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-axis.tickfont.family-label" for="linePlot-axis.tickfont.family">Tick Label Font</label>
#> <div>
#> <select id="linePlot-axis.tickfont.family" class="shiny-input-select"><option value="Arial" selected>Arial</option>
#> <option value="Balto">Balto</option>
#> <option value="Courier New">Courier New</option>
#> <option value="Droid Sans">Droid Sans</option>
#> <option value="Droid Serif">Droid Serif</option>
#> <option value="Droid Sans Mono">Droid Sans Mono</option>
#> <option value="Gravitas One">Gravitas One</option>
#> <option value="Old Standard TT">Old Standard TT</option>
#> <option value="Open Sans">Open Sans</option>
#> <option value="Overpass">Overpass</option>
#> <option value="PT Sans Narrow">PT Sans Narrow</option>
#> <option value="Raleway">Raleway</option>
#> <option value="Times New Roman">Times New Roman</option>
#> <option value="Verdana">Verdana</option>
#> <option value="sans-serif">sans-serif</option>
#> <option value="serif">serif</option>
#> <option value="monospace">monospace</option></select>
#> <script type="application/json" data-for="linePlot-axis.tickfont.family" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-axis.tickangle.x-label" for="linePlot-axis.tickangle.x">X Tick Label Angle</label>
#> <input id="linePlot-axis.tickangle.x" type="number" class="shiny-input-number form-control" value="0" data-update-on="change" min="-180" max="180" step="15"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-axis.tickangle.y-label" for="linePlot-axis.tickangle.y">Y Tick Label Angle</label>
#> <input id="linePlot-axis.tickangle.y" type="number" class="shiny-input-number form-control" value="0" data-update-on="change" min="-180" max="180" step="15"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-axis.ticks-label" for="linePlot-axis.ticks">Tick Position</label>
#> <div>
#> <select id="linePlot-axis.ticks" class="shiny-input-select"><option value="outside" selected>Outside</option>
#> <option value="inside">Inside</option>
#> <option value="">None</option></select>
#> <script type="application/json" data-for="linePlot-axis.ticks">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="linePlot-axis.tickcolor">Tick Mark Color</label>
#> <input id="linePlot-axis.tickcolor" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-axis.ticklen-label" for="linePlot-axis.ticklen">Tick Mark Length</label>
#> <input id="linePlot-axis.ticklen" type="number" class="shiny-input-number form-control" value="5" data-update-on="change" min="0" step="1"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-axis.tickwidth-label" for="linePlot-axis.tickwidth">Tick Mark Width</label>
#> <input id="linePlot-axis.tickwidth" type="number" class="shiny-input-number form-control" value="1" data-update-on="change" min="0" step="0.1"/>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Lines" id="tab-3014-5">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-hline.intercepts-label" for="linePlot-hline.intercepts">Y-intercepts</label>
#> <input id="linePlot-hline.intercepts" type="text" class="shiny-input-text form-control" value="" placeholder="e.g. 2, -2" data-update-on="change"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-hline.colors-label" for="linePlot-hline.colors">Colors</label>
#> <input id="linePlot-hline.colors" type="text" class="shiny-input-text form-control" value="#000000" data-update-on="change"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-hline.widths-label" for="linePlot-hline.widths">Widths</label>
#> <input id="linePlot-hline.widths" type="text" class="shiny-input-text form-control" value="1" data-update-on="change"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-hline.linetypes-label" for="linePlot-hline.linetypes">Line types</label>
#> <input id="linePlot-hline.linetypes" type="text" class="shiny-input-text form-control" value="dashed" placeholder="solid, dashed, dotted, ..." data-update-on="change"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-hline.opacities-label" for="linePlot-hline.opacities">Opacities (0-1)</label>
#> <input id="linePlot-hline.opacities" type="text" class="shiny-input-text form-control" value="1" data-update-on="change"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <br/>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-vline.intercepts-label" for="linePlot-vline.intercepts">X-intercepts</label>
#> <input id="linePlot-vline.intercepts" type="text" class="shiny-input-text form-control" value="" placeholder="e.g. 2, -2" data-update-on="change"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-vline.colors-label" for="linePlot-vline.colors">Colors</label>
#> <input id="linePlot-vline.colors" type="text" class="shiny-input-text form-control" value="#000000" data-update-on="change"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-vline.widths-label" for="linePlot-vline.widths">Widths</label>
#> <input id="linePlot-vline.widths" type="text" class="shiny-input-text form-control" value="1" data-update-on="change"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-vline.linetypes-label" for="linePlot-vline.linetypes">Line types</label>
#> <input id="linePlot-vline.linetypes" type="text" class="shiny-input-text form-control" value="dashed" placeholder="solid, dashed, dotted, ..." data-update-on="change"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-vline.opacities-label" for="linePlot-vline.opacities">Opacities (0-1)</label>
#> <input id="linePlot-vline.opacities" type="text" class="shiny-input-text form-control" value="1" data-update-on="change"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <br/>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="linePlot-abline.slopes-label" for="linePlot-abline.slopes">Slopes</label>
#> <input id="linePlot-abline.slopes" type="text" class="shiny-input-text form-control" value="" data-update-on="change"/>
#> </div>
#> </div>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-2" style="margin-top: 25px;">
#> <div class="form-group shiny-input-container">
#> <div class="material-switch">
#> <label for="linePlot-auto.update" style="padding-right: 10px;">Auto Update</label>
#> <input id="linePlot-auto.update" type="checkbox"/>
#> <label class="switch label-success bg-success" for="linePlot-auto.update"></label>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-2" style="margin-top: 25px;">
#> <button id="linePlot-update" style="width:100%;" type="button" class="btn btn-default action-button">
#> <span class="action-label">Update</span>
#> </button>
#> </div>
#> <div class="col-sm-2" style="margin-top: 25px;">
#> <button class="btn btn-default action-button btn-secondary" id="linePlot-reset" style="width:100%;" type="button">
#> <span class="action-label">Reset</span>
#> </button>
#> </div>
#> <div class="col-sm-3" style="margin-top: 25px;">
#> <a aria-disabled="true" class="btn btn-default shiny-download-link disabled btn-secondary" download href="" id="linePlot-download.interactive" tabindex="-1" target="_blank" width="100%">
#> <i class="fas fa-download" role="presentation" aria-label="download icon"></i>
#> Save Interactive
#> </a>
#> </div>
#> <div class="col-sm-3">
#> <div class="form-group shiny-input-container" style="width:100%;">
#> <label class="control-label" id="linePlot-download.format-label" for="linePlot-download.format">Download Format</label>
#> <div>
#> <select id="linePlot-download.format" class="shiny-input-select"><option value="png">png</option>
#> <option value="svg" selected>svg</option></select>
#> <script type="application/json" data-for="linePlot-download.format" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> <br/>