Sandbox: JavaScript

Less Component Required

Be sure to include Behavior-UI's chart.less in your build.

JavaScript Library Required

In addition to the chart files in Behavior-UI, you will also need the behavior-ui fork of HighStock. Presently, only highstock.src is patched; that's all you need.

This behavior allows you to update various DOM elements when a Chart.Stock instance has its range changed. In addition to updating various DOM elements, it can invoke delegators as specified. This combination allows you to change the DOM values and/or their state, hiding or showing an element, or fetching new content from the server.

Updating one input

This gets its values set when you change a date.


href w/ date args

This button gets its url updated with the start/end dates but also toggles class whenever the range selector is updated. Any delegator could be triggered, including, for instance, the Ajax trigger.

This paragraph contains a single span that gets the date set in its innerHTML. Note that it has data-format settings to specify its date format (in this case, %m/%d).


<div class="chart-example">
  <div class="row" data-behavior="Chart.RangeMonitor"
    data-chart-rangemonitor-options="
      'element': '!div.chart-example .singleInput',
      'inputsUpdateChart': true,
      'links': '!div.chart-example a',
      'target': '!div.chart-example .chart',
      'delegators': {
        'toggleClass': {}
      }
    " data-toggleclass-options="
      'class': 'btn-primary',
      'target': '!.chart-example .btn'
    ">
    <div class="col-md-6">
      <p><input type="text" class="form-control singleInput" value=""></p>
    </div>
    <div class="col-md-6">
      <p>This gets its values set when you change a date.</p>
    </div>
  </div>
  <hr/>
  <div class="row">
    <div class="col-md-6">
      <a class="btn btn-default" href="/sandbox/JavaScript/Charts/Charts_-_Range_Monitor">href w/ date args</a>
      <p>This button gets its url updated with the start/end dates but also toggles class
        whenever the range selector is updated. Any delegator could be triggered, including,
        for instance, the <a href="/sandbox/JavaScript/Delegators/Delegator.Ajax">Ajax</a> trigger.</p>
    </div>
    <div class="col-md-6">
      <p>
        <span class="singleInput" data-format="%m/%d"></span>
      </p>
      <p>This paragraph contains a single span that gets the date set in its innerHTML. Note that it has
        <code>data-format</code> settings to specify its date format (in this case, <code>%m/%d</code>).</p>
    </div>
  </div>
  <hr/>

  <div data-behavior="Chart.Stock" class="chart" data-chart-stock-options="
    'url': '/sandbox/chart/three_lines'
  "></div>
</div>

Updating two inputs

These inputs get their values set when you change a date.


<div class="chart-example">
  <div class="row" data-behavior="Chart.RangeMonitor"
    data-chart-rangemonitor-options="
      'elements':{
        'start': '!div.chart-example .from',
        'end': '!div.chart-example .to'
      },
      'inputsUpdateChart': true,
      'target': '!div.chart-example .chart'
    ">
    <div class="col-md-3">
      <p><input type="text" class="form-control from" value=""></p>
    </div>
    <div class="col-md-3">
      <p><input type="text" class="form-control to" value=""></p>
    </div>
    <div class="col-md-6">
      <p>These inputs get their values set when you change a date.</p>
    </div>
  </div>
  <hr/>

  <div data-behavior="Chart.Stock" class="chart" data-chart-stock-options="
    'url': '/sandbox/chart/three_lines'
  "></div>
</div>

Behavior Options

Name type default description
target string ~ The selector to find the chart element; required.
links string ~ Selector to find anchor tags to update with the date range selected by the chart. Adds these as start and end to the links as url parameters.
dateFormatForLinks string ~ The date format to use when updating the hrefs of links. By default, it uses Date.getTime() to set the value to ms since epoch.
elements object ~ Selector to find elements to update. Specify selectors for both start and end and, when the chart date is selected, the elements will be updated with the corresponding dates. If the target is an input, its value is updated, otherwise the innerHTML.
element string ~ Selector to find elements to update. This works just like elements, but updates only a single target.
singleInputDelimiter string ' - ' This string gets injected between the start and end date if a single element is used.
inputsUpdateChart boolean false If true, changes to the inputs matched by the elements selector will update the chart. Note that your elements selector for start and end can match numerous elements, but if they match more than one input each only the first input matched is monitored for changes.
dateFormatForElements string "%m/%d/%Y" The date format to use when updating elements. By default, it uses Locale.get('Date.shortDate').
delegators Object ~ A list of delegators to trigger on the element when the date is changed. See Behavior.Startup for the format of these. The example above also includes it.