Q4Widgets API Documentation

q4.highlightsCharting

The Financial Highlights Charting widget is used to display data elements related to the Financial Highlights Documents and charting their change over periods
Script link
q4.studioApi.4.0.0.min.js
Source file
q4.studioApi.js, line 10167
Requires

This widget extends the q4.studioApi widget. It has all the options and methods of the parent widget, in addition to those below. See the parent widget's documentation for details.

Child widgets have all the options and methods of this widget, but may add their own as well. See the child widget's documentation for additional options or methods. This widget has the following child widgets:

Examples

<script type="text/javascript">
    $('.module_container--widget').highlightsCharting()
</script>

Options

template
This is the default template which all other templates will be added to. It is not suggested to make changes to this for S&P clients 
'<div id="highlights-chart">' +
  '<div id="module-highlights-charting_form">' +
      '<div class="module-highlights-charting_intro">' +
          '<p>To build your chart, please select the financial report and items you wish to display. You may also change the periods using the Period Selector.<br><small><em>Note: Not all items are available for all financial periods.</em></small></p>' +
          '<p>* denotes required fields.</p>' +
      '</div>' +
      '<div class="module-highlights-charting_content">' +
          '<div class="module-highlights-charting_options grid" role="form" aria-label="Chart Options">' +
              '<div id="error-message-summary" class="grid_col" tabindex="-1"></div>' +
              '<div class="form-group grid_col grid_col--1-of-1">' +
                  '<label for="highlights-chart_preset-options">Chart Type <span aria-hidden="true">*</span></label>' +
                  '<div id="selectChartInstructions" class="sr-only" hidden>Selecting the value will change other data dropdowns.</div>'+
                  '<select id="highlights-chart_preset-options" name="preset-type" class="form-control dropdown select" aria-describedby="selectChartInstructions" aria-required="true" data-keeper-edited="yes"></select>' +
              '</div>' +
              '<fieldset class="grid_col grid_col--1-of-3 grid_col--lc-1-of-1 grid_col--md-1-of-1 grid_col--sm-1-of-1">' +
                      '<legend>Period Selector</legend>' + 
                      '<div class="form-group module-highlights-chart_period-type">' +
                          '<label for="highlights-chart_period-type-select">Period Types <span aria-hidden="true">*</span></label>' +
                          '<div id="selectedPeriodsInstructions" class="sr-only" hidden>Selecting the value will change available periods to select.</div>'+
                          '<select class="dropdown module_options-select" id="highlights-chart_period-type-select" aria-describedby="selectedPeriodsInstructions" aria-controls="highlights-chart_avail-periods-cell" aria-required="true">' +
                              '<option value="Q">Quarters</option>' +
                              '<option value="Y">Years</option>' +
                              '<option value="YTD">YTD</option>' +
                              '<option value="LTM">LTM</option>' +
                              '<option value="HY">Half Yrs.</option>' +
                          '</select>' +
                      '</div>' +
                      '<div class="module-highlights-charting_period-list form-group grid">' +
                              '<div id="highlights-chart_avail-periods-cell" class="module-highlights-charting_period-list-periods grid_col grid_col grid_col--1-of-2 grid_col--md-1-of-2 grid_col--sm-1-of-1">' +
                                  '<label id="highlights-chart_quarters-label" for="highlights-chart_quarters" class="periods-select-label">Available Periods</label>'+                                    
                                  '<label id="highlights-chart_years-label" for="highlights-chart_years" class="periods-select-label hidden">Available Periods</label>'+
                                  '<label id="highlights-chart_YTD-label" for="highlights-chart_YTD" class="periods-select-label hidden">Available Periods</label>'+
                                  '<label id="highlights-chart_LTM-label" for="highlights-chart_LTM" class="periods-select-label hidden">Available Periods</label>'+
                                   '<label id="highlights-chart_HY-label" for="highlights-chart_HY" class="periods-select-label hidden">Available Periods</label>'+                                 
                                  '<p class="error-message" id="error-require-period"></p>' +
                                  '<select multiple="multiple" class="highlights-chart_period-list" id="highlights-chart_quarters" aria-describedby="hint-avail-periods"></select>' +
                                  '<select multiple="multiple" class="hidden highlights-chart_period-list" id="highlights-chart_years" aria-describedby="hint-avail-periods error-require-period"></select>' +
                                  '<select multiple="multiple" class="hidden highlights-chart_period-list" id="highlights-chart_YTD" aria-describedby="hint-avail-periods error-require-period"></select>' +
                                  '<select multiple="multiple" class="hidden highlights-chart_period-list" id="highlights-chart_LTM" aria-describedby="hint-avail-periods error-require-period"></select>' +
                                  '<select multiple="multiple" class="hidden highlights-chart_period-list" id="highlights-chart_HY" aria-describedby="hint-avail-periods error-require-period"></select>' +
                                  '<button type="button" onclick="return false;" class="move">Add</button>' +
                                  '<span class="sr-only" hidden id="hint-avail-periods">Highlight at least one period and click the add button to move a period to the selected periods field. At least one period must be in the selected periods field to create the chart/table.</span>' +
                              '</div>' +
                              '<div class="module-highlights-charting_period-list-periods grid_col grid_col grid_col--1-of-2 grid_col--md-1-of-2 grid_col--sm-1-of-1">' +
                                  '<label for="highlights-chart_selected-periods">Selected Periods <span aria-hidden="true">*</span></label>'+
                                  '<select multiple="multiple" class="form-control" name="highlights-chart_selected-periods" id="highlights-chart_selected-periods" aria-required="true" aria-describedby="hint-select-periods"></select>' +
                                  '<button type="button" onclick="return false;" class="remove">Remove</button>' +
                                  '<span class="sr-only" hidden id="hint-select-periods">Highlight at least one period and click the remove button to move an unwanted period to the available periods field.</span>' +
                              '</div>' +
                      '</div>' +
                  '</fieldset>' +
                  '<fieldset class="grid_col grid_col--1-of-3 grid_col--lc-1-of-2 grid_col--md-1-of-2 grid_col--sm-1-of-1">' +
                      '<legend>Select Data Type</legend>' + 
                      '<div class="module-highlights-charting_chart-data form-group">' +
                          '<label for="highlights-chart_parent-lines-1">Data Type 1 <span aria-hidden="true">*</span></label>' +
                          '<div id="selectedData1Instructions" class="sr-only" hidden>Selecting the value will change the available subcategory options.</div>'+
                          '<select class="dropdown module_options-select" id="highlights-chart_parent-lines-1" aria-describedby="selectedData1Instructions" aria-controls="highlights-chart_child-lines-1" aria-required="true">' +
                              '{{#dataLabels}}' +
                                  '<option value="{{name}}">{{name}}</option>' +
                              '{{/dataLabels}}' +
                          '</select>' +
                          '<label for="highlights-chart_child-lines-1">Subcategory of Data Type 1 <span aria-hidden="true">*</span></label>' +
                          '<p class="error-message" id="error-require-subcategory"></p>' +
                          '<select class="dropdown module_options-select" id="highlights-chart_child-lines-1" name="highlights-chart_child-lines-1" data-keeper-edited="yes" aria-required="true" aria-describedby="error-require-subcategory"></select>' +
                      '</div>' +
                      '<div class="module-highlights-charting_chart-controls form-group grid">' +
                          '<div class="grid_col grid_col--1-of-2 grid_col--md-1-of-1 grid_col--sm-1-of-1">' +
                              '<span id="chartStyleLabel1" class="label highlights-chart_chart-type-1-label">Chart Style</span>' +
                              '<div class="highlights-chart_chart-type-1 module-highlights-charting_button-group" role="group" aria-labelledby="chartStyleLabel1">' +
                                  '<button aria-pressed="true" type="button" value="line" class="button active">Line</button>' +
                                  '<button aria-pressed="false" type="button" value="column" class="button">Bar</button>' +
                              '</div>' +
                          '</div>'+
                          '<div class="grid_col grid_col--1-of-2 grid_col--md-1-of-1 grid_col--sm-1-of-1">' +
                              '<span id="chartAxisLabel1" class="label highlights-chart_chart-axis-1-label">Chart Axis</span>' +
                              '<div class="highlights-chart_chart-axis-1 module-highlights-charting_button-group" role="group" aria-labelledby="chartAxisLabel1">' +
                                  '<button aria-pressed="true" type="button" value="left" class="button active" >Left</button>' +
                                  '<button aria-pressed="false" type="button" value="right" class="button">Right</button>' +
                              '</div>' +
                          '</div>' +
                      '</div>' +
                  '</fieldset>' +
                  '<fieldset class="grid_col grid_col--1-of-3 grid_col--lc-1-of-2 grid_col--md-1-of-2 grid_col--sm-1-of-1">' +
                      '<legend>Select Data Type <small>(optional)</small></legend>' + 
                      '<div class="module-highlights-charting_chart-data  form-group">' +
                          '<label for="highlights-chart_parent-lines-2">Data Type 2</label>' +
                          '<div id="selectedData2Instructions" class="sr-only" hidden>Selecting the value will change the available subcategory options.</div>'+
                          '<select class="dropdown module_options-select" id="highlights-chart_parent-lines-2" aria-describedby="selectedData2Instructions" aria-controls="highlights-chart_child-lines-2">' +
                              '{{#dataLabels}}' +
                                  '<option value="{{name}}">{{name}}</option>' +
                              '{{/dataLabels}}' +
                          '</select>' +
                          '<label for="highlights-chart_child-lines-2">Subcategory of Data Type 2</label>' +
                          '<select class="dropdown module_options-select" id="highlights-chart_child-lines-2" name="highlights-chart_child-lines-2" data-keeper-edited="yes"></select>' +
                      '</div>' +
                      '<div class="module-highlights-charting_chart-controls form-group grid">' +
                          '<div class="grid_col grid_col--1-of-2 grid_col--md-1-of-1 grid_col--sm-1-of-1">' +                               
                              '<span id="chartStyleLabel2" class="label highlights-chart_chart-type-2-label ">Chart Style</span>' +
                              '<div class="highlights-chart_chart-type-2 module-highlights-charting_button-group" role="group" aria-labelledby="chartStyleLabel2">' +
                                  '<button aria-pressed="true" type="button" value="line" class="button active">Line</button>' +
                                  '<button aria-pressed="false" type="button" value="column" class="button">Bar</button>' +         
                              '</div>' +
                          '</div>'+
                          '<div class="grid_col grid_col--1-of-2 grid_col--md-1-of-1 grid_col--sm-1-of-1">' +
                              '<span id="chartAxisLabel2" class="label highlights-chart_chart-axis-2-label">Chart Axis</span>' +
                              '<div class="highlights-chart_chart-axis-2 module-highlights-charting_button-group" role="group" aria-labelledby="chartAxisLabel2">' +
                                  '<button aria-pressed="true" type="button" value="left" class="button active">Left</button>' +
                                  '<button aria-pressed="false" type="button" value="right" class="button">Right</button>' +
                              '</div>' +
                          '</div>' +
                      '</div>' +
              '</fieldset>' +
              '<div class="module-highlights-charting_form-controls form-group grid_col grid_col--1-of-1">' +
                  '<button type="button" class="button" id="highlights-chart_cancel">Clear Selections</button>' +
                  '<button type="button" class="button" id="highlights-chart_update" data-ol-has-click-handler="">Update Chart & Table</button>' +
              '</div>' +
          '</div>' +
          '<div class="module-highlights-charting_chart">' +
              '<div class="text-center highlights-chart_loading" aria-live="polite" style="display: none;"></div>' +
              '<div id="highlights-chart_chart-container_render"></div>' +
          '</div>' +
      '</div>' +
  '</div>' +
