q4.asReportedCharting
The As Reported Charting widget is used to display data elements related to the As Reported Documents and charting their change over periods- Script link
- q4.studioApi.4.0.0.min.js
- Source file
- q4.studioApi.js, line 4735
- 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').asReportedCharting()
</script>
Options
- template string
-
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="as-reported-chart"> <form id="as-reported-chart_form"> <div class="container"> <div class="row"> <div class="full-width"> <br> <p class="as-reported-chart_label"> 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> </div> </div> <div class="row"> <div class="as-reported-chart_options"> <div class="form-group"> <label class="as-reported-chart_select-fs-label as-reported-chart_label">Select Financial Statement</label> <select id="as-reported-chart_financial-statement" name="report-type" class="form-control as-reported-chart_select-fs" data-keeper-edited="yes"> <option value="Balance Sheet" selected="selected">Balance Sheet</option> <option value="Income Statement">Income Statement</option> <option value="Cash Flow">Cash Flow</option> </select> </div> <div class="filter"> <div class="form-group as-reported-chart_period-type"> <table class="table as-reported-chart_multilist"> <tbody> <tr> <td class="cell_half-width"> <label class="as-reported-chart_period-type-select-label as-reported-chart_label">Selected Period(s)</label> <select class="form-control" id="as-reported-chart_period-type-select"> <option value="Q">Quarters</option> <option value="Y">Years</option> <option value="YTD">YTD</option> </select> </td> <td class="as-reported-chart_empty"> </td> <td class="cell_half-width"></td> </tr> </tbody> </table> </div> <div class="form-group"> <div class="as-reported-chart_period-selection"> <table class="table as-reported-chart_multilist"> <tbody> <tr> <td> <div class="box1"> <label for="bootstrap-duallistbox-nonselected-list_duallistbox"> </label> </div> </td> <td></td> <td> <div class="box2"> <label for="as-reported-chart_selected-periods">Selected Period(s)</label> </div> </td> </tr> <tr> <td class="cell_half-width"> <div class="box1"> <select multiple="multiple" class="form-control hidden as-reported-chart_period-list" id="as-reported-chart_quarters"> </select> <select multiple="multiple" class="form-control hidden as-reported-chart_period-list" id="as-reported-chart_years"> </select> <select multiple="multiple" class="form-control as-reported-chart_period-list" id="as-reported-chart_YTD"> </select> </div> </td> <td style="vertical-align: middle;"> <div class="box1 text-center"><button onclick="return false;" class="move fa fa-caret-right"> > </button></div> <div class="box2 text-center"><button onclick="return false;" class="remove fa fa-caret-left"> < </button></div> </td> <td class="cell_half-width"> <div class="box2"> <select multiple="multiple" class="form-control" name="as-reported-chart_selected-periods" id="as-reported-chart_selected-periods" style="display:block;width: 100px;"> </select> </div> </td> </tr> </tbody> </table> </div> </div> <div class="form-group"> <label class="as-reported-chart_select-data-label as-reported-chart_label">Select Data (1)</label> <select class="form-control" id="as-reported-chart_parent-lines-1"> {{#dataLabels}} <option value="{{name}}">{{name}}</option> {{/dataLabels}} </select> <br> <div id="lineItem1"> <div class="form-group"> <select class="form-control" id="as-reported-chart_child-lines-1" name="as-reported-chart_child-lines-1" data-keeper-edited="yes"> </select> </div> </div> </div> <div class="form-group"> <div class="row as-reported-chart_controls"> <div class="half-width"> <label class="as-reported-chart_chart-type-1-label as-reported-chart_label">Chart Type</label> <div class="as-reported-chart_chart-type-1"> <button value="line" onclick="return false;" class="active">Line</button> <button value="column" onclick="return false;">Column</button> </div> </div> <div class="half-width"> <label class="as-reported-chart_chart-axis-1-label as-reported-chart_label">Chart Axis</label> <div class="as-reported-chart_chart-axis-1"> <button value="left" onclick="return false;" class="active">Left</button> <button value="right" onclick="return false;">Right</button> </div> </div> </div> </div> <br> <div class="form-group"> <label class="as-reported-chart_select-data-label as-reported-chart_label">Select Data (2)</label> <select class="form-control" id="as-reported-chart_parent-lines-2"> {{#dataLabels}} <option value="{{name}}">{{name}}</option> {{/dataLabels}} </select> <br> <div id="lineItem2"> <div class="form-group"> <select class="form-control" id="as-reported-chart_child-lines-2" name="as-reported-chart_child-lines-2" data-keeper-edited="yes"> </select> </div> </div> </div> <div class="form-group"> <div class="row as-reported-chart_controls"> <div class="half-width"> <label class="as-reported-chart_chart-type-2-label as-reported-chart_label">Chart Type</label> <div class="as-reported-chart_chart-type-2"> <button value="line" onclick="return false;" class="active">Line</button> <button value="column" onclick="return false;">Column</button> </div> </div> <div class="half-width"> <label class="as-reported-chart_chart-axis-2-label as-reported-chart_label">Chart Axis</label> <div class="as-reported-chart_chart-axis-2"> <button value="left" onclick="return false;" class="active">Left</button> <button value="right" onclick="return false;">Right</button> </div> </div> </div> </div> </div> <br> <div class="form-group"> <button type="button" id="as-reported-chart_cancel"> Cancel </button> <button type="button" disabled="disabled" id="as-reported-chart_update" data-ol-has-click-handler="">Update Chart</button> </div> </div> <div class="as-reported-chart_chart-container"> <div class="text-center as-reported-chart_loading" style="display: none;"> </div> <!-- Graph should be placed here --> <div id="as-reported-chart_chart-container_render"></div> </div> </div> </div> </form> </div> - 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> {{/.}} - 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>' - documentTypeSelector string
-
A selector for the financial statement "select" element
- Default value
#as-reported-chart_financial-statement
- documentType string
-
The type of document to initially retrieve data for. Options include:
- Balance Sheet
- Income Statement
- Cash Flow
Please see Studio Public API documentation for more info- Default value
Balance Sheet
- 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
#as-reported-chart_period-selection
- periodTypeSelector string
-
A selector for which period type should be visible
- Default value
#as-reported-chart_period-type-select
- periodsBoxSelector string
-
A selector for all the period select boxes
- Default value
.as-reported-chart_period-list
- yearBoxSelector string
-
A selector for the 'year' period select box
- Default value
#as-reported-chart_years
- ytdBoxSelector string
-
A selector for the 'ytd' period select box
- Default value
#as-reported-chart_YTD
- quarterBoxSelector string
-
A selector for the 'quarter' period select box
- Default value
#as-reported-chart_quarters
- selectedPeriodsSelector string
-
A selector for the box containing all selected periods
- Default value
#as-reported-chart_selected-periods
- addPeriodsSelector string
-
A selector for the button to add selected periods
- Default value
.as-reported-chart_multilist .move
- removePeriodsSelector string
-
A selector for the button to remove selected periods
- Default value
.as-reported-chart_multilist .remove
- categorySelector1 string
-
A selector for the dropdown 'select' element for the category of the first series
- Default value
#as-reported-chart_parent-lines-1
- categorySelector2 string
-
A selector for the dropdown 'select' element for the category of the second series
- Default value
#as-reported-chart_parent-lines-2
- seriesSelector1 string
-
A selector for the dropdown 'select' element for the first series
- Default value
#as-reported-chart_child-lines-1
- seriesSelector2 string
-
A selector for the dropdown 'select' element for the second series
- Default value
#as-reported-chart_child-lines-2
- chartTypeSelector1 string
-
A selector for the chart type option for the first series
- Default value
.as-reported-chart_chart-type-1
- chartTypeSelector2 string
-
A selector for the chart type option for the second series
- Default value
.as-reported-chart_chart-type-2
- chartAxisSelector1 string
-
A selector for the chart axis option for the first series
- Default value
.as-reported-chart_chart-axis-1
- chartAxisSelector2 string
-
A selector for the chart axis option for the second series
- Default value
.as-reported-chart_chart-axis-2
- updateSelector string
-
A selector for the update button
- Default value
#as-reported-chart_update
- cancelSelector string
-
A selector for the cancel button
- Default value
#as-reported-chart_cancel
- chartID string
-
An id for the chart's loader container
- Default value
as-reported-chart_chart-container_render
- chartLoaderSelector string
-
A selector for the chart's loader container
- Default value
.as-reported-chart_loading
- a11yLoadingSelector string
-
A selector for the visually hidden aria-live region to announce the loading status of the chart
- Default value
#loadingStatus
- 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="as-reported-chart_print--row">' + '<div class="as-reported-chart_print--button" role="button">' + '<span class="sr-only">Print Chart</span><span class="q4-icon_printer-fill"></span>' + '</div></div>' - printButtonSelector string
-
A selector for the chart's print button
- Default value
.as-reported-chart_print--button
- addLegendEnabled boolean
-
Whether to enable the "addLegend" functionality, which adds a custom HTML legend outside of the Highchart.
- Default value
false
- legendItemTpl function
-
A template for the chart's custom HTML legend items (as seen in S&P)
'function(seriesColor, seriesTitle) { return ('<div class="as-reported-chart_ticker"><span class="as-reported-chart_ticker--color" style="background-color: ' + seriesColor + '"></span><span class="as-reported-chart_ticker--title">'+ seriesTitle + '</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
templateoption.- 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
templateoption.- 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.