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.

It's possible to configure a chart to show a popup (one with the BS.Popup Behavior) when a point is clicked on the graph. This allows you to, for example, prompt the user for information about that specific date. Just specify a value for showPopup in the chart options that is a selector that references the hidden popup.

It's also possible for any date input in that popup to be filled in with the date of the point the user clicks. For this you must specify a value for mapDateToInput (an object) with a property called target that specifies the name of the input the date should be inserted into. You can optionally specify mapDateToInput.format to specify a date format.

Example

<div data-behavior="Chart.Stock ToSource" class="chart" data-chart-stock-options="
  'seriesType':'areaspline',
  'url': '/sandbox/chart/three_lines',
  'showPopup': '!body #example-popup',
  'mapDateToInput': {
    'target': 'date'
  },
" data-tosource-target="!.example-block .response"></div>

<div data-behavior="BS.Popup" id="example-popup" class="modal fade hide" data-bs-popup-options="
  'moveElementTo':'!body',
  'focusOnShow': ''
">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h4 class="modal-title" id="myModalLabel">Some popup...</h4>
      </div>
      <div class="modal-body">
        <p>This is just an example popup. Here's a date input with the date of the point you clicked:</p>
        <input type="text" class="form-control" name="date"
          data-behavior="DatePicker"
          data-datepicker-options="
            'format':'%m/%d/%Y'
          " value="12/15/2018"
        >
      </div>
      <div class="modal-footer">
        <a class="btn btn-default dismiss" data-dismiss="modal">Close</a>
      </div>
    </div>
  </div>
</div>