Q4Widgets API Documentation

q4.asReportedChartingIndex

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 6095
Requires

This widget extends the q4.asReportedCharting 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.

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="irwWrapper">' +
                    '<form id="asreportedchartform">' +
                        '<div class="container asreportedchart">' +
                            '<div class="row">' +
                                '<div class="col-xs-12">' +
                                    '<br>' +
                                    '<p class="irwAsreportedLabel">' +
                                    '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="col-md-4">' +
                                    '<div class="form-group">' +
                                        '<label class="irwSelectFSLbl irwLabel">Select Financial Statement</label>' +
                                        '<select id="financialStatement" name="financialStatement" class="form-control" 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 irwSelectedPSelect">' +
                                            '<table class="table irwasreportmultilist">' +
                                                '<tbody>' +
                                                    '<tr>' +
                                                        '<td class="half-width">' +
                                                            '<label class="irwSelectPLbl irwLabel">Selected Period(s)</label>' +
                                                            '<select class="form-control" id="irwSelectPeriod">' +
                                                                '<option value="Q">Quarters</option>' +
                                                                '<option value="Y">Years</option>' +
                                                                '<option value="YTD">YTD</option>' +
                                                            '</select>' +
                                                        '</td>' +
                                                        '<td class="irwAsRepEmpty"> </td>' +
                                                        '<td class="half-width"></td>' +
                                                    '</tr>' +
                                                '</tbody>' +
                                            '</table>' +
                                        '</div>' +
                                        '<div class="form-group">' +
                                            '<div id="period-duallistbox">' +
                                                '<table class="table irwasreportmultilist">' +
                                                    '<tbody>' +
                                                        '<tr>' +
                                                            '<td>' +
                                                                '<div class="box1">' +
                                                                    '<label for="duallistbox-nonselected-list_duallistbox"> </label>' +
                                                                '</div>' +
                                                            '</td>' +
                                                            '<td></td>' +
                                                            '<td>' +
                                                                '<div class="box2">' +
                                                                    '<label for="duallistbox-selected-list_duallistbox">Selected Period(s)</label>' +
                                                                '</div>' +
                                                            '</td>' +
                                                        '</tr>' +
                                                        '<tr>' +
                                                            '<td class="half-width">' +
                                                                '<div class="box1">' +
                                                                    '<select multiple="multiple" class="form-control hidden irwPeriodLists" id="irwQ">' +
                                                                    '</select>' +
                                                                    '<select multiple="multiple" class="form-control hidden irwPeriodLists" id="irwY">' +
                                                                    '</select>' +
                                                                    '<select multiple="multiple" class="form-control irwPeriodLists" id="irwYTD">' +
                                                                    '</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="half-width">' +
                                                                '<div class="box2">' +
                                                                    '<select multiple="multiple" class="form-control" name="irwSelectedPeriod" id="irwSelectedPeriod">' +
                                                                    '</select>' +
                                                                '</div>' +
                                                            '</td>' +
                                                        '</tr>' +
                                                    '</tbody>' +
                                                '</table>' +
                                            '</div>' +
                                        '</div>' +
                                        '<div class="form-group">' +
                                            '<label class="irwSelectDLbl irwLabel">Select Data (1)</label>' +
                                            '<select class="form-control" id="parentLines1">' +
                                                '{{#dataLabels}}' +
                                                    '<option value="{{name}}">{{name}}</option>' +
                                                '{{/dataLabels}}' +
                                            '</select>' +
                                            '<br>' +
                                            '<div id="lineItem1">' +
                                                '<div class="form-group">' +
                                                    '<select class="form-control" id="childLines1" name="childLines" data-keeper-edited="yes">' +
                                                    '</select>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                        '<div class="form-group">' +
                                            '<div class="row irwAsReportedChartControls">' +
                                                '<div class="col-md-6 col-xs-6">' +
                                                    '<label class="irwChartTLbl irwLabel">Chart Type</label>' +
                                                    '<div class="charttype1 btn-group btn-toggle buttons btn-block">' +
                                                        '<button value="line" onclick="return false;" class="active">Line</button>' +
                                                        '<button value="column" onclick="return false;">Bar</button>' +
                                                    '</div>' +
                                                '</div>' +
                                                '<div class="col-md-6 col-xs-6">' +
                                                    '<label class="irwChartALbl irwLabel">Chart Axis</label>' +
                                                    '<div class="chartaxis1 btn-group btn-toggle buttons btn-block">' +
                                                        '<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="irwSelectDLbl irwLabel">Select Data (2)</label>' +
                                            '<select class="form-control" id="parentLines2">' +
                                                '{{#dataLabels}}' +
                                                    '<option value="{{name}}">{{name}}</option>' +
                                                '{{/dataLabels}}' +
                                            '</select>' +
                                            '<br>' +
                                            '<div id="lineItem2">' +
                                                '<div class="form-group">' +
                                                    '<select class="form-control" id="childLines2" name="childLines" data-keeper-edited="yes">' +
                                                    '</select>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                        '<div class="form-group">' +
                                            '<div class="row irwAsReportedChartControls">' +
                                                '<div class="col-md-6 col-xs-6">' +
                                                    '<label class="irwChartTLbl irwLabel">Chart Type</label>' +
                                                    '<div class="charttype2 btn-group btn-toggle buttons btn-block">' +
                                                        '<button value="line" onclick="return false;" class="active">Line</button>' +
                                                        '<button value="column" onclick="return false;">Bar</button>' +
                                                    '</div>' +
                                                '</div>' +
                                                '<div class="col-md-6 col-xs-6">' +
                                                    '<label class="irwChartALbl irwLabel">Chart Axis</label>' +
                                                    '<div class="chartaxis2 btn-group btn-toggle buttons btn-block">' +
                                                        '<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="cancelbtn" class="btn btn-primary pull-right btns">' +
                                                'Cancel' +
                                        '</button>' +
                                        '<button type="button" id="updatechart" disabled="disabled" class="btn btn-primary pull-right btns irwAsReportedBtnUpdate" data-ol-has-click-handler="">Update Chart</button>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="col-md-8">' +
                                    '<div class="text-center irwLoading" style="display: none;">' +
                                    '</div>' +
                                    '<!-- Graph should be placed here -->' +
                                    '<div id="stockchart"></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) 
