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 thepresetOptions
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
- 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
- disclaimerLink string
-
The format of the copyright disclaimer link
'<div class="module-disclaimer">' + ' <button type="button" class="module-disclaimer_link disclaimer_link" aria-describedby="modal-window"> Copyright © {{year}}, S&P Global Market Intelligence (and its affiliates as applicable). All rights reserved.</button>' + ' <span class="sr-only" id="modal-window" hidden>Opens in modal window</span>' + ' </div>'
- 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.