'</div>'
templateId number
The data template to use. An outline of the templates can be found here.
Default value
1
presetOptionsTpl string
Renders the list of presets for the chart. 
{{#.}}
     &#option value="{{name}}">{{name}}</option>
{{/.}}
selectPeriodTypeTpl string
The list of items currently being displayed in the table. (Will default to Last Four Years & YTD) 
{{#periods}}
    <option value="{{name}}">{{name}}</option>
{{/periods}}
selectPeriodTpl string
The list of items currently being displayed in the table. (Will default to Last Four Years & YTD) 
{{#.}}
    <option value="{{id}}" order="{{index}}">{{name}}</option>
{{/.}}
availablePeriodsLabelSelector string
A selector for the available periods label in the custom period section
Default value
.periods-select-label
selectChartItemTpl string
The list of items currently being displayed in the table. (Will default to Last Four Years & YTD) 
<option value="">---Select Chart Item---</option>
    {{#.}}
        <option value="{{keyItem}}">{{name}}</option>
    {{/.}}
noDataErrorMessageTpl string
The message that should be displayed if no data is returned for current options. * 
'<div class="alert alert-danger" role="alert">'+
'<p>Data is not available for the selected option(s), please try other options.</p>'+
'</div>'
oneSeriesMissingErrorMessageTpl string
The message that should be displayed if only one series returns data for current options. 
'<div class="alert alert-warning" role="alert"><p>Data is not available for one of the selected data sets, please try other options.</p></div>'
presetOptionsSelector string
A selector for the preset select box.
Default value
#highlights-chart_preset-options
presetOptions Array.<object>
An array of preset options, the objectes added to the array should contain the following: name - the text used as an option in the preset select. dataItems - An array of keyItems (number). The keyItem is essentially the id of a data item, this can be found in the response from the API.
Default value
["{\"name\":\"Assets and Equity\",\"dataItems\":\"\"}","{\"name\":\"Loans vs Deposits\",\"dataItems\":\"\"}","{\"name\":\"TBV and NPAs\",\"dataItems\":\"\"}","{\"name\":\"Capital vs Net ChargeOffs\",\"dataItems\":\"\"}","{\"name\":\"EPS vs Net Interest Margin\",\"dataItems\":\"\"}"]
presetOnInitialLoad string
The preset to be applied once the widget initially loads, refers to the name property provided in the presetOptions option. If no preset should be applied set this option to an empty string.
Default value
Assets and Equity
periodLimit number
The number of periods allowed to be selected
Default value
40
periodsSelectorContainer string
A selector for the period selector's container
Default value
#highlights-chart_period-selection
periodTypeSelector string
A selector for which period type should be visible
Default value
#highlights-chart_period-type-select
periodsBoxSelector string
A selector for all the period select boxes
Default value
.highlights-chart_period-list
yearBoxSelector string
A selector for the 'year' period select box
Default value
#highlights-chart_years
ytdBoxSelector string
A selector for the 'ytd' period select box
Default value
#highlights-chart_YTD
quarterBoxSelector string
A selector for the 'quarter' period select box
Default value
#highlights-chart_quarters
ltmBoxSelector string
A selector for the 'LTM' period select box
Default value
#highlights-chart_LTM
halfyearBoxSelector string
A selector for the 'Half Yrs.' period select box
Default value
#highlights-chart_HY
selectedPeriodsSelector string
A selector for the box containing all selected periods
Default value
#highlights-chart_selected-periods
addPeriodsSelector string
A selector for the button to add selected periods
Default value
.module-highlights-charting_period-list .move
removePeriodsSelector string
A selector for the button to remove selected periods
Default value
.module-highlights-charting_period-list .remove
categorySelector1 string
A selector for the dropdown 'select' element for the category of the first series
Default value
#highlights-chart_parent-lines-1
categorySelector2 string
A selector for the dropdown 'select' element for the category of the second series
Default value
#highlights-chart_parent-lines-2
seriesSelector1 string
A selector for the dropdown 'select' element for the first series
Default value
#highlights-chart_child-lines-1
seriesSelector2 string
A selector for the dropdown 'select' element for the second series
Default value
#highlights-chart_child-lines-2
chartTypeSelector1 string
A selector for the chart type option for the first series
Default value
.highlights-chart_chart-type-1
chartTypeSelector2 string
A selector for the chart type option for the second series
Default value
.highlights-chart_chart-type-2
chartAxisSelector1 string
A selector for the chart axis option for the first series
Default value
.highlights-chart_chart-axis-1
chartAxisSelector2 string
A selector for the chart axis option for the second series
Default value
.highlights-chart_chart-axis-2
sharedAxis boolean
Whether to merge the 2 y-axes when positioned on the same side
Default value
false
sharedAxisLabel string
(Requires sharedAxis = true) The name to be used for the shared y-axis. Displays both original y-axis names if blank
updateSelector string
A selector for the update button
Default value
#highlights-chart_update
cancelSelector string
A selector for the cancel button
Default value
#highlights-chart_cancel
chartID string
An id for the chart's loader container
Default value
highlights-chart_chart-container_render
chartLoaderSelector string
A selector for the chart's loader container
Default value
.highlights-chart_loading
printThisEnabled boolean
Whether to enable the printThis functionality, which allows easy printing of the chart AND data table and does not require highcharts exporting.
Default value
false
printTpl string
A template for the chart's print button container 
 '<div class="module-highlights-charting_chart-print">' +
      '<button class="highlights-chart_print--button" >' +
          '<span class="sr-only">Print chart and table (browser print window will open)</span><span class="q4-icon_printer-fill" aria-hidden="true"></span>' +
      '</button>'+
  '</div>'
printButtonSelector string
A selector for the chart's print button
Default value
.highlights-chart_print--button
highchartsOpts Object
A set of (non-Highstock) Highcharts options.
beforeMetadataRender function
A callback that fires before the widget is rendered and/or every period selection update. It is generally used to restructure/manipulate data before being passed into the template option.
Parameters
event Event
The event object.
data Object
The data object.
beforeChartRender function
A callback that fires before the widget is rendered and/or every period selection update. It is generally used to restructure/manipulate data before being passed into the template option.
Parameters
event Event
The event object.
data Object
The data object.
complete function
A callback that fires after the widget is rendered and/or every period selection update.
Parameters
event Event
The event object.
data Object
The data object.