'{{#.}}' +
    '<option type="{{type}}" value="{{value}}">{{label}}</option>' +
'{{/.}}'
selectPeriodTpl string
The list of items currently being displayed in the table. (Will default to Last Four Years & YTD) 
'{{#.}}' +
    '<option type="{{type}}" value="{{value}}">{{label}}</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}} ($000)</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
#financialStatement
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
periodTypeSelector string
A selector for which period type should be visible
Default value
#irwSelectPeriod
periodsBoxSelector string
A selector for all the period select boxes
Default value
.irwPeriodLists
yearBoxSelector string
A selector for the 'year' period select box
Default value
#irwY
ytdBoxSelector string
A selector for the 'ytd' period select box
Default value
#irwYTD
quarterBoxSelector string
A selector for the 'quarter' period select box
Default value
#irwQ
periodLimit number
A selector for the period selector's container
Default value
40
periodsSelectorContainer string
A selector for the period selector's container
Default value
#period-duallistbox
selectedPeriodsSelector string
A selector for the box containing all selected periods
Default value
#irwSelectedPeriod
addPeriodsSelector string
A selector for the box containing all selected periods
Default value
.irwasreportmultilist .move
removePeriodsSelector string
A selector for the box containing all selected periods
Default value
.irwasreportmultilist .remove
categorySelector1 string
A selector for the dropdown 'select' element for the category of the first series
Default value
#parentLines1
categorySelector2 string
A selector for the dropdown 'select' element for the category of the second series
Default value
#parentLines2
seriesSelector1 string
A selector for the dropdown 'select' element for the first series
Default value
#childLines1
seriesSelector2 string
A selector for the dropdown 'select' element for the second series
Default value
#childLines2
chartTypeSelector1 string
A selector for the chart type option for the first series
Default value
.charttype1
chartTypeSelector2 string
A selector for the chart type option for the second series
Default value
.charttype2
chartAxisSelector1 string
A selector for the chart axis option for the first series
Default value
.chartaxis1
chartAxisSelector2 string
A selector for the chart axis option for the second series
Default value
.chartaxis2
updateSelector string
A selector for the update button
Default value
#updatechart
cancelSelector string
A selector for the cancel button
Default value
#cancelbtn
chartID string
An id for the chart's loader container
Default value
stockchart
chartLoaderSelector string
A selector for the chart's loader container
Default value
#irwLoading
printTpl string
A template for the chart's print button container 
('<div class="irwAsReportChartPrintRow">'+
                    '<div class="irwAsReportChartPrintButton" 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
.irwAsReportChartPrintButton
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="irwAsReportChartTicker "><span class="irwAsReportChartTickerColor" style="background-color: ' + 
               seriesColor + 
               '"></span><span class="irwAsReportChartTickerTitle">'+ 
               seriesTitle  +
               '</span></div>'