Q4Widgets API Documentation

q4.highlightsChartingIndex

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

This widget extends the q4.highlightsCharting 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').highlightsChartingIndex()
</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="irwWrapper">' +
    '<form id="highlightschartform">' +
        '<div class="container highlightschart">' +
            '<div class="row">' +
                '<div class="col-md-4">' +
                    '<div class="form-group">' +
                        '<label class="irwSelectFSLbl irwLabel">Select Chart</label>' +
                        '<select id="presetOptions" name="presetOptions" class="form-control" data-keeper-edited="yes"></select>' +
                    '</div>' +
                    '<div class="filter">' +
                        '<div class="form-group irwSelectedPSelect">' +
                            '<table class="table irwhighlightsmultilist">' +
                                '<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>' +
                                                '<option value="LTM">LTM</option>' +
                                                '<option value="HY">Half Yrs</option>' +
                                            '</select>' +
                                        '</td>' +
                                        '<td class="irwHighlightsEmpty"> </td>' +
                                        '<td class="half-width"></td>' +
                                    '</tr>' +
                                '</tbody>' +
                            '</table>' +
                        '</div>' +
                        '<div class="form-group">' +
                            '<div id="period-duallistbox">' +
                                '<table class="table irwhighlightsmultilist">' +
                                    '<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 irwPeriodLists" id="irwQ">' +
                                                    '</select>' +
                                                    '<select multiple="multiple" class="form-control hidden irwPeriodLists" id="irwY">' +
                                                    '</select>' +
                                                    '<select multiple="multiple" class="form-control hidden irwPeriodLists" id="irwYTD">' +
                                                    '</select>' +
                                                    '<select multiple="multiple" class="form-control  hidden irwPeriodLists" id="irwLTM">' +
                                                    '</select>' +
                                                    '<select multiple="multiple" class="form-control  hidden irwPeriodLists" id="irwHY">' +
                                                    '</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 irwHighlightsChartControls">' +
                                '<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 irwHighlightsChartControls">' +
                                '<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 irwHighlightsBtnUpdate" 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>'
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}}{{#magnitude}} ({{magnitude}}){{/magnitude}}</option>' +
                '{{/.}}''
presetOptionsSelector string
A selector for the preset select box.
Default value
#presetOptions
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
ltmBoxSelector number
A selector for the period selector's container
Default value
#irwLTM
halfyearBoxSelector number
A selector for the period selector's container
Default value
#irwHY
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
.irwhighlightsmultilist .move
removePeriodsSelector string
A selector for the box containing all selected periods
Default value
.irwhighlightsmultilist .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="irwHighlightsChartPrintRow">'+
                    '<div class="irwHighlightsChartPrintButton" 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
.irwHighlightsChartPrintButton
legendItemTpl function
A template for the chart's custom HTML legend items (as seen in S&P) 
'function(seriesColor, seriesTitle) {
               return '<div class="irwHighlightsChartTicker "><span class="irwHighlightsChartTickerColor" style="background-color: ' + 
               seriesColor + 
               '"></span><span class="irwHighlightsChartTickerTitle">'+ 
               seriesTitle  +
               '</span></div>'