| Target | Microsoft.SystemCenter.M365.WatcherNodeApplication |
| Type | Microsoft.SystemCenter.HTMLWidgetType |
| Accessibility | Public |
| Visible | True |
Home
<View ID="Microsoft.SystemCenter.M365.Views.TeamsNetworkAssessmentWidget" Accessibility="Public" Enabled="true" Target="MSM!Microsoft.SystemCenter.M365.WatcherNodeApplication" TypeID="SCI!Microsoft.SystemCenter.HTMLWidgetType" Visible="true">
<Category>Operations</Category>
<WidgetConfiguration>
<Configuration>
{
"widgetDisplay": {
"col": 1,
"row": 1,
"sizex": 13,
"sizey": 10
},
"widgetParameters": {
"html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Teams1</title>\n\n <style>\n\n body {\n overflow: hidden;\n }\n\n .expand {\n width: 50%;\n height: 50%;\n }\n\n .ms-options-wrap,\n .ms-options-wrap * {\n box-sizing: border-box;\n }\n\n .ms-options-wrap > button:focus,\n .ms-options-wrap > button {\n position: relative;\n width: 100%;\n text-align: left;\n border: 1px solid #000000;\n background-color: #fff;\n padding: 5px 20px 5px 5px;\n margin-top: 1px;\n font-size: 13px;\n color: #000000;\n outline-offset: 0px;\n white-space: nowrap;\n }\n\n .ms-options-wrap > button > span {\n display: inline-block;\n }\n\n .ms-options-wrap > button[disabled] {\n background-color: #e5e9ed;\n color: #808080;\n opacity: 0.6;\n }\n\n .ms-options-wrap > button:after {\n content: ' ';\n height: 0;\n position: absolute;\n top: 50%;\n right: 5px;\n width: 0;\n border: 6px solid rgba(0, 0, 0, 0);\n border-top-color: #999;\n margin-top: -3px;\n }\n\n .ms-options-wrap.ms-has-selections > button {\n color: #333;\n }\n\n .ms-options-wrap > .ms-options {\n position: absolute;\n left: 0;\n width: 120%;\n min-height: 150px !important;\n margin-top: 1px;\n margin-bottom: auto;\n background: white;\n z-index: 2000;\n border: 1px solid #aaa;\n overflow: auto;\n visibility: hidden;\n font-family: \"Segoe UI\";\n font-size: 14px;\n font-weight: bold;\n }\n\n .ms-options-wrap.ms-active > .ms-options {\n visibility: visible;\n }\n\n .ms-options-wrap > .ms-options > .ms-search input {\n width: 100%;\n padding: 4px 5px;\n border: none;\n border-bottom: 1px groove;\n outline: none;\n line-height: 25px;\n }\n\n .ms-options-wrap > .ms-options .ms-selectall {\n display: inline-block;\n font-size: .9em;\n text-transform: lowercase;\n text-decoration: none;\n }\n\n .ms-options-wrap > .ms-options .ms-selectall:hover {\n text-decoration: none;\n }\n\n\n\n .ms-options-wrap > .ms-options > .ms-selectall.global {\n margin: 8px 5px;\n }\n\n\n .ms-options-wrap > .ms-options > input[type='checkbox'] {\n }\n\n\n .ms-options-wrap > .ms-options > ul,\n .ms-options-wrap > .ms-options > ul > li.optgroup ul {\n list-style-type: none;\n padding: 0;\n margin: 0;\n }\n\n .ms-options-wrap > .ms-options > ul li.ms-hidden {\n display: none;\n font-family: \"Segoe UI\";\n }\n\n .ms-options-wrap > .ms-options > ul > li.optgroup {\n padding: 5px;\n }\n\n .ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {\n border-top: 1px solid #aaa;\n }\n\n .ms-options-wrap > .ms-options > ul > li.optgroup .label {\n display: block;\n padding: 5px 0 0 0;\n font-weight: bold;\n }\n\n .ms-options-wrap > .ms-options > ul label {\n position: relative;\n display: inline-block;\n width: 100%;\n padding: 4px 4px 4px 20px;\n margin: 1px 0;\n border: 1px dotted transparent;\n }\n\n .ms-options-wrap > .ms-options.checkbox-autofit > ul label,\n .ms-options-wrap > .ms-options.hide-checkbox > ul label {\n padding: 4px;\n }\n\n .ms-options-wrap > .ms-options > ul label.focused,\n .ms-options-wrap > .ms-options > ul label:hover {\n }\n\n .ms-options-wrap > .ms-options > ul li.selected label {\n border-color: transparent;\n }\n\n .ms-options-wrap > .ms-options > ul input[type=\"checkbox\"] {\n margin: 0 5px 0 0;\n position: absolute;\n left: 4px;\n top: 7px;\n }\n\n .ms-options-wrap > .ms-options.hide-checkbox > ul input[type=\"checkbox\"] {\n position: absolute !important;\n height: 1px;\n width: 1px;\n overflow: hidden;\n clip: rect(1px 1px 1px 1px);\n clip: rect(1px, 1px, 1px, 1px);\n }\n\n .teams {\n position: fixed;\n font-family: 'Segoe UI';\n font-weight: bold;\n text-align: center;\n vertical-align: top;\n top: 0%;\n left: 0%;\n font-size: 25px;\n width: 23.28%;\n height: 4%;\n color: blue;\n margin-left: 1rem;\n margin-right: 1rem;\n padding: 0rem;\n }\n\n .timestamp {\n position: fixed;\n font-family: 'Segoe UI';\n color: #000000;\n text-align: center;\n bottom: 0.5%;\n right: 0%;\n margin :0rem;\n font-size: 11px;\n height: 3%;\n width: 40%;\n }\n\n .machine {\n position: fixed;\n left: 42.8%;\n width: 15%;\n height: 29px;\n top: 4%;\n }\n\n .machine1 {\n position: fixed;\n left: 42.8%;\n font-family: \"Segoe UI\";\n font-size: 14px;\n font-weight: bold;\n top: 0%;\n }\n\n .Location {\n position: fixed;\n left: 25.8%;\n width: 15%;\n height: 29px;\n top: 4%;\n }\n\n .Location1 {\n position: fixed;\n left: 25.8%;\n font-family: \"Segoe UI\";\n font-size: 14px;\n font-weight: bold;\n top: 0%;\n }\n\n .Workload2 {\n position: fixed;\n left: 76.8%;\n font-family: \"Segoe UI\";\n font-size: 14px;\n font-weight: bold;\n top: 0%;\n }\n\n .Workload1 {\n position: fixed;\n left: 76.8%;\n z-index: 20;\n top: 4%;\n width: 15%;\n }\n\n .TimePeriod {\n position: fixed;\n left: 59.8%;\n width: 15%;\n height: 29px;\n top: 4%;\n }\n\n .TimePeriod1 {\n position: fixed;\n left: 59.8%;\n top: 0%;\n font-family: \"Segoe UI\";\n font-size: 14px;\n font-weight: bold;\n }\n\n @import 'https://code.highcharts.com/css/highcharts.css';\n\n :root { /* light mode */\n --background-color: #ffffff;\n --text-color: #000000;\n --hilight-color: #000000;\n }\n\n @media (prefers-color-scheme: dark) {\n :root {\n --background-color: #000000;\n --text-color: #ffffff;\n --hilight-color: #ffffff;\n }\n\n /* Some data colors. Light mode uses defaults */\n .highcharts-color-0 {\n fill: #ffffff;\n stroke: #0460ba;\n }\n\n .highcharts-color-1 {\n fill: #ffffff;\n stroke: #9696ab;\n }\n\n .highcharts-title {\n fill: white !important;\n }\n\n .highcharts-tooltip-box {\n fill: #000000 !important;\n }\n\n .highcharts-tooltip text {\n fill: #ffffff !important;\n }\n }\n\n .highcharts-background {\n fill: var(--background-color);\n }\n\n .highcharts-grid-line {\n stroke: var(--text-color);\n stroke-opacity: 0.2;\n }\n\n .highcharts-spline-series rect.highcharts-point {\n stroke: var(--background-color);\n color: var(--text-color);\n }\n\n\n\n\n .card1 {\n padding: 0rem;\n margin: 1rem;\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\n display: flex;\n position: absolute;\n left: 0%;\n width: 23.28%;\n height: 16.946%;\n top: 10%;\n overflow: auto;\n text-align: center;\n display: table-cell;\n font-family: \"Segoe UI\";\n font-size: 22px;\n }\n\n .card1 div:nth-child(2) {\n width: 50px;\n height: 50px;\n /* Center vertically and horizontally */\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -12.5px 0 0 -25px;\n }\n .card2 div:nth-child(2) {\n width: 50px;\n height: 50px;\n /* Center vertically and horizontally */\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -12.5px 0 0 -25px;\n }\n .card3 div:nth-child(2) {\n width: 50px;\n height: 50px;\n /* Center vertically and horizontally */\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -12.5px 0 0 -25px;\n }\n .card4 div:nth-child(2) {\n width: 50px;\n height: 50px;\n /* Center vertically and horizontally */\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -12.5px 0 0 -25px;\n }\n .card5 div:nth-child(2) {\n width: 50px;\n height: 50px;\n /* Center vertically and horizontally */\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -12.5px 0 0 -25px;\n }\n\n\n .card-title {\n font-weight: bolder;\n color: #000000;\n font-family: \"Segoe UI\";\n font-size: 14px;\n }\n\n .card2 {\n padding: 0rem;\n font-family: \"Segoe UI\";\n font-size: 22px;\n margin: 1rem;\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\n display: flex;\n position: absolute;\n left: 0%;\n width: 23.28%;\n height: 16.946%;\n top: 26.946%;\n overflow: auto;\n text-align: center;\n display: table-cell;\n }\n\n .card3 {\n padding: 0rem;\n font-family: \"Segoe UI\";\n font-size: 22px;\n margin: 1rem;\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\n display: flex;\n position: absolute;\n left: 0%;\n width: 23.28%;\n height: 16.946%;\n top: 43.892%;\n overflow: auto;\n text-align: center;\n display: table-cell;\n }\n\n .card4 {\n padding: 0rem;\n font-family: \"Segoe UI\";\n font-size: 22px;\n margin: 1rem;\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\n display: flex;\n position: absolute;\n left: 0%;\n width: 23.28%;\n height: 16.946%;\n top: 60.838%;\n overflow: auto;\n text-align: center;\n display: table-cell;\n }\n\n .card5 {\n padding: 0rem;\n font-family: \"Segoe UI\";\n font-size: 22px;\n margin: 1rem;\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\n display: flex;\n position: absolute;\n left: 0%;\n width: 23.28%;\n height: 16.946%;\n top: 77.784%;\n overflow: auto;\n text-align: center;\n display: table-cell;\n }\n\n div.fixed {\n margin: 1rem;\n position: absolute;\n display: block;\n overflow: auto;\n left: 24.5%;\n width: 73.5%;\n height: 21.1%;\n top: 10%;\n z-index: 10;\n border-bottom: 1px solid;\n box-shadow: 0 0px 8px 0 rgba(0,0,0,0.2);\n }\n\n div.fixed1 {\n margin: 1rem;\n position: absolute;\n display: block;\n overflow: auto;\n left: 24.5%;\n width: 73.5%;\n height: 21.1%;\n top: 31.21%;\n z-index: 5;\n border-bottom: 1px solid;\n box-shadow: 0 0px 8px 0 rgba(0,0,0,0.2);\n }\n\n div.fixed2 {\n margin: 1rem;\n position: absolute;\n display: block;\n overflow: auto;\n left: 24.5%;\n width: 73.5%;\n height: 21.1%;\n top: 52.42%;\n border-bottom: 1px solid;\n box-shadow: 0 0px 8px 0 rgba(0,0,0,0.2);\n }\n\n div.fixed3 {\n margin: 1rem;\n position: absolute;\n display: block;\n overflow: hidden;\n left: 24.5%;\n width: 73.5%;\n height: 21.1%;\n top: 73.63%;\n box-shadow: 0 0px 8px 0 rgba(0,0,0,0.2);\n }\n </style>\n</head>\n<body>\n\n <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n <script src=\"https://code.highcharts.com/highcharts.js\"></script>\n <script src=\"https://code.highcharts.com/modules/accessibility.js\"></script>\n <script src=\"https://code.highcharts.com/modules/exporting.js\"></script>\n <script src=\"https://code.highcharts.com/modules/export-data.js\"></script>\n <script src=\"https://code.highcharts.com/themes/high-contrast-light.js\"></script>\n <script type=\"text/javascript\">\n\n $(window.parent.document).find('.widget-title').hide();\n var requestHeaders = {\n 'Accept': 'application/json',\n \"Content-Type\": \"application/json; charset=UTF-8\"\n\n };\n InitializeCSRFToken();\n function InitializeCSRFToken() {\n var documentcookies = document.cookie.split('; ');\n var result = {};\n for (var i = 0; i < documentcookies.length; i++) {\n var cur = documentcookies[i].split('=');\n result[cur[0]] = cur[1];\n }\n if (result[\"SCOM-CSRF-TOKEN\"] && result[\"SCOM-CSRF-TOKEN\"] != null) {\n requestHeaders[\"SCOM-CSRF-TOKEN\"] = decodeURIComponent(result[\"SCOM-CSRF-TOKEN\"]);\n }\n }\n\nvar performanceData = []; // for last 7 days\nvar performanceData01 = []; // for last 1 month\nvar performanceData1 = [];\nvar performanceData11 = [];\nvar performanceData2 = [];\nvar performanceData21 = [];\nvar performanceData3 = [];\nvar performanceData31 = [];\nvar performanceData4 = [];\nvar performanceData5 = [];\nvar performanceData6 = [];\nvar performanceData7 = [];\nvar WN = [];\nvar WNloc = [];\nvar $ajaxcalls = [];\nvar WNlocchild = [];\nvar select1;\nvar select2;\n\n\n // jquery multiselect\n(function($){\n var defaults = {\n columns: 1, // how many columns should be use to show options\n search : false, // include option search box\n\n // search filter options\n searchOptions : {\n delay : 250, // time (in ms) between keystrokes until search happens\n showOptGroups: false, // show option group titles if no options remaining\n searchText : true, // search within the text\n searchValue : false, // search within the value\n onSearch : function( element ){} // fires on keyup before search on options happens\n },\n\n // plugin texts\n texts: {\n placeholder : 'Select options', // text to use in dummy input\n search : 'Search', // search input placeholder text\n selectedOptions: ' selected', // selected suffix text\n selectAll : ' All', // select all text\n unselectAll : ' Unselect all', // unselect all text\n noneSelected : ' None Selected' // None selected text\n },\n\n // general options\n selectAll : false, // add select all option\n selectGroup : false, // select entire optgroup\n minHeight : 200, // minimum height of option overlay\n maxHeight : null, // maximum height of option overlay\n maxWidth : null, // maximum width of option overlay (or selector)\n maxPlaceholderWidth: null, // maximum width of placeholder button\n maxPlaceholderOpts : 10, // maximum number of placeholder options to show until \"# selected\" shown instead\n showCheckbox : true, // display the checkbox to the user\n checkboxAutoFit : false, // auto calc checkbox padding\n optionAttributes : [], // attributes to copy to the checkbox from the option element\n\n // Callbacks\n onLoad : function( element ){}, // fires at end of list initialization\n onOptionClick : function( element, option ){}, // fires when an option is clicked\n onControlClose: function( element ){}, // fires when the options list is closed\n onSelectAll : function( element, selected ){}, // fires when (un)select all is clicked\n onPlaceholder : function( element, placeholder, selectedOpts ){}, // fires when the placeholder txt is updated\n };\n\n var msCounter = 1; // counter for each select list\n var msOptCounter = 1; // counter for each option on page\n\n // FOR LEGACY BROWSERS (talking to you IE8)\n if( typeof Array.prototype.map !== 'function' ) {\n Array.prototype.map = function( callback, thisArg ) {\n if( typeof thisArg === 'undefined' ) {\n thisArg = this;\n }\n\n return $.isArray( thisArg ) ? $.map( thisArg, callback ) : [];\n };\n }\n if( typeof String.prototype.trim !== 'function' ) {\n String.prototype.trim = function() {\n return this.replace(/^\\s+|\\s+$/g, '');\n };\n }\n\n function MultiSelect( element, options )\n {\n this.element = element;\n this.options = $.extend( true, {}, defaults, options );\n this.updateSelectAll = true;\n this.updatePlaceholder = true;\n this.listNumber = msCounter;\n\n msCounter = msCounter + 1; // increment counter\n\n /* Make sure its a multiselect list */\n if( !$(this.element).attr('multiple') ) {\n throw new Error( '[jQuery-MultiSelect] Select list must be a multiselect list in order to use this plugin' );\n }\n\n /* Options validation checks */\n if( this.options.search ){\n if( !this.options.searchOptions.searchText && !this.options.searchOptions.searchValue ){\n throw new Error( '[jQuery-MultiSelect] Either searchText or searchValue should be true.' );\n }\n }\n\n /** BACKWARDS COMPATIBILITY **/\n if( 'placeholder' in this.options ) {\n this.options.texts.placeholder = this.options.placeholder;\n delete this.options.placeholder;\n }\n if( 'default' in this.options.searchOptions ) {\n this.options.texts.search = this.options.searchOptions['default'];\n delete this.options.searchOptions['default'];\n }\n /** END BACKWARDS COMPATIBILITY **/\n\n // load this instance\n this.load();\n }\n\n MultiSelect.prototype = {\n /* LOAD CUSTOM MULTISELECT DOM/ACTIONS */\n load: function() {\n var instance = this;\n\n // make sure this is a select list and not loaded\n if( (instance.element.nodeName != 'SELECT') || $(instance.element).hasClass('jqmsLoaded') ) {\n return true;\n }\n\n // sanity check so we don't double load on a select element\n $(instance.element).addClass('jqmsLoaded ms-list-'+ instance.listNumber ).data( 'plugin_multiselect-instance', instance );\n\n // add option container\n $(instance.element).after('<div id=\"ms-list-'+ instance.listNumber +'\" class=\"ms-options-wrap\"><button type=\"button\"><span>None Selected</span></button><div class=\"ms-options\"><ul></ul></div></div>');\n\n var placeholder = $(instance.element).siblings('#ms-list-'+ instance.listNumber +'.ms-options-wrap').find('> button:first-child');\n var optionsWrap = $(instance.element).siblings('#ms-list-'+ instance.listNumber +'.ms-options-wrap').find('> .ms-options');\n var optionsList = optionsWrap.find('> ul');\n\n // don't show checkbox (add class for css to hide checkboxes)\n if( !instance.options.showCheckbox ) {\n optionsWrap.addClass('hide-checkbox');\n }\n else if( instance.options.checkboxAutoFit ) {\n optionsWrap.addClass('checkbox-autofit');\n }\n\n // check if list is disabled\n if( $(instance.element).prop( 'disabled' ) ) {\n placeholder.prop( 'disabled', true );\n }\n\n // set placeholder maxWidth\n if( instance.options.maxPlaceholderWidth ) {\n placeholder.css( 'maxWidth', instance.options.maxPlaceholderWidth );\n }\n\n // override with user defined maxHeight\n if( instance.options.maxHeight ) {\n var maxHeight = instance.options.maxHeight;\n }\n else {\n // cacl default maxHeight\n var maxHeight = ($(window).height() - optionsWrap.offset().top + $(window).scrollTop() - 20);\n }\n\n // maxHeight cannot be less than options.minHeight\n maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxHeight;\n\n optionsWrap.css({\n maxWidth : instance.options.maxWidth,\n minHeight: instance.options.minHeight,\n maxHeight: maxHeight,\n });\n\n // isolate options scroll\n // @source: https://github.com/nobleclem/jQuery-IsolatedScroll\n optionsWrap.on( 'touchmove mousewheel DOMMouseScroll', function ( e ) {\n if( ($(this).outerHeight() < $(this)[0].scrollHeight) ) {\n var e0 = e.originalEvent,\n delta = e0.wheelDelta || -e0.detail;\n\n if( ($(this).outerHeight() + $(this)[0].scrollTop) > $(this)[0].scrollHeight ) {\n e.preventDefault();\n this.scrollTop += ( delta < 0 ? 1 : -1 );\n }\n }\n });\n\n // hide options menus if click happens off of the list placeholder button\n $(document).off('click.ms-hideopts').on('click.ms-hideopts', function( event ){\n if( !$(event.target).closest('.ms-options-wrap').length ) {\n $('.ms-options-wrap.ms-active > .ms-options').each(function(){\n $(this).closest('.ms-options-wrap').removeClass('ms-active');\n\n var listID = $(this).closest('.ms-options-wrap').attr('id');\n\n var thisInst = $(this).parent().siblings('.'+ listID +'.jqmsLoaded').data('plugin_multiselect-instance');\n\n // USER CALLBACK\n if( typeof thisInst.options.onControlClose == 'function' ) {\n thisInst.options.onControlClose( thisInst.element );\n }\n });\n }\n // hide open option lists if escape key pressed\n }).on('keydown', function( event ){\n if( (event.keyCode || event.which) == 27 ) { // esc key\n $(this).trigger('click.ms-hideopts');\n }\n });\n\n // handle pressing enter|space while tabbing through\n placeholder.on('keydown', function( event ){\n var code = (event.keyCode || event.which);\n if( (code == 13) || (code == 32) ) { // enter OR space\n placeholder.trigger( 'mousedown' );\n }\n });\n\n // disable button action\n placeholder.on( 'mousedown', function( event ){\n // ignore if its not a left click\n if( event.which && (event.which != 1) ) {\n return true;\n }\n\n // hide other menus before showing this one\n $('.ms-options-wrap.ms-active').each(function(){\n if( $(this).siblings( '.'+ $(this).attr('id') +'.jqmsLoaded')[0] != optionsWrap.parent().siblings('.ms-list-'+ instance.listNumber +'.jqmsLoaded')[0] ) {\n $(this).removeClass('ms-active');\n\n var thisInst = $(this).siblings( '.'+ $(this).attr('id') +'.jqmsLoaded').data('plugin_multiselect-instance');\n\n // USER CALLBACK\n if( typeof thisInst.options.onControlClose == 'function' ) {\n thisInst.options.onControlClose( thisInst.element );\n }\n }\n });\n\n // show/hide options\n optionsWrap.closest('.ms-options-wrap').toggleClass('ms-active');\n\n // recalculate height\n if( optionsWrap.closest('.ms-options-wrap').hasClass('ms-active') ) {\n optionsWrap.css( 'maxHeight', '' );\n\n // override with user defined maxHeight\n if( instance.options.maxHeight ) {\n var maxHeight = instance.options.maxHeight;\n }\n else {\n // cacl default maxHeight\n var maxHeight = ($(window).height() - optionsWrap.offset().top + $(window).scrollTop() - 20);\n }\n\n if( maxHeight ) {\n // maxHeight cannot be less than options.minHeight\n maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxHeight;\n\n optionsWrap.css( 'maxHeight', maxHeight );\n }\n }\n else if( typeof instance.options.onControlClose == 'function' ) {\n instance.options.onControlClose( instance.element );\n }\n }).click(function( event ){ event.preventDefault(); });\n\n // add placeholder copy\n if( instance.options.texts.placeholder ) {\n placeholder.find('span').text( instance.options.texts.placeholder );\n }\n\n // add search box\n if( instance.options.search ) {\n optionsList.before('<div class=\"ms-search\"><input type=\"text\" value=\"\" placeholder=\"'+ instance.options.texts.search +'\" /></div>');\n\n var search = optionsWrap.find('.ms-search input');\n search.on('keyup', function(){\n // ignore keystrokes that don't make a difference\n if( $(this).data('lastsearch') == $(this).val() ) {\n return true;\n }\n\n // pause timeout\n if( $(this).data('searchTimeout') ) {\n clearTimeout( $(this).data('searchTimeout') );\n }\n\n var thisSearchElem = $(this);\n\n $(this).data('searchTimeout', setTimeout(function(){\n thisSearchElem.data('lastsearch', thisSearchElem.val() );\n\n // USER CALLBACK\n if( typeof instance.options.searchOptions.onSearch == 'function' ) {\n instance.options.searchOptions.onSearch( instance.element );\n }\n\n // search non optgroup li's\n var searchString = $.trim( search.val().toLowerCase() );\n if( searchString ) {\n optionsList.find('li[data-search-term*=\"'+ searchString +'\"]:not(.optgroup)').removeClass('ms-hidden');\n optionsList.find('li:not([data-search-term*=\"'+ searchString +'\"], .optgroup)').addClass('ms-hidden');\n }\n else {\n optionsList.find('.ms-hidden').removeClass('ms-hidden');\n }\n\n // show/hide optgroups based on if there are items visible within\n if( !instance.options.searchOptions.showOptGroups ) {\n optionsList.find('.optgroup').each(function(){\n if( $(this).find('li:not(.ms-hidden)').length ) {\n $(this).show();\n }\n else {\n $(this).hide();\n }\n });\n }\n\n instance._updateSelectAllText();\n }, instance.options.searchOptions.delay ));\n });\n }\n\n // add global select all options\n if( instance.options.selectAll ) {\n optionsList.before('<input type=\"checkbox\" href=\"#\" id=\"check1\" class=\"ms-selectall global\">' + instance.options.texts.selectAll + '</input>');\n\n }\n\n\n\n // handle select all option\n optionsWrap.on('click', '.ms-selectall', function( event ){\n // event.preventDefault();\n\n instance.updateSelectAll = false;\n instance.updatePlaceholder = false;\n\n var select = optionsWrap.parent().siblings('.ms-list-'+ instance.listNumber +'.jqmsLoaded');\n\n if( $(this).hasClass('global') ) {\n // check if any options are not selected if so then select them\n if( optionsList.find('li:not(.optgroup, .selected, .ms-hidden) input[type=\"checkbox\"]:not(:disabled)').length ) {\n // get unselected vals, mark as selected, return val list\n optionsList.find('li:not(.optgroup, .selected, .ms-hidden) input[type=\"checkbox\"]:not(:disabled)').closest('li').addClass('selected');\n optionsList.find('li.selected input[type=\"checkbox\"]:not(:disabled)').prop( 'checked', true );\n }\n // deselect everything\n else {\n optionsList.find('li:not(.optgroup, .ms-hidden).selected input[type=\"checkbox\"]:not(:disabled)').closest('li').removeClass('selected');\n optionsList.find('li:not(.optgroup, .ms-hidden, .selected) input[type=\"checkbox\"]:not(:disabled)').prop( 'checked', false );\n }\n }\n else if( $(this).closest('li').hasClass('optgroup') ) {\n var optgroup = $(this).closest('li.optgroup');\n\n // check if any selected if so then select them\n if( optgroup.find('li:not(.selected, .ms-hidden) input[type=\"checkbox\"]:not(:disabled)').length ) {\n optgroup.find('li:not(.selected, .ms-hidden) input[type=\"checkbox\"]:not(:disabled)').closest('li').addClass('selected');\n optgroup.find('li.selected input[type=\"checkbox\"]:not(:disabled)').prop( 'checked', true );\n }\n // deselect everything\n else {\n optgroup.find('li:not(.ms-hidden).selected input[type=\"checkbox\"]:not(:disabled)').closest('li').removeClass('selected');\n optgroup.find('li:not(.ms-hidden, .selected) input[type=\"checkbox\"]:not(:disabled)').prop( 'checked', false );\n }\n }\n\n var vals = [];\n optionsList.find('li.selected input[type=\"checkbox\"]').each(function(){\n vals.push( $(this).val() );\n });\n select.val( vals ).trigger('change');\n\n instance.updateSelectAll = true;\n instance.updatePlaceholder = true;\n\n // USER CALLBACK\n if( typeof instance.options.onSelectAll == 'function' ) {\n instance.options.onSelectAll( instance.element, vals.length );\n }\n\n instance._updateSelectAllText();\n instance._updatePlaceholderText();\n });\n\n // add options to wrapper\n var options = [];\n $(instance.element).children().each(function(){\n if( this.nodeName == 'OPTGROUP' ) {\n var groupOptions = [];\n\n $(this).children('option').each(function(){\n var thisOptionAtts = {};\n for( var i = 0; i < instance.options.optionAttributes.length; i++ ) {\n var thisOptAttr = instance.options.optionAttributes[ i ];\n\n if( $(this).attr( thisOptAttr ) !== undefined ) {\n thisOptionAtts[ thisOptAttr ] = $(this).attr( thisOptAttr );\n }\n }\n\n groupOptions.push({\n name : $(this).text(),\n value : $(this).val(),\n checked: $(this).prop( 'selected' ),\n attributes: thisOptionAtts\n });\n });\n\n options.push({\n label : $(this).attr('label'),\n options: groupOptions\n });\n }\n else if( this.nodeName == 'OPTION' ) {\n var thisOptionAtts = {};\n for( var i = 0; i < instance.options.optionAttributes.length; i++ ) {\n var thisOptAttr = instance.options.optionAttributes[ i ];\n\n if( $(this).attr( thisOptAttr ) !== undefined ) {\n thisOptionAtts[ thisOptAttr ] = $(this).attr( thisOptAttr );\n }\n }\n\n options.push({\n name : $(this).text(),\n value : $(this).val(),\n checked : $(this).prop( 'selected' ),\n attributes: thisOptionAtts\n });\n }\n else {\n // bad option\n return true;\n }\n });\n instance.loadOptions( options, true, false );\n\n // BIND SELECT ACTION\n optionsWrap.on( 'click', 'input[type=\"checkbox\"]', function(){\n $(this).closest( 'li' ).toggleClass( 'selected' );\n\n var select = optionsWrap.parent().siblings('.ms-list-'+ instance.listNumber +'.jqmsLoaded');\n\n // toggle clicked option\n select.find('option[value=\"'+ instance._escapeSelector( $(this).val() ) +'\"]').prop(\n 'selected', $(this).is(':checked')\n ).closest('select').trigger('change');\n\n // USER CALLBACK\n if( typeof instance.options.onOptionClick == 'function' ) {\n instance.options.onOptionClick(instance.element, this);\n }\n\n instance._updateSelectAllText();\n instance._updatePlaceholderText();\n });\n\n // BIND FOCUS EVENT\n optionsWrap.on('focusin', 'input[type=\"checkbox\"]', function(){\n $(this).closest('label').addClass('focused');\n }).on('focusout', 'input[type=\"checkbox\"]', function(){\n $(this).closest('label').removeClass('focused');\n });\n\n // USER CALLBACK\n if( typeof instance.options.onLoad === 'function' ) {\n instance.options.onLoad( instance.element );\n }\n\n // hide native select list\n $(instance.element).hide();\n },\n\n /* LOAD SELECT OPTIONS */\n loadOptions: function( options, overwrite, updateSelect ) {\n overwrite = (typeof overwrite == 'boolean') ? overwrite : true;\n updateSelect = (typeof updateSelect == 'boolean') ? updateSelect : true;\n\n var instance = this;\n var select = $(instance.element);\n var optionsList = select.siblings('#ms-list-'+ instance.listNumber +'.ms-options-wrap').find('> .ms-options > ul');\n var optionsWrap = select.siblings('#ms-list-'+ instance.listNumber +'.ms-options-wrap').find('> .ms-options');\n\n if( overwrite ) {\n optionsList.find('> li').remove();\n\n if( updateSelect ) {\n select.find('> *').remove();\n }\n }\n\n var containers = [];\n for( var key in options ) {\n // Prevent prototype methods injected into options from being iterated over.\n if( !options.hasOwnProperty( key ) ) {\n continue;\n }\n\n var thisOption = options[ key ];\n var container = $('<li/>');\n var appendContainer = true;\n\n // OPTION\n if( thisOption.hasOwnProperty('value') ) {\n if( instance.options.showCheckbox && instance.options.checkboxAutoFit ) {\n container.addClass('ms-reflow');\n }\n\n // add option to ms dropdown\n instance._addOption( container, thisOption );\n\n if( updateSelect ) {\n var selOption = $('<option/>', {\n value: thisOption.value,\n text : thisOption.name\n });\n\n // add custom user attributes\n if( thisOption.hasOwnProperty('attributes') && Object.keys( thisOption.attributes ).length ) {\n selOption.attr( thisOption.attributes );\n }\n\n // mark option as selected\n if( thisOption.checked ) {\n selOption.prop( 'selected', true );\n }\n\n select.append( selOption );\n }\n }\n // OPTGROUP\n else if( thisOption.hasOwnProperty('options') ) {\n var optGroup = $('<optgroup/>', {\n label: thisOption.label\n });\n\n optionsList.find('> li.optgroup > span.label').each(function(){\n if( $(this).text() == thisOption.label ) {\n container = $(this).closest('.optgroup');\n appendContainer = false;\n }\n });\n\n // prepare to append optgroup to select element\n if( updateSelect ) {\n if( select.find('optgroup[label=\"'+ thisOption.label +'\"]').length ) {\n optGroup = select.find('optgroup[label=\"'+ thisOption.label +'\"]');\n }\n else {\n select.append( optGroup );\n }\n }\n\n // setup container\n if( appendContainer ) {\n container.addClass('optgroup');\n container.append('<span class=\"label\">'+ thisOption.label +'</span>');\n container.find('> .label').css({\n clear: 'both'\n });\n\n // add select all link\n if( instance.options.selectGroup ) {\n container.append('<input type=\"checkbox\" href=\"#\" id=\"check1\" class=\"ms-selectall\">' + instance.options.texts.selectAll + '</input>');\n }\n\n container.append('<ul/>');\n }\n\n\n\n for( var gKey in thisOption.options ) {\n // Prevent prototype methods injected into options from\n // being iterated over.\n if( !thisOption.options.hasOwnProperty( gKey ) ) {\n continue;\n }\n\n var thisGOption = thisOption.options[ gKey ];\n var gContainer = $('<li/>');\n if( instance.options.showCheckbox && instance.options.checkboxAutoFit ) {\n gContainer.addClass('ms-reflow');\n }\n\n // no clue what this is we hit (skip)\n if( !thisGOption.hasOwnProperty('value') ) {\n continue;\n }\n\n instance._addOption( gContainer, thisGOption );\n\n container.find('> ul').append( gContainer );\n\n // add option to optgroup in select element\n if( updateSelect ) {\n var selOption = $('<option/>', {\n value: thisGOption.value,\n text : thisGOption.name\n });\n\n // add custom user attributes\n if( thisGOption.hasOwnProperty('attributes') && Object.keys( thisGOption.attributes ).length ) {\n selOption.attr( thisGOption.attributes );\n }\n\n // mark option as selected\n if( thisGOption.checked ) {\n selOption.prop( 'selected', true );\n }\n\n optGroup.append( selOption );\n }\n }\n }\n else {\n // no clue what this is we hit (skip)\n continue;\n }\n\n if( appendContainer ) {\n containers.push( container );\n }\n }\n optionsList.append( containers );\n\n // pad out label for room for the checkbox\n if( instance.options.checkboxAutoFit && instance.options.showCheckbox && !optionsWrap.hasClass('hide-checkbox') ) {\n var chkbx = optionsList.find('.ms-reflow:eq(0) input[type=\"checkbox\"]');\n if( chkbx.length ) {\n var checkboxWidth = chkbx.outerWidth();\n checkboxWidth = checkboxWidth ? checkboxWidth : 15;\n\n optionsList.find('.ms-reflow label').css(\n 'padding-left',\n (parseInt( chkbx.closest('label').css('padding-left') ) * 2) + checkboxWidth\n );\n\n optionsList.find('.ms-reflow').removeClass('ms-reflow');\n }\n }\n\n // update placeholder text\n instance._updatePlaceholderText();\n\n // RESET COLUMN STYLES\n optionsWrap.find('ul').css({\n 'column-count' : '',\n 'column-gap' : '',\n '-webkit-column-count': '',\n '-webkit-column-gap' : '',\n '-moz-column-count' : '',\n '-moz-column-gap' : ''\n });\n\n // COLUMNIZE\n if( select.find('optgroup').length ) {\n // float non grouped options\n optionsList.find('> li:not(.optgroup)').css({\n 'float': 'left',\n width: (100 / instance.options.columns) +'%'\n });\n\n // add CSS3 column styles\n optionsList.find('li.optgroup').css({\n clear: 'both'\n }).find('> ul').css({\n 'column-count' : instance.options.columns,\n 'column-gap' : 0,\n '-webkit-column-count': instance.options.columns,\n '-webkit-column-gap' : 0,\n '-moz-column-count' : instance.options.columns,\n '-moz-column-gap' : 0\n });\n\n // for crappy IE versions float grouped options\n if( this._ieVersion() && (this._ieVersion() < 10) ) {\n optionsList.find('li.optgroup > ul > li').css({\n 'float': 'left',\n width: (100 / instance.options.columns) +'%'\n });\n }\n }\n else {\n // add CSS3 column styles\n optionsList.css({\n 'column-count' : instance.options.columns,\n 'column-gap' : 0,\n '-webkit-column-count': instance.options.columns,\n '-webkit-column-gap' : 0,\n '-moz-column-count' : instance.options.columns,\n '-moz-column-gap' : 0\n });\n\n // for crappy IE versions float grouped options\n if( this._ieVersion() && (this._ieVersion() < 10) ) {\n optionsList.find('> li').css({\n 'float': 'left',\n width: (100 / instance.options.columns) +'%'\n });\n }\n }\n\n // update un/select all logic\n instance._updateSelectAllText();\n },\n\n /* UPDATE MULTISELECT CONFIG OPTIONS */\n settings: function( options ) {\n this.options = $.extend( true, {}, this.options, options );\n this.reload();\n },\n\n /* RESET THE DOM */\n unload: function() {\n $(this.element).siblings('#ms-list-'+ this.listNumber +'.ms-options-wrap').remove();\n $(this.element).show(function(){\n $(this).css('display','').removeClass('jqmsLoaded');\n });\n },\n\n /* RELOAD JQ MULTISELECT LIST */\n reload: function() {\n // remove existing options\n $(this.element).siblings('#ms-list-'+ this.listNumber +'.ms-options-wrap').remove();\n $(this.element).removeClass('jqmsLoaded');\n\n // load element\n this.load();\n },\n\n // RESET BACK TO DEFAULT VALUES & RELOAD\n reset: function() {\n var defaultVals = [];\n $(this.element).find('option').each(function(){\n if( $(this).prop('defaultSelected') ) {\n defaultVals.push( $(this).val() );\n }\n });\n\n $(this.element).val( defaultVals );\n\n this.reload();\n },\n\n disable: function( status ) {\n status = (typeof status === 'boolean') ? status : true;\n $(this.element).prop( 'disabled', status );\n $(this.element).siblings('#ms-list-'+ this.listNumber +'.ms-options-wrap').find('button:first-child')\n .prop( 'disabled', status );\n },\n\n /** PRIVATE FUNCTIONS **/\n // update the un/select all texts based on selected options and visibility\n _updateSelectAllText: function(){\n if( !this.updateSelectAll ) {\n return;\n }\n\n var instance = this;\n\n // select all not used at all so just do nothing\n if( !instance.options.selectAll && !instance.options.selectGroup ) {\n return;\n }\n\n var optionsWrap = $(instance.element).siblings('#ms-list-'+ instance.listNumber +'.ms-options-wrap').find('> .ms-options');\n\n // update un/select all text\n optionsWrap.find('.ms-selectall').each(function(){\n var unselected = $(this).parent().find('li:not(.optgroup,.selected,.ms-hidden)');\n\n $(this).text(\n\n unselected.length ? instance.options.texts.selectAll : instance.options.texts.unselectAll\n );\n });\n },\n\n // update selected placeholder text\n _updatePlaceholderText: function(){\n if( !this.updatePlaceholder ) {\n return;\n }\n\n var instance = this;\n var select = $(instance.element);\n var selectVals = select.val() ? select.val() : [];\n var placeholder = select.siblings('#ms-list-'+ instance.listNumber +'.ms-options-wrap').find('> button:first-child');\n var placeholderTxt = placeholder.find('span');\n var optionsWrap = select.siblings('#ms-list-'+ instance.listNumber +'.ms-options-wrap').find('> .ms-options');\n\n // if there are disabled options get those values as well\n if( select.find('option:selected:disabled').length ) {\n selectVals = [];\n select.find('option:selected').each(function(){\n selectVals.push( $(this).val() );\n });\n }\n\n // get selected options\n var selOpts = [];\n for( var key in selectVals ) {\n // Prevent prototype methods injected into options from being iterated over.\n if( !selectVals.hasOwnProperty( key ) ) {\n continue;\n }\n\n selOpts.push(\n $.trim( select.find('option[value=\"'+ instance._escapeSelector( selectVals[ key ] ) +'\"]').text() )\n );\n\n if( selOpts.length >= instance.options.maxPlaceholderOpts ) {\n break;\n }\n }\n\n // UPDATE PLACEHOLDER TEXT WITH OPTIONS SELECTED\n placeholderTxt.text( selOpts.join( ', ' ) );\n\n if( selOpts.length ) {\n optionsWrap.closest('.ms-options-wrap').addClass('ms-has-selections');\n\n // USER CALLBACK\n if( typeof instance.options.onPlaceholder == 'function' ) {\n instance.options.onPlaceholder( instance.element, placeholderTxt, selOpts );\n }\n }\n else {\n optionsWrap.closest('.ms-options-wrap').removeClass('ms-has-selections');\n }\n\n // replace placeholder text\n if( !selOpts.length ) {\n placeholderTxt.text( instance.options.texts.placeholder );\n }\n // if copy is larger than button width use \"# selected\"\n else if( (placeholderTxt.width() > placeholder.width()) || (selOpts.length != selectVals.length) ) {\n placeholderTxt.text( selectVals.length + instance.options.texts.selectedOptions );\n }\n },\n\n // Add option to the custom dom list\n _addOption: function( container, option ) {\n var instance = this;\n var optionNameText = $('<div/>').html( option.name ).text();\n\n var thisOption = $('<label/>', {\n for : 'ms-opt-'+ msOptCounter\n }).html( option.name );\n\n var thisCheckbox = $('<input>', {\n type : 'checkbox',\n title: optionNameText,\n id : 'ms-opt-'+ msOptCounter,\n value: option.value\n });\n\n // add user defined attributes\n if( option.hasOwnProperty('attributes') && Object.keys( option.attributes ).length ) {\n thisCheckbox.attr( option.attributes );\n }\n\n if( option.checked ) {\n container.addClass('default selected');\n thisCheckbox.prop( 'checked', true );\n }\n\n thisOption.prepend( thisCheckbox );\n\n var searchTerm = '';\n if( instance.options.searchOptions.searchText ) {\n searchTerm += ' ' + optionNameText.toLowerCase();\n }\n if( instance.options.searchOptions.searchValue ) {\n searchTerm += ' ' + option.value.toLowerCase();\n }\n\n container.attr( 'data-search-term', $.trim( searchTerm ) ).prepend( thisOption );\n\n msOptCounter = msOptCounter + 1;\n },\n\n // check ie version\n _ieVersion: function() {\n var myNav = navigator.userAgent.toLowerCase();\n return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;\n },\n\n // escape selector\n _escapeSelector: function( string ) {\n if( typeof $.escapeSelector == 'function' ) {\n return $.escapeSelector( string );\n }\n else {\n return string.replace(/[!\"#$%&'()*+,.\\/:;<=>?@[\\\\\\]^`{|}~]/g, \"\\\\$&\");\n }\n }\n };\n\n // ENABLE JQUERY PLUGIN FUNCTION\n $.fn.multiselect = function( options ){\n if( !this.length ) {\n return;\n }\n\n var args = arguments;\n var ret;\n\n // menuize each list\n if( (options === undefined) || (typeof options === 'object') ) {\n return this.each(function(){\n if( !$.data( this, 'plugin_multiselect' ) ) {\n $.data( this, 'plugin_multiselect', new MultiSelect( this, options ) );\n }\n });\n } else if( (typeof options === 'string') && (options[0] !== '_') && (options !== 'init') ) {\n this.each(function(){\n var instance = $.data( this, 'plugin_multiselect' );\n\n if( instance instanceof MultiSelect && typeof instance[ options ] === 'function' ) {\n ret = instance[ options ].apply( instance, Array.prototype.slice.call( args, 1 ) );\n }\n\n // special destruct handler\n if( options === 'unload' ) {\n $.data( this, 'plugin_multiselect', null );\n }\n });\n\n return ret;\n }\n };\n}(jQuery));\n // end of jquery multiselect\n\n window.onload = function () {\n\n $(\"#wait1\").css(\"display\", \"block\");\n $(\"#wait2\").css(\"display\", \"block\");\n $(\"#wait3\").css(\"display\", \"block\");\n $(\"#wait4\").css(\"display\", \"block\");\n $(\"#wait6\").css(\"display\", \"block\");\n $(\"#wait7\").css(\"display\", \"block\");\n $(\"#wait8\").css(\"display\", \"block\");\n $(\"#wait9\").css(\"display\", \"block\");\n\n$(document).ajaxStart(function(){\n // Show image container\n \n $(\"#wait10\").css(\"display\", \"block\");\n $(\"#wait11\").css(\"display\", \"block\");\n $(\"#wait12\").css(\"display\", \"block\");\n $(\"#wait13\").css(\"display\", \"block\");\n $(\"#wait14\").css(\"display\", \"block\");\n $(\"#wait15\").css(\"display\", \"block\");\n $(\"#wait16\").css(\"display\", \"block\");\n $(\"#wait17\").css(\"display\", \"block\");\n $(\"#wait18\").css(\"display\", \"block\");\n \n});\n\n Promise.all([ajax1(),ajax2()]).then(() => { \n \n \n $.when.apply(null, $ajaxcalls).then(function() {\n \n // Pick up the name from WNloc\n dname = WNloc.map(function (obj11) {\n return obj11.z;\n });\n\n // Add support for if user excludes monitoring Teams\nvar InheritName = [];\n\nparentname1 = WNlocchild.map(function (obj11) {\n return obj11.parentname;\n });\n\nchildId1 = WNlocchild.map(function (obj11) {\n return obj11.childId;\n });\n\nfor(var i=0; i< dname.length; i++){\n for(var j=0; j<parentname1.length; j++){\n if(dname[i]==parentname1[j]){\n InheritName.push({pname:dname[i], cId:childId1[j]}); \n }\n }\n\n if(parentname1.indexOf(dname[i])== -1){\n InheritName.push({pname: dname[i], cId: null});\n }\n\n}\n\n//End\n\n\n //function for order\n function mapOrder(array, order, key) {\n\n array.sort(function (a, b) {\n var A = a[key],\n B = b[key];\n\n if (order.indexOf(A) > order.indexOf(B)) {\n return 1;\n } else {\n return -1;\n }\n\n });\n\n return array;\n };\n\n WNlocchildordered = [];\n WNlocchildordered = mapOrder(InheritName, dname, 'pname'); // ordered WNlocchild\n\n childId = WNlocchildordered.map(function (obj11) {\n return obj11.cId;\n });\n\n\n select1 = document.getElementById('selectlocation');\n select2 = select1.options[select1.selectedIndex].value;\n\n\n // Return indexes for selection in location to populate watcher node dropdown\n\n var finalmachines = [];\n\n function getAllIndexes(arr, val) {\n var indexes = [],\n i;\n for (i = 0; i < arr.length; i++)\n if (arr[i] === val)\n indexes.push(i);\n return indexes;\n }\n var indexes = [];\n indexes = getAllIndexes(loc1, select2); // value selected in location dropdown and array to check\n \n for (var ind = 0; ind < indexes.length; ind++) {\n // get list of machine names for selected indexes\n finalmachines.push(mName1[indexes[ind]]);\n\n } // for loop close for indexes machines\n\n // Add dropdown for machine names\n var dropdown1 = document.getElementById(\"selectmachine\");\n\n // Loop through the array\n for (var j4 = 0; j4 < finalmachines.length; ++j4) {\n dropdown1[dropdown1.length] = new Option(finalmachines[j4], finalmachines[j4]);\n }\n\n // what is selected in machine name\n var selectedmachine = document.getElementById('selectmachine');\n var selectedmachine1 = selectedmachine.options[selectedmachine.selectedIndex].value;\n \n var b = mName1.indexOf(selectedmachine1);\n var mId = childId[b];\n fmonitors(mId);\n fPerf(select2, selectedmachine1);\n\n selectedmachine.addEventListener('change', (e) => {\n selectedmachine1 = e.target.value;\n var b = mName1.indexOf(selectedmachine1);\n var mId = childId[b];\n fmonitors(mId);\n fPerf(select2, selectedmachine1);\n }, {\n passive: false\n });\n //end\n\n select1.addEventListener('change', (e) => {\n select2 = e.target.value;\n var indexes = [];\n finalmachines = [];\n indexes = getAllIndexes(loc1, select2); // value selected in location dropdown and array to check\n \n for (var ind = 0; ind < indexes.length; ind++) {\n // get list of machine names for selected indexes\n finalmachines.push(mName1[indexes[ind]]);\n } // for loop close for indexes machines\n\n // Add dropdown for machine names\n var dropdown = document.getElementById(\"selectmachine\");\n dropdown.length = 0;\n\n // Loop through the array\n for (var j4 = 0; j4 < finalmachines.length; ++j4) {\n dropdown[dropdown.length] = new Option(finalmachines[j4], finalmachines[j4]);\n }\n\n // what is selected in machine name\n\n var selectedmachine = document.getElementById('selectmachine');\n var selectedmachine1 = selectedmachine.options[selectedmachine.selectedIndex].value;\n var b = mName1.indexOf(selectedmachine1);\n var mId = childId[b];\n fmonitors(mId);\n fPerf(select2, selectedmachine1);\n\n }, {\n passive: false\n }); // event listener close\n\n \n\n // function for list of monitors in mId\n function fmonitors(mId) {\n var finalState;\n $(document).ajaxStart(function(){\n // Show image container\n \n \n if(mId !== null) {\n $(\"#wait14\").css(\"display\", \"none\");\n $(\"#wait19\").css(\"display\", \"block\");\n }\n if(mId == null) {\n $(\"#wait14\").css(\"display\", \"none\");\n $(\"#wait19\").css(\"display\", \"none\");\n }\n \n});\n if(mId !== null){\n \n $(\"#wait5\").css(\"display\", \"block\");\n \n }\n\n if(mId == null){\n \n\n // Card1\n \n var element = document.getElementById('container');\n element.removeChild(element.childNodes[2]); \n const card = document.createElement('div');\n let name = document.createTextNode(\"N/A\");\n card.appendChild(name);\n\n let container = document.querySelector(\"#container\");\n container.appendChild(card);\n \n\n }\n else {\n\n $.ajax({\n url: \"/OperationsManager/data/object/monitors\",\n type: \"POST\",\n headers: requestHeaders,\n data: JSON.stringify({\n \"Id\": mId,\n \"showUnhealthyMonitorsOnly\": false\n\n }),\n success: function (result) {\n\n for (var k = 0; k < result.rows.length; k++) {\n if (result.rows[k].displayname == 'M365 Teams Network Assessment Status Monitor') {\n var state = result.rows[k].state;\n \n }\n } // for loop close\n \n var state0 = state.toLowerCase(); \n var state01;\n \n if(state0.match((\"StatusOkComplete\").toLowerCase())){\n state01 = \"Healthy\"} \n else if(state0.match((\"critical\").toLowerCase())){\n state01=\"Critical\"} \n else if(state0.match((\"warning\").toLowerCase())){\n state01=\"Warning\"} \n else if(state0.match((\"StatusUnknownGreen\").toLowerCase())){\n state01=\"Uninitialized\"}\n else{\n state01=\"Unknown\"} \n \n \n var element = document.getElementById('container');\n element.removeChild(element.childNodes[2]);\n\n const card = document.createElement('div');\n var img = document.createElement('img');\n img.src = state\n img.className = \"expand\";\n \n \n img.alt = state01;\n img.title = state01;\n card.appendChild(img);\n\n let container = document.querySelector(\"#container\");\n container.appendChild(card);\n \n $(\"#wait5\").css(\"display\", \"none\");\n $(\"#wait14\").css(\"display\", \"none\");\n $(\"#wait19\").css(\"display\", \"none\"); \n } // success close\n });\n } //else end\n }\n // end of monitors function\n\n\n // start of top Ajax\n function fPerf(select2, selectedmachine1) {\n $.ajax({\n url: \"/OperationsManager/data/performance\",\n type: \"POST\",\n headers: requestHeaders,\n data: JSON.stringify({\n \"id\": \"6f7e3306-beeb-2996-3795-7c1eafb925b8\",\n \"performanceCounters\": [{\n \"objectname\": \"Microsoft 365 Teams\",\n \"countername\": \"Average Jitter (ms)\",\n \"instancename\": select2\n },\n {\n \"objectname\": \"Microsoft 365 Teams\",\n \"countername\": \"Round Trip Latency (ms)\",\n \"instancename\": select2\n },\n {\n \"objectname\": \"Microsoft 365 Teams\",\n \"countername\": \"Packet Loss Rate\",\n \"instancename\": select2\n },\n {\n \"objectname\": \"Microsoft 365 Teams\",\n \"countername\": \"Packet Reorder Ratio\",\n \"instancename\": select2\n }\n\n\n\n ],\n \"legends\": [\n \"target\",\n \"path\",\n \"lastvalue\"\n ],\n \"duration\": 43200\n }),\n\n success: function (result) {\n \n //clear arrays\n performanceData = []; // for last 7 days\n performanceData01 = []; // for last 1 month\n performanceData1 = [];\n performanceData11 = [];\n performanceData2 = [];\n performanceData21 = [];\n performanceData3 = [];\n performanceData31 = [];\n let dataDictionary;\n let dataDictionary1;\n let dataDictionary2;\n let dataDictionary3;\n\n // Add Timestamp\n let tDate6 = new Date();\n var element = document.getElementById('container6');\n element.removeChild(element.firstChild);\n const card6 = document.createElement('div');\n let name6 = document.createTextNode(tDate6);\n card6.appendChild(name6);\n\n let container6 = document.querySelector(\"#container6\");\n container6.appendChild(card6);\n\n // populate dictionaries for multiple watcher node support\n\n for (var d1 = 0; d1 < result.legends.rows.length; d1++) {\n if (result.legends.rows[d1].performancecounter == \"Average Jitter (ms)\") {\n var perfmname = result.legends.rows[d1].target;\n if (perfmname == selectedmachine1) {\n dataDictionary = result.datasets[d1].data;\n }\n }\n }\n\n for (var d2 = 0; d2 < result.legends.rows.length; d2++) {\n if (result.legends.rows[d2].performancecounter == \"Round Trip Latency (ms)\") {\n var perfmname = result.legends.rows[d2].target;\n if (perfmname == selectedmachine1) {\n dataDictionary1 = result.datasets[d2].data;\n }\n }\n }\n\n for (var d3 = 0; d3 < result.legends.rows.length; d3++) {\n if (result.legends.rows[d3].performancecounter == \"Packet Loss Rate\") {\n var perfmname = result.legends.rows[d3].target;\n if (perfmname == selectedmachine1) {\n dataDictionary2 = result.datasets[d3].data;\n }\n }\n }\n\n for (var d4 = 0; d4 < result.legends.rows.length; d4++) {\n if (result.legends.rows[d4].performancecounter == \"Packet Reorder Ratio\") {\n var perfmname = result.legends.rows[d4].target;\n if (perfmname == selectedmachine1) {\n dataDictionary3 = result.datasets[d4].data;\n }\n }\n }\n let sum = new Array(32).fill(0.0);\n let sum1 = new Array(32).fill(0.0);\n let sum2 = new Array(32).fill(0.0);\n let sum3 = new Array(32).fill(0.0);\n\n let count = new Array(32).fill(0.0);\n let count1 = new Array(32).fill(0.0);\n let count2 = new Array(32).fill(0.0);\n let count3 = new Array(32).fill(0.0);\n\n for (var key in dataDictionary) {\n if (dataDictionary.hasOwnProperty(key)) {\n var datetime = new Date(key);\n datetime = convertUTCDateToLocalDate(datetime);\n sum[datetime.getDate()] += dataDictionary[key];\n count[datetime.getDate()]++;\n }\n }\n\n for (var key1 in dataDictionary1) {\n if (dataDictionary1.hasOwnProperty(key1)) {\n var datetime1 = new Date(key1);\n datetime1 = convertUTCDateToLocalDate(datetime1);\n sum1[datetime1.getDate()] += dataDictionary1[key1];\n count1[datetime1.getDate()]++;\n }\n }\n\n for (var key2 in dataDictionary2) {\n if (dataDictionary2.hasOwnProperty(key2)) {\n var datetime2 = new Date(key2);\n datetime2 = convertUTCDateToLocalDate(datetime2);\n sum2[datetime2.getDate()] += dataDictionary2[key2];\n count2[datetime2.getDate()]++;\n }\n }\n\n for (var key3 in dataDictionary3) {\n if (dataDictionary3.hasOwnProperty(key3)) {\n var datetime3 = new Date(key3);\n datetime3 = convertUTCDateToLocalDate(datetime3);\n sum3[datetime3.getDate()] += dataDictionary3[key3];\n count3[datetime3.getDate()]++;\n }\n }\n\n\n let tDate = new Date();\n tDate.setDate(tDate.getDate() - 6);\n let tDate01 = new Date(); //common\n let tDate02 = new Date();\n tDate02 = new Date(tDate02.setMonth(tDate02.getMonth() - 1));\n tDate02.setDate(tDate02.getDate() + 1);\n\n let tDate1 = new Date();\n tDate1.setDate(tDate1.getDate() - 6);\n let tDate11 = new Date(); //common\n let tDate12 = new Date();\n tDate12 = new Date(tDate12.setMonth(tDate12.getMonth() - 1));\n tDate12.setDate(tDate12.getDate() + 1);\n\n let tDate2 = new Date();\n tDate2.setDate(tDate2.getDate() - 6);\n let tDate21 = new Date(); //common\n let tDate22 = new Date();\n tDate22 = new Date(tDate22.setMonth(tDate22.getMonth() - 1));\n tDate22.setDate(tDate22.getDate() + 1);\n\n let tDate3 = new Date();\n tDate3.setDate(tDate3.getDate() - 6);\n let tDate31 = new Date(); //common\n let tDate32 = new Date();\n tDate32 = new Date(tDate32.setMonth(tDate32.getMonth() - 1));\n tDate32.setDate(tDate32.getDate() + 1);\n\n\n // Widget 1\n //Week Array\n if (tDate.getDate() > tDate01.getDate()) {\n for (var i03 = tDate.getDate(); i03 <= 31; i03++) {\n performanceData.push({\n y: parseFloat((sum[i03] / count[i03]).toFixed(2)),\n x: new Date(tDate)\n });\n\n tDate.setDate(tDate.getDate() + 1);\n if (tDate.getDate() <= tDate01.getDate()) {\n break;\n }\n }\n }\n if (tDate.getDate() <= tDate01.getDate()) {\n for (var i = tDate.getDate(); i < tDate01.getDate() + 1; i++) {\n performanceData.push({\n y: parseFloat((sum[i] / count[i]).toFixed(2)),\n x: new Date(tDate)\n });\n tDate.setDate(tDate.getDate() + 1);\n }\n }\n //Month Array\n if (tDate02.getDate() > tDate01.getDate()) {\n for (var i01 = tDate02.getDate(); i01 <= 31; i01++) {\n performanceData01.push({\n y: parseFloat((sum[i01] / count[i01]).toFixed(2)),\n x: new Date(tDate02)\n });\n\n tDate02.setDate(tDate02.getDate() + 1);\n if (tDate02.getDate() <= tDate01.getDate()) {\n break;\n }\n }\n }\n if (tDate02.getDate() <= tDate01.getDate()) {\n for (var i02 = tDate02.getDate(); i02 < tDate01.getDate() + 1; i02++) {\n performanceData01.push({\n y: parseFloat((sum[i02] / count[i02]).toFixed(2)),\n x: new Date(tDate02)\n });\n tDate02.setDate(tDate02.getDate() + 1);\n }\n }\n\n // Widget 2\n\n // Week Array\n if (tDate1.getDate() > tDate11.getDate()) {\n for (var i13 = tDate1.getDate(); i13 <= 31; i13++) {\n performanceData1.push({\n y: parseFloat((sum1[i13] / count1[i13]).toFixed(2)),\n x: new Date(tDate1)\n });\n\n tDate1.setDate(tDate1.getDate() + 1);\n if (tDate1.getDate() <= tDate11.getDate()) {\n break;\n }\n }\n }\n if (tDate1.getDate() <= tDate11.getDate()) {\n for (var i1 = tDate1.getDate(); i1 < tDate11.getDate() + 1; i1++) {\n performanceData1.push({\n y: parseFloat((sum1[i1] / count1[i1]).toFixed(2)),\n x: new Date(tDate1)\n });\n tDate1.setDate(tDate1.getDate() + 1);\n }\n }\n // Month Array\n if (tDate12.getDate() > tDate11.getDate()) {\n for (var i11 = tDate12.getDate(); i11 <= 31; i11++) {\n performanceData11.push({\n y: parseFloat((sum1[i11] / count1[i11]).toFixed(2)),\n x: new Date(tDate12)\n });\n\n tDate12.setDate(tDate12.getDate() + 1);\n if (tDate12.getDate() <= tDate11.getDate()) {\n break;\n }\n }\n }\n if (tDate12.getDate() <= tDate11.getDate()) {\n for (var i12 = tDate12.getDate(); i12 < tDate11.getDate() + 1; i12++) {\n performanceData11.push({\n y: parseFloat((sum1[i12] / count1[i12]).toFixed(2)),\n x: new Date(tDate12)\n });\n tDate12.setDate(tDate12.getDate() + 1);\n }\n }\n // Widget 3\n // Weekly\n if (tDate2.getDate() > tDate21.getDate()) {\n for (var i23 = tDate2.getDate(); i23 <= 31; i23++) {\n performanceData2.push({\n y: parseFloat((sum2[i23] / count2[i23]).toFixed(4)),\n x: new Date(tDate2)\n });\n\n tDate2.setDate(tDate2.getDate() + 1);\n if (tDate2.getDate() <= tDate21.getDate()) {\n break;\n }\n }\n }\n if (tDate2.getDate() <= tDate21.getDate()) {\n for (var i2 = tDate2.getDate(); i2 < tDate21.getDate() + 1; i2++) {\n performanceData2.push({\n y: parseFloat((sum2[i2] / count2[i2]).toFixed(4)),\n x: new Date(tDate2)\n });\n tDate2.setDate(tDate2.getDate() + 1);\n }\n }\n // Monthly\n if (tDate22.getDate() > tDate21.getDate()) {\n for (var i21 = tDate22.getDate(); i21 <= 31; i21++) {\n performanceData21.push({\n y: parseFloat((sum2[i21] / count2[i21]).toFixed(4)),\n x: new Date(tDate22)\n });\n\n tDate22.setDate(tDate22.getDate() + 1);\n if (tDate22.getDate() <= tDate21.getDate()) {\n break;\n }\n }\n }\n if (tDate22.getDate() <= tDate21.getDate()) {\n for (var i22 = tDate22.getDate(); i22 < tDate21.getDate() + 1; i22++) {\n performanceData21.push({\n y: parseFloat((sum2[i22] / count2[i22]).toFixed(4)),\n x: new Date(tDate22)\n });\n tDate22.setDate(tDate22.getDate() + 1);\n }\n }\n\n // Widget 4\n // Weekly\n if (tDate3.getDate() > tDate31.getDate()) {\n for (var i33 = tDate3.getDate(); i33 <= 31; i33++) {\n performanceData3.push({\n y: parseFloat((sum3[i33] / count3[i33]).toFixed(4)),\n x: new Date(tDate3)\n });\n\n tDate3.setDate(tDate3.getDate() + 1);\n if (tDate3.getDate() <= tDate31.getDate()) {\n break;\n }\n }\n }\n if (tDate3.getDate() <= tDate31.getDate()) {\n for (var i3 = tDate3.getDate(); i3 < tDate31.getDate() + 1; i3++) {\n performanceData3.push({\n y: parseFloat((sum3[i3] / count3[i3]).toFixed(4)),\n x: new Date(tDate3)\n });\n tDate3.setDate(tDate3.getDate() + 1);\n }\n }\n \n // Monthly\n if (tDate32.getDate() > tDate31.getDate()) {\n for (var i31 = tDate32.getDate(); i31 <= 31; i31++) {\n performanceData31.push({\n y: parseFloat((sum3[i31] / count3[i31]).toFixed(4)),\n x: new Date(tDate32)\n });\n\n tDate32.setDate(tDate32.getDate() + 1);\n if (tDate32.getDate() <= tDate31.getDate()) {\n break;\n }\n }\n }\n if (tDate32.getDate() <= tDate31.getDate()) {\n for (var i32 = tDate32.getDate(); i32 < tDate31.getDate() + 1; i32++) {\n performanceData31.push({\n y: parseFloat((sum3[i32] / count3[i32]).toFixed(4)),\n x: new Date(tDate32)\n });\n tDate32.setDate(tDate32.getDate() + 1);\n }\n }\n\n\n\n\n // RenderGraphs();\n\n\n\n $(function () {\n\n\n\n $('select[multiple].active.3col').change(function () {\n\n // var sel = $(this).children(\"option\").filter(\":selected\").text();\n\n var sel = $('select[multiple].active.3col').val();\n selection(sel);\n\n });\n });\n\n\n\n function selection(sel) {\n if (sel !== null) {\n if (sel.length == 4) {\n $(\"#check1\").prop(\"checked\", true);\n }\n\n }\n if (sel.length < 4) {\n $(\"#check1\").prop(\"checked\", false);\n }\n\n if (sel !== null) {\n if ((sel.length == 3) && (sel.indexOf(\"AverageJitter\") !== -1) && (sel.indexOf(\"RoundTripLatency\") !== -1) && (sel.indexOf(\"PacketReorderRatio\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"block\";\n s1.style.top = \"10%\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"block\";\n s2.style.top = \"31.21%\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"none\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"block\";\n s4.style.top = \"52.42%\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"visible\";\n s12.style.top = \"26.946%\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"visible\";\n s22.style.top = \"43.892%\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"hidden\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"visible\";\n s42.style.top = \"60.838%\";\n\n } // end of if\n } //end\n\n if (sel !== null) {\n if ((sel.length == 3) && (sel.indexOf(\"AverageJitter\") !== -1) && (sel.indexOf(\"PacketLossRate\") !== -1) && (sel.indexOf(\"PacketReorderRatio\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"none\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"block\";\n s2.style.top = \"10%\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"block\";\n s3.style.top = \"31.21%\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"block\";\n s4.style.top = \"52.42%\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"hidden\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"visible\";\n s22.style.top = \"26.946%\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"visible\";\n s32.style.top = \"43.892%\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"visible\";\n s42.style.top = \"60.838%\";\n\n } // end of if\n }\n\n if (sel !== null) {\n if ((sel.length == 3) && (sel.indexOf(\"RoundTripLatency\") !== -1) && (sel.indexOf(\"PacketLossRate\") !== -1) && (sel.indexOf(\"PacketReorderRatio\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"block\";\n s1.style.top = \"10%\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"none\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"block\";\n s3.style.top = \"31.21%\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"block\";\n s4.style.top = \"52.42%\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"visible\";\n s12.style.top = \"26.946%\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"hidden\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"visible\";\n s32.style.top = \"43.892%\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"visible\";\n s42.style.top = \"60.838%\";\n\n } // end of if\n } //end\n\n if (sel !== null) {\n if ((sel.length == 3) && (sel.indexOf(\"RoundTripLatency\") !== -1) && (sel.indexOf(\"AverageJitter\") !== -1) && (sel.indexOf(\"PacketLossRate\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"block\";\n s1.style.top = \"10%\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"block\";\n s2.style.top = \"31.21%\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"block\";\n s3.style.top = \"52.42%\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"none\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"visible\";\n s12.style.top = \"26.946%\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"visible\";\n s22.style.top = \"43.892%\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"visible\";\n s32.style.top = \"60.838%\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"hidden\";\n\n } // end of if\n } //end\n\n if (sel !== null) {\n if ((sel.length == 2) && (sel.indexOf(\"AverageJitter\") !== -1) && (sel.indexOf(\"PacketReorderRatio\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"none\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"block\";\n s2.style.top = \"10%\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"none\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"block\";\n s4.style.top = \"31.21%\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"hidden\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"visible\";\n s22.style.top = \"26.946%\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"hidden\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"visible\";\n s42.style.top = \"43.892%\";\n\n } // end of if\n } // end\n\n if (sel !== null) {\n if ((sel.length == 2) && (sel.indexOf(\"RoundTripLatency\") !== -1) && (sel.indexOf(\"PacketReorderRatio\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"block\";\n s1.style.top = \"10%\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"none\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"none\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"block\";\n s4.style.top = \"31.21%\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"visible\";\n s12.style.top = \"26.946%\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"hidden\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"hidden\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"visible\";\n s42.style.top = \"43.892%\";\n\n } // end of if\n } // end\n\n if (sel !== null) {\n if ((sel.length == 2) && (sel.indexOf(\"RoundTripLatency\") !== -1) && (sel.indexOf(\"PacketLossRate\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"block\";\n s1.style.top = \"10%\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"none\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"block\";\n s3.style.top = \"31.21%\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"none\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"visible\";\n s12.style.top = \"26.946%\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"hidden\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"visible\";\n s32.style.top = \"43.892%\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"hidden\";\n\n } // end of if\n } // end\n\n if (sel !== null) {\n if ((sel.length == 2) && (sel.indexOf(\"PacketLossRate\") !== -1) && (sel.indexOf(\"PacketReorderRatio\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"none\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"none\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"block\";\n s3.style.top = \"10%\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"block\";\n s4.style.top = \"31.21%\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"hidden\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"hidden\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"visible\";\n s32.style.top = \"26.946%\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"visible\";\n s42.style.top = \"43.892%\";\n\n } // end of if\n } // end\n\n\n if (sel !== null) {\n if ((sel.length == 2) && (sel.indexOf(\"AverageJitter\") !== -1) && (sel.indexOf(\"PacketLossRate\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"none\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"block\";\n s2.style.top = \"10%\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"block\";\n s3.style.top = \"31.21%\"\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"none\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"hidden\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"visible\";\n s22.style.top = \"26.946%\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"visible\";\n s32.style.top = \"43.892%\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"hidden\";\n\n } // end of if\n } // end\n\n if (sel !== null) {\n if ((sel.length == 2) && (sel.indexOf(\"RoundTripLatency\") !== -1) && (sel.indexOf(\"AverageJitter\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"block\";\n s1.style.top = \"10%\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"block\";\n s2.style.top = \"31.21%\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"none\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"none\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"visible\";\n s12.style.top = \"26.946%\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"visible\";\n s22.style.top = \"43.892%\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"hidden\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"hidden\";\n\n } // end of if\n } //end\n\n if (sel !== null) {\n if ((sel.length == 1) && (sel.indexOf(\"RoundTripLatency\") !== -1)) {\n\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"block\";\n s1.style.top = \"10%\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"none\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"none\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"none\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"visible\";\n s12.style.top = \"26.946%\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"hidden\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"hidden\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"hidden\";\n\n }\n } //end\n\n if (sel != null) {\n if ((sel.length == 1) && (sel.indexOf(\"AverageJitter\") !== -1)) {\n\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"block\";\n s2.style.top = \"10%\";\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"none\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"none\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"none\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"hidden\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"visible\";\n s22.style.top = \"26.946%\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"hidden\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"hidden\";\n\n }\n } //end\n\n if (sel !== null) {\n if ((sel.length == 1) && (sel.indexOf(\"PacketLossRate\") !== -1)) {\n\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"block\";\n s3.style.top = \"10%\";\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"none\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"none\";\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"none\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"hidden\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"hidden\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"visible\";\n s32.style.top = \"26.946%\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"hidden\";\n\n }\n } //end\n\n if (sel !== null) {\n if ((sel.length == 1) && (sel.indexOf(\"PacketReorderRatio\") !== -1)) {\n\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"block\";\n s4.style.top = \"10%\";\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"none\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"none\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"none\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"hidden\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"hidden\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"hidden\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"visible\";\n s42.style.top = \"26.946%\";\n\n }\n } //end\n\n if (sel.length == 0) {\n var select = document.getElementById('select');\n // Check which value is selected in time period\n var month = select.options[select.selectedIndex].value;\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"block\";\n s4.style.top = \"75.95%\";\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"block\";\n s1.style.top = \"10%\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"block\";\n s2.style.top = \"31.21%\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"block\";\n s3.style.top = \"52.42%\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"visible\";\n s12.style.top = \"26.946%\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"visible\";\n s22.style.top = \"43.892%\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"visible\";\n s32.style.top = \"60.838%\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"visible\";\n s42.style.top = \"77.784%\";\n\n }\n\n if (sel !== null) {\n if ((sel.length == 4) && (sel.indexOf(\"RoundTripLatency\") !== -1) && (sel.indexOf(\"PacketLossRate\") !== -1) && (sel.indexOf(\"PacketReorderRatio\") !== -1) && (sel.indexOf(\"AverageJitter\") !== -1)) {\n\n var s4 = document.getElementById('chartContainer3');\n s4.style.display = \"block\";\n s4.style.top = \"75.95%\";\n var s1 = document.getElementById('chartContainer');\n s1.style.display = \"block\";\n s1.style.top = \"10%\";\n var s2 = document.getElementById('chartContainer1');\n s2.style.display = \"block\";\n s2.style.top = \"31.21%\";\n var s3 = document.getElementById('chartContainer2');\n s3.style.display = \"block\";\n s3.style.top = \"52.42%\";\n\n var s12 = document.getElementById('container1');\n s12.style.visibility = \"visible\";\n s12.style.top = \"26.946%\";\n var s22 = document.getElementById('container2');\n s22.style.visibility = \"visible\";\n s22.style.top = \"43.892%\";\n var s32 = document.getElementById('container3');\n s32.style.visibility = \"visible\";\n s32.style.top = \"60.838%\";\n var s42 = document.getElementById('container4');\n s42.style.visibility = \"visible\";\n s42.style.top = \"77.784%\";\n\n }\n } //end of if\n } // selection function ends\n\n\n function RenderGraphs() {\n var select = document.getElementById('select');\n // Check which value is selected in time period\n var month = select.options[select.selectedIndex].value;\n \n\n renderChart(month);\n renderChart1(month);\n renderChart2(month);\n renderChart3(month);\n }\n\n // Ajax query for last 24 hours\n $.ajax({\n url: \"/OperationsManager/data/performance\",\n type: \"POST\",\n headers: requestHeaders,\n data: JSON.stringify({\n \"id\": \"6f7e3306-beeb-2996-3795-7c1eafb925b8\",\n \"performanceCounters\": [{\n \"objectname\": \"Microsoft 365 Teams\",\n \"countername\": \"Average Jitter (ms)\",\n \"instancename\": select2\n },\n {\n \"objectname\": \"Microsoft 365 Teams\",\n \"countername\": \"Round Trip Latency (ms)\",\n \"instancename\": select2\n },\n {\n \"objectname\": \"Microsoft 365 Teams\",\n \"countername\": \"Packet Loss Rate\",\n \"instancename\": select2\n },\n {\n \"objectname\": \"Microsoft 365 Teams\",\n \"countername\": \"Packet Reorder Ratio\",\n \"instancename\": select2\n }\n\n\n\n ],\n \"legends\": [\n \"target\",\n \"path\",\n \"lastvalue\"\n ],\n \"duration\": 1440\n }),\n\n success: function (result) {\n performanceData4 = [];\n performanceData5 = [];\n performanceData6 = [];\n performanceData7 = [];\n\n let dataDictionary4;\n let dataDictionary5;\n let dataDictionary6;\n let dataDictionary7;\n\n var lvalue1;\n var lvalue2;\n var lvalue3;\n var lvalue4;\n\n // populate dictionaries for multiple watcher node support\n\n for (var d1 = 0; d1 < result.legends.rows.length; d1++) {\n if (result.legends.rows[d1].performancecounter == \"Average Jitter (ms)\") {\n var perfmname = result.legends.rows[d1].target;\n\n if (perfmname == selectedmachine1) {\n dataDictionary5 = result.datasets[d1].data;\n lvalue2 = parseFloat(parseFloat(result.legends.rows[d1].lastvalue).toFixed(2));\n }\n }\n }\n\n for (var d2 = 0; d2 < result.legends.rows.length; d2++) {\n if (result.legends.rows[d2].performancecounter == \"Round Trip Latency (ms)\") {\n var perfmname = result.legends.rows[d2].target;\n if (perfmname == selectedmachine1) {\n \n dataDictionary4 = result.datasets[d2].data;\n lvalue1 = parseFloat(parseFloat(result.legends.rows[d2].lastvalue).toFixed(2));\n }\n }\n }\n \n\n for (var d3 = 0; d3 < result.legends.rows.length; d3++) {\n if (result.legends.rows[d3].performancecounter == \"Packet Loss Rate\") {\n var perfmname = result.legends.rows[d3].target;\n if (perfmname == selectedmachine1) {\n \n dataDictionary6 = result.datasets[d3].data;\n lvalue3 = parseFloat(result.legends.rows[d3].lastvalue);\n }\n }\n }\n \n\n for (var d4 = 0; d4 < result.legends.rows.length; d4++) {\n if (result.legends.rows[d4].performancecounter == \"Packet Reorder Ratio\") {\n var perfmname = result.legends.rows[d4].target;\n if (perfmname == selectedmachine1) {\n \n dataDictionary7 = result.datasets[d4].data;\n lvalue4 = parseFloat(result.legends.rows[d4].lastvalue);\n\n }\n }\n }\n\n \n // Card for Round Trip Latency\n var flvalue1;\n if(lvalue1 == null){\n flvalue1 = 'N/A';\n }\n else {\n flvalue1 = lvalue1;\n }\n var element = document.getElementById('container1');\n element.removeChild(element.childNodes[2]);\n const card1 = document.createElement('div');\n let name1 = document.createTextNode(flvalue1);\n card1.appendChild(name1);\n\n let container1 = document.querySelector(\"#container1\");\n container1.appendChild(card1);\n\n // Card for Average Jitter\n var flvalue2;\n if(lvalue2 == null){\n flvalue2 = 'N/A';\n }\n else {\n flvalue2 = lvalue2;\n }\n var element = document.getElementById('container2');\n element.removeChild(element.childNodes[2]);\n const card2 = document.createElement('div');\n let name2 = document.createTextNode(flvalue2);\n card2.appendChild(name2);\n\n let container2 = document.querySelector(\"#container2\");\n container2.appendChild(card2);\n\n // Card for Packet Loss Rate\n var flvalue3;\n if(lvalue3 == null){\n flvalue3 = 'N/A';\n }\n else {\n flvalue3 = lvalue3;\n }\n var element = document.getElementById('container3');\n element.removeChild(element.childNodes[2]);\n const card3 = document.createElement('div');\n let name3 = document.createTextNode(flvalue3);\n card3.appendChild(name3);\n\n let container3 = document.querySelector(\"#container3\");\n container3.appendChild(card3);\n\n // Card for Packet Reorder Ratio\n var flvalue4;\n if(lvalue4 == null){\n flvalue4 = 'N/A';\n }\n else {\n flvalue4 = lvalue4;\n }\n var element = document.getElementById('container4');\n element.removeChild(element.childNodes[2]);\n const card4 = document.createElement('div');\n let name4 = document.createTextNode(flvalue4);\n card4.appendChild(name4);\n\n let container4 = document.querySelector(\"#container4\");\n container4.appendChild(card4);\n \n\n // Last 24 Hours in 1st dataset\n for (var key4 in dataDictionary4) {\n if (dataDictionary4.hasOwnProperty(key4)) {\n var datetime4 = new Date(key4);\n datetime4 = convertUTCDateToLocalDate(datetime4);\n performanceData4.push({x:datetime4,y:parseFloat(parseFloat(dataDictionary4[key4]).toFixed(2))});\n }\n }\n\n for (var key5 in dataDictionary5) {\n if (dataDictionary5.hasOwnProperty(key5)) {\n var datetime5 = new Date(key5);\n datetime5 = convertUTCDateToLocalDate(datetime5);\n performanceData5.push({x:datetime5,y:parseFloat(parseFloat(dataDictionary5[key5]).toFixed(2))});\n }\n }\n\n for (var key6 in dataDictionary6) {\n if (dataDictionary6.hasOwnProperty(key6)) {\n var datetime6 = new Date(key6);\n datetime6 = convertUTCDateToLocalDate(datetime6);\n performanceData6.push({x:datetime6,y:parseFloat(parseFloat(dataDictionary6[key6]).toFixed(2))});\n }\n }\n\n for (var key7 in dataDictionary7) {\n if (dataDictionary7.hasOwnProperty(key7)) {\n var datetime7 = new Date(key7);\n datetime7 = convertUTCDateToLocalDate(datetime7);\n performanceData7.push({x:datetime7,y:parseFloat(parseFloat(dataDictionary7[key7]).toFixed(2))});\n }\n }\n\n var sel = $('select[multiple].active.3col').val();\n if (sel == '') {\n \n RenderGraphs();\n }\n $(\"#wait1\").css(\"display\", \"none\");\n $(\"#wait2\").css(\"display\", \"none\");\n $(\"#wait3\").css(\"display\", \"none\");\n $(\"#wait4\").css(\"display\", \"none\");\n $(\"#wait6\").css(\"display\", \"none\");\n $(\"#wait7\").css(\"display\", \"none\");\n $(\"#wait8\").css(\"display\", \"none\");\n $(\"#wait9\").css(\"display\", \"none\");\n $(\"#wait10\").css(\"display\", \"none\");\n $(\"#wait11\").css(\"display\", \"none\");\n $(\"#wait12\").css(\"display\", \"none\");\n $(\"#wait13\").css(\"display\", \"none\");\n $(\"#wait15\").css(\"display\", \"none\");\n $(\"#wait16\").css(\"display\", \"none\");\n $(\"#wait17\").css(\"display\", \"none\");\n $(\"#wait18\").css(\"display\", \"none\");\n\n } //success funtion close\n\n });\n\n // End of last 24 hours performance code\n\n\n\n } // days success close\n\n }); // days success close\n\n\n } // function close\n }) // when close\n }); // promise close\n\n // } // top ajax success close\n // }); // top ajax close\n\n // query for child class\n\n function ajax2() {\n\n return $.ajax({\n url: \"/OperationsManager/data/scomObjectsByClass\",\n type: \"POST\",\n headers: requestHeaders,\n data: JSON.stringify(\"Microsoft.SystemCenter.M365.WatcherNodeApplication.Teams\"),\n\n success: function (result) {\n\n for (var i = 0; i < result.rows.length; i++) {\n var childId = result.rows[i].id;\n var parentdn = result.rows[i].displayname;\n WNlocchild.push({\n childId: childId,\n parentname: parentdn\n });\n }\n\n }\n }); // end of Ajax\n } // ajax2 close\n // end of child class query\n\n function ajax1() {\n \n return $.ajax({\n url: \"/OperationsManager/data/state\",\n type: \"POST\",\n headers: requestHeaders,\n data:\n\n JSON.stringify({\n \"classId\": \"Microsoft.SystemCenter.M365!Microsoft.SystemCenter.M365.WatcherNodeApplication\",\n \"criteria\": \"((HealthState = '0') OR (HealthState = '1') OR (HealthState = '2') OR (HealthState = '3') OR HealthState is null)\",\n \"displayColumns\": [\n \"healthstate\",\n \"displayname\",\n \"path\",\n \"maintenancemode\"\n ]\n }),\n\n success: function (result) {\n let dataDictionary8 = result.rows;\n for (var j = 0; j < result.rows.length; j++) {\n WN[j] = result.rows[j].id;\n\n $ajaxcalls[j] = $.ajax({\n url: \"/OperationsManager/data/monitoringObjectProperties/\" + WN[j],\n type: \"GET\",\n headers: requestHeaders,\n success: function (result) {\n\n // Index of Display Name\n var indexdn = -1;\n var val = \"Display Name\"\n var filteredObj = result.find(function (item, i) {\n if (item.name === val) {\n indexdn = i;\n return i;\n }\n });\n\n // Index of Location Name\n var indexln = -1;\n var val = \"Location Name\"\n var filteredObj = result.find(function (item, i) {\n if (item.name === val) {\n indexln = i;\n return i;\n }\n });\n\n var locate = result[indexln]['value'];\n var mnm = result[indexdn]['value'];\n var ur1 = this.url;\n var Id = ur1.split(/[/]/);\n var mcId = Id[4];\n\n WNloc.push({\n y: locate,\n x: mcId,\n z: mnm\n });\n\n loc1 = WNloc.map(function (obj11) { // Get Location\n return obj11.y;\n });\n\n mId1 = WNloc.map(function (obj11) { // Get Machine Id\n return obj11.x;\n });\n\n mName1 = WNloc.map(function (obj11) { // Get Machine Name\n return obj11.z;\n });\n\n function getUnique(array) {\n var uniqueArray = [];\n\n // Loop through array values\n for (i = 0; i < array.length; i++) {\n if (uniqueArray.indexOf(array[i]) === -1) {\n uniqueArray.push(array[i]);\n }\n }\n return uniqueArray;\n }\n var loc1unique = getUnique(loc1); // get unique array for location\n var dropdown = document.getElementById(\"selectlocation\");\n dropdown.length = 0;\n\n // Loop through the array\n for (var j2 = 0; j2 < loc1unique.length; j2++) {\n dropdown[dropdown.length] = new Option(loc1unique[j2], loc1unique[j2]);\n }\n } //success funtion for WN close\n }); // Ajax close\n } // for loop close\n } //success funtion close\n });\n } //ajax1 close\n }\n\n function convertUTCDateToLocalDate(date) {\n var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);\n var offset = date.getTimezoneOffset() / 60;\n newDate.setMinutes(date.getMinutes() - date.getTimezoneOffset())\n return newDate;\n }\n\n function renderChart(month) {\n if (month == \"7Days\") {\n var chart = new\n Highcharts.chart('chartContainer', {\n\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n backgroundColor: 'none',\n style: {\n fontFamily: 'Segoe UI'\n }\n },\n\n title: {\n text: 'Round Trip Latency (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n }\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n categories: performanceData1.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11.getDate();\n var mm11 = dt11.toLocaleString('default', {\n month: 'short'\n });\n\n fdate11 = dd11 + ' ' + mm11;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n legend: {\n enabled: false,\n\n\n },\n\n yAxis: {\n\n showLastLabel: false,\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#118DFF',\n lineWidth: 3,\n color: '#118DFF'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n style: {\n textShadow: 'none',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n\n\n }\n }\n },\n accessibility: {\n enabled: true\n },\n series: [{\n\n name: 'Round Trip Latency',\n data: performanceData1.map(function (obj11) {\n return obj11.y;\n })\n }]\n });\n\n } //if close\n\n if (month == \"30Days\") {\n var chart = new\n Highcharts.chart('chartContainer', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Round Trip Latency (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData11.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11.getDate();\n var mm11 = dt11.toLocaleString('default', {\n month: 'short'\n });\n\n fdate11 = dd11 + ' ' + mm11;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#118DFF',\n lineWidth: 3,\n color: '#118DFF'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n style: {\n textShadow: 'none',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n }\n }\n\n },\n series: [{\n name: 'Round Trip Latency',\n data: performanceData11.map(function (obj11) {\n return obj11.y;\n })\n\n\n }]\n });\n\n } //if close\n\n if (month == \"24Hrs\") {\n var chart = new\n Highcharts.chart('chartContainer', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Round Trip Latency (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n }\n\n\n },\n subtitle: {\n text: ''\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData4.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11. getDate(); \n var mm11 = dt11.toLocaleString('default', { month: 'short' });\n var hr11 = dt11.getHours();\n var min11 = dt11.getMinutes();\n var min12;\n if(min11 < 10){\n min12 = '0' + min11;\n }\n else{\n min12 = min11;\n }\n fdate11 = dd11+' '+mm11+' '+hr11+':'+min12;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n legend: {\n enabled: false\n\n },\n\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#118DFF',\n lineWidth: 3,\n color: '#118DFF'\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: false,\n crop: false,\n overflow: 'none',\n style: {\n textShadow: 'none',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n }\n }\n\n },\n series: [{\n name: 'Round Trip Latency',\n data: performanceData4.map(function (obj11) {\n return obj11.y;\n })\n\n\n }]\n });\n\n } //if close\n\n // Update Charts on Time Period value change\n var select = document.getElementById('select');\n\n // Check which value is selected in time period\n\n var month = select.options[select.selectedIndex].value;\n\n select.addEventListener('change', (e) => {\n var month = e.target.value;\n\n fun2(month);\n\n }, {\n passive: false\n }); // eventlistener close\n\n \n\n function fun2(month) {\n\n if (month == \"30Days\") {\n\n var chart = new\n Highcharts.chart('chartContainer', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n series: [{\n name: 'Round Trip Latency',\n data: performanceData11.map(function (obj11) {\n return obj11.y;\n })\n\n\n }],\n // new code\n title: {\n text: 'Round Trip Latency (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n credits: {\n enabled: false\n },\n exporting: {\n enabled: false\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#118DFF',\n lineWidth: 3,\n color: '#118DFF'\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n style: {\n textShadow: 'none',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n\n }\n\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData11.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11.getDate();\n var mm11 = dt11.toLocaleString('default', {\n month: 'short'\n });\n\n fdate11 = dd11 + ' ' + mm11;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n } // if close\n\n if (month == \"7Days\") {\n var chart = Highcharts.chart('chartContainer', {\n series: [{\n name: 'Round Trip Latency',\n data: performanceData1.map(function (obj11) {\n return obj11.y;\n })\n }],\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Round Trip Latency (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#118DFF',\n lineWidth: 3,\n color: '#118DFF'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n style: {\n textShadow: 'none',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n }\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n categories: performanceData1.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11.getDate();\n var mm11 = dt11.toLocaleString('default', {\n month: 'short'\n });\n\n fdate11 = dd11 + ' ' + mm11;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n\n } // if close\n if (month == \"24Hrs\") {\n var chart = Highcharts.chart('chartContainer', {\n series: [{\n name: 'Round Trip Latency',\n data:\n\n performanceData4.map(function (obj11) {\n return obj11.y;\n })\n }],\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Round Trip Latency (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n legend: {\n enabled: false\n\n },\n\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#118DFF',\n lineWidth: 3,\n color: '#118DFF'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: false,\n crop: false,\n overflow: 'none',\n style: {\n textShadow: 'none',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n }\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData4.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11. getDate(); \n var mm11 = dt11.toLocaleString('default', { month: 'short' });\n var hr11 = dt11.getHours();\n var min11 = dt11.getMinutes();\n var min12;\n if(min11 < 10){\n min12 = '0' + min11;\n }\n else{\n min12 = min11;\n }\n fdate11 = dd11+' '+mm11+' '+hr11+':'+min12;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n\n } // if close\n\n chart.redraw();\n } // end of fun2\n var w1 = window.innerWidth;\n var h1 = window.innerHeight;\n var s1 = document.getElementById('chartContainer');\n\n s1.style.left = w1 * (24.5 / 100);\n s1.style.top = h1 * (10 / 100);\n s1.style.width = w1 * (73.5 / 100);\n s1.style.height = h1 * (21.1 / 100);\n\n chart.setSize(\n w1 * (73.5 / 100), h1 * (21.1 / 100), false\n );\n chart.render();\n $(window).resize(function () {\n\n var w = window.innerWidth;\n var h = window.innerHeight;\n var s2 = document.getElementById('chartContainer');\n s2.style.left = w * (24.5 / 100);\n s2.style.top = h * (10 / 100);\n // setsize will trigger the graph redraw\n chart.setSize(\n w * (73.5 / 100), h * (21.1 / 100), false\n );\n })\n\n\n return chart;\n\n }\n\n function renderChart1(month) {\n\n if (month == \"7Days\") {\n var chart1 = new\n Highcharts.chart('chartContainer1', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n },\n title: {\n text: 'Average Jitter (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n }\n\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData.map(function (obj) {\n var dt = new Date(obj.x);\n var dd0 = dt.getDate();\n var mm0 = dt.toLocaleString('default', {\n month: 'short'\n });\n\n fdate0 = dd0 + ' ' + mm0;\n return fdate0;\n }),\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n\n },\n\n\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#FFCD00',\n lineWidth: 3,\n color: '#FFCD00',\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n }\n }\n\n },\n series: [{\n name: 'Average Jitter',\n\n data: performanceData.map(function (obj) {\n return obj.y;\n })\n\n }]\n });\n\n } //if close\n\n\n if (month == \"30Days\") {\n var chart1 = new\n Highcharts.chart('chartContainer1', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Average Jitter (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData01.map(function (obj) {\n var dt = new Date(obj.x);\n var dd0 = dt.getDate();\n var mm0 = dt.toLocaleString('default', {\n month: 'short'\n });\n\n fdate0 = dd0 + ' ' + mm0;\n return fdate0;\n }),\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n },\n exporting: {\n enabled: false\n },\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#FFCD00',\n lineWidth: 3,\n color: '#FFCD00',\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n }\n\n }\n\n },\n series: [{\n name: 'Average Jitter',\n data: performanceData01.map(function (obj) {\n return obj.y;\n })\n\n }]\n });\n\n } //if close\n\n\n if (month == \"24Hrs\") {\n var chart1 = new\n Highcharts.chart('chartContainer1', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Average Jitter (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData5.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11. getDate(); \n var mm11 = dt11.toLocaleString('default', { month: 'short' });\n var hr11 = dt11.getHours();\n var min11 = dt11.getMinutes();\n var min12;\n if(min11 < 10){\n min12 = '0' + min11;\n }\n else{\n min12 = min11;\n }\n fdate11 = dd11+' '+mm11+' '+hr11+':'+min12;\n return fdate11;\n }),\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#FFCD00',\n lineWidth: 3,\n color: '#FFCD00',\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: false,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n }\n\n }\n\n },\n series: [{\n name: 'Average Jitter',\n data: performanceData5.map(function (obj) {\n return obj.y;\n })\n\n }]\n });\n\n } //if close\n\n\n // Update Charts on Time Period value change\n var select = document.getElementById('select');\n\n select.addEventListener('change', (e) => {\n var month = e.target.value;\n \n\n fun3(month);\n\n\n }, {\n passive: false\n }); // eventlistener close\n\n function fun3(month) {\n\n if (month == \"30Days\") {\n var chart1 = new\n Highcharts.chart('chartContainer1', {\n series: [{\n name: 'Average Jitter',\n data: performanceData01.map(function (obj11) {\n return obj11.y;\n })\n\n\n }],\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Average Jitter (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n legend: {\n enabled: false\n\n },\n\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#FFCD00',\n lineWidth: 3,\n color: '#FFCD00'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n }\n\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData01.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11.getDate();\n var mm11 = dt11.toLocaleString('default', {\n month: 'short'\n });\n\n fdate11 = dd11 + ' ' + mm11;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n } // if close\n\n\n if (month == \"7Days\") {\n var chart1 = new\n Highcharts.chart('chartContainer1', {\n series: [{\n name: 'Average Jitter',\n data: performanceData.map(function (obj11) {\n return obj11.y;\n })\n }],\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Average Jitter (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#FFCD00',\n lineWidth: 3,\n color: '#FFCD00'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n }\n\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11.getDate();\n var mm11 = dt11.toLocaleString('default', {\n month: 'short'\n });\n\n fdate11 = dd11 + ' ' + mm11;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n\n } // if close\n if (month == \"24Hrs\") {\n var chart1 = new\n Highcharts.chart('chartContainer1', {\n series: [{\n name: 'Average Jitter',\n data: performanceData5.map(function (obj11) {\n return obj11.y;\n })\n }],\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Average Jitter (ms)',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' ms'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#FFCD00',\n lineWidth: 3,\n color: '#FFCD00'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: false,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n }\n\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData5.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11. getDate(); \n var mm11 = dt11.toLocaleString('default', { month: 'short' });\n var hr11 = dt11.getHours();\n var min11 = dt11.getMinutes();\n var min12;\n if(min11 < 10){\n min12 = '0' + min11;\n }\n else{\n min12 = min11;\n }\n fdate11 = dd11+' '+mm11+' '+hr11+':'+min12;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n\n } // if close\n\n\n chart1.redraw();\n\n } // end of fun3\n\n var w1 = window.innerWidth;\n var h1 = window.innerHeight;\n\n var s1 = document.getElementById('chartContainer1');\n s1.style.left = w1 * (24.5 / 100);\n s1.style.top = h1 * (31.21 / 100);\n chart1.setSize(\n w1 * (73.5 / 100), h1 * (21.1 / 100), false\n );\n chart1.render();\n $(window).resize(function () {\n\n var w = window.innerWidth;\n var h = window.innerHeight;\n var s2 = document.getElementById('chartContainer1');\n s2.style.left = w * (24.5 / 100);\n s2.style.top = h * (31.21 / 100);\n // setsize will trigger the graph redraw\n chart1.setSize(\n w * (73.5 / 100), h * (21.1 / 100), false\n );\n })\n return chart1;\n\n }\n\n function renderChart2(month) {\n if (month == \"7Days\") {\n var chart2 = new\n Highcharts.chart('chartContainer2', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Packet Loss Rate',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n }\n\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData2.map(function (obj2) {\n var dt2 = new Date(obj2.x);\n var dd2 = dt2.getDate();\n var mm2 = dt2.toLocaleString('default', {\n month: 'short'\n });\n\n fdate2 = dd2 + ' ' + mm2;\n return fdate2;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E66C37',\n lineWidth: 3,\n color: '#E66C37',\n\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n\n }\n }\n\n },\n series: [{\n name: 'Packet Loss Rate',\n data: performanceData2.map(function (obj2) {\n return obj2.y;\n })\n\n }]\n });\n } // if close\n\n if (month == \"30Days\") {\n var chart2 = new\n Highcharts.chart('chartContainer2', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n\n },\n title: {\n text: 'Packet Loss Rate',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData21.map(function (obj2) {\n var dt2 = new Date(obj2.x);\n var dd2 = dt2.getDate();\n var mm2 = dt2.toLocaleString('default', {\n month: 'short'\n });\n\n fdate2 = dd2 + ' ' + mm2;\n return fdate2;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E66C37',\n lineWidth: 3,\n color: '#E66C37'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n\n }\n\n }\n\n },\n series: [{\n name: 'Packet Loss Rate',\n data: performanceData21.map(function (obj2) {\n return obj2.y;\n })\n\n }]\n });\n } // if close\n\n if (month == \"24Hrs\") {\n var chart2 = new\n Highcharts.chart('chartContainer2', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Packet Loss Rate',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData6.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11. getDate(); \n var mm11 = dt11.toLocaleString('default', { month: 'short' });\n var hr11 = dt11.getHours();\n var min11 = dt11.getMinutes();\n var min12;\n if(min11 < 10){\n min12 = '0' + min11;\n }\n else{\n min12 = min11;\n }\n fdate11 = dd11+' '+mm11+' '+hr11+':'+min12;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E66C37',\n lineWidth: 3,\n color: '#E66C37'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: false,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n\n }\n\n }\n\n },\n series: [{\n name: 'Packet Loss Rate',\n data: performanceData6.map(function (obj2) {\n return obj2.y;\n })\n\n }]\n });\n } // if close\n\n // Update Charts on Time Period value change\n var select = document.getElementById('select');\n\n select.addEventListener('change', (e) => {\n var month = e.target.value;\n \n\n fun4(month);\n\n\n }, {\n passive: false\n }); // eventlistener close\n\n function fun4(month) {\n\n if (month == \"30Days\") {\n var chart2 = new\n Highcharts.chart('chartContainer2', {\n series: [{\n name: 'Packet Loss Rate',\n data: performanceData21.map(function (obj11) {\n return obj11.y;\n })\n\n\n }],\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Packet Loss Rate',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n credits: {\n enabled: false\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E66C37',\n lineWidth: 3,\n color: '#E66C37'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n\n }\n\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData21.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11.getDate();\n var mm11 = dt11.toLocaleString('default', {\n month: 'short'\n });\n\n fdate11 = dd11 + ' ' + mm11;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n } // if close\n\n if (month == \"7Days\") {\n var chart2 = new\n Highcharts.chart('chartContainer2', {\n series: [{\n name: 'Packet Loss Rate',\n data: performanceData2.map(function (obj11) {\n return obj11.y;\n })\n }],\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Packet Loss Rate',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E66C37',\n lineWidth: 3,\n color: '#E66C37'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n\n }\n\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData2.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11.getDate();\n var mm11 = dt11.toLocaleString('default', {\n month: 'short'\n });\n\n fdate11 = dd11 + ' ' + mm11;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n\n } // if close\n if (month == \"24Hrs\") {\n var chart2 = new\n Highcharts.chart('chartContainer2', {\n series: [{\n name: 'Packet Loss Rate',\n data: performanceData6.map(function (obj11) {\n return obj11.y;\n })\n }],\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Packet Loss Rate',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E66C37',\n lineWidth: 3,\n color: '#E66C37'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: false,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n\n }\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData6.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11. getDate(); \n var mm11 = dt11.toLocaleString('default', { month: 'short' });\n var hr11 = dt11.getHours();\n var min11 = dt11.getMinutes();\n var min12;\n if(min11 < 10){\n min12 = '0' + min11;\n }\n else{\n min12 = min11;\n }\n fdate11 = dd11+' '+mm11+' '+hr11+':'+min12;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n\n } // if close\n\n\n chart2.redraw();\n }\n var w1 = window.innerWidth;\n var h1 = window.innerHeight;\n var s1 = document.getElementById('chartContainer2');\n s1.style.left = w1 * (24.5 / 100);\n s1.style.top = h1 * (52.42 / 100);\n chart2.setSize(\n w1 * (73.5 / 100), h1 * (21.1 / 100), false\n );\n chart2.render();\n $(window).resize(function () {\n\n var w = window.innerWidth;\n var h = window.innerHeight;\n var s2 = document.getElementById('chartContainer2');\n s2.style.left = w * (24.5 / 100);\n s2.style.top = h * (52.42 / 100);\n // setsize will trigger the graph redraw\n chart2.setSize(\n w * (73.5 / 100), h * (21.1 / 100), false\n );\n })\n return chart2;\n }\n\n\n function renderChart3(month) {\n\n if (month == \"7Days\") {\n var chart3 = new\n Highcharts.chart('chartContainer3', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n\n title: {\n text: 'Packet Reorder Ratio',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n }\n\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData3.map(function (obj3) {\n var dt3 = new Date(obj3.x);\n var dd3 = dt3.getDate();\n var mm3 = dt3.toLocaleString('default', {\n month: 'short'\n });\n\n fdate3 = dd3 + ' ' + mm3;\n return fdate3;\n }),\n\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E669B9',\n lineWidth: 3,\n color: '#E669B9'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n\n }\n\n }\n }\n\n },\n series: [{\n name: 'Packet Reorder Ratio',\n data: performanceData3.map(function (obj3) {\n return obj3.y;\n })\n\n }]\n });\n\n } // if close\n\n if (month == \"30Days\") {\n var chart3 = new\n Highcharts.chart('chartContainer3', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Packet Reorder Ratio',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData31.map(function (obj3) {\n var dt3 = new Date(obj3.x);\n var dd3 = dt3.getDate();\n var mm3 = dt3.toLocaleString('default', {\n month: 'short'\n });\n\n fdate3 = dd3 + ' ' + mm3;\n return fdate3;\n }),\n\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E669B9',\n lineWidth: 3,\n color: '#E669B9'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n\n }\n\n }\n\n }\n\n },\n series: [{\n name: 'Packet Reorder Ratio',\n data: performanceData31.map(function (obj3) {\n return obj3.y;\n })\n\n }]\n });\n\n } // if close\n\n if (month == \"24Hrs\") {\n var chart3 = new\n Highcharts.chart('chartContainer3', {\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Packet Reorder Ratio',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n subtitle: {\n text: ''\n },\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData7.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11. getDate(); \n var mm11 = dt11.toLocaleString('default', { month: 'short' });\n var hr11 = dt11.getHours();\n var min11 = dt11.getMinutes();\n var min12;\n if(min11 < 10){\n min12 = '0' + min11;\n }\n else{\n min12 = min11;\n }\n fdate11 = dd11+' '+mm11+' '+hr11+':'+min12;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E669B9',\n lineWidth: 3,\n color: '#E669B9'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: false,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n\n }\n\n }\n\n }\n\n },\n series: [{\n name: 'Packet Reorder Ratio',\n data: performanceData7.map(function (obj3) {\n return obj3.y;\n })\n\n }]\n });\n\n } // if close\n\n\n\n var select = document.getElementById('select');\n\n select.addEventListener('change', (e) => {\n var month = e.target.value;\n \n\n fun5(month);\n\n\n }, {\n passive: false\n }); // eventlistener close\n\n function fun5(month) {\n\n if (month == \"30Days\") {\n var chart3 = new\n Highcharts.chart('chartContainer3', {\n series: [{\n name: 'Packet Reorder Ratio',\n data: performanceData31.map(function (obj11) {\n return obj11.y;\n })\n\n\n }],\n\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Packet Reorder Ratio',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E669B9',\n lineWidth: 3,\n color: '#E669B9'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n\n }\n\n }\n\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData31.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11.getDate();\n var mm11 = dt11.toLocaleString('default', {\n month: 'short'\n });\n\n fdate11 = dd11 + ' ' + mm11;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n } // if close\n\n if (month == \"7Days\") {\n var chart3 = new\n Highcharts.chart('chartContainer3', {\n series: [{\n name: 'Packet Reorder Ratio',\n data: performanceData3.map(function (obj11) {\n return obj11.y;\n })\n }],\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Packet Reorder Ratio',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n credits: {\n enabled: false\n\n },\n exporting: {\n enabled: false\n },\n\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E669B9',\n lineWidth: 3,\n color: '#E669B9'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: true,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n\n }\n\n }\n\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData3.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11.getDate();\n var mm11 = dt11.toLocaleString('default', {\n month: 'short'\n });\n\n fdate11 = dd11 + ' ' + mm11;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n\n } // if close\n if (month == \"24Hrs\") {\n var chart3 = new\n Highcharts.chart('chartContainer3', {\n series: [{\n name: 'Packet Reorder Ratio',\n data: performanceData7.map(function (obj11) {\n return obj11.y;\n })\n }],\n // new code\n chart: {\n type: 'spline',\n reflow: false,\n spacingBottom: 15,\n spacingTop: 10,\n spacingLeft: 10,\n spacingRight: 10,\n\n style: {\n fontFamily: 'Segoe UI'\n }\n\n },\n title: {\n text: 'Packet Reorder Ratio',\n align: 'left',\n style: {\n fontFamily: 'Segoe (Bold)',\n fontWeight: 'bold',\n fontSize: 14\n\n }\n\n },\n credits: {\n enabled: false\n },\n exporting: {\n enabled: false\n },\n\n yAxis: {\n title: {\n text: '',\n\n },\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n },\n\n\n formatter: function () {\n return this.value;\n }\n }\n },\n tooltip: {\n shared: true,\n valueSuffix: ' %'\n },\n legend: {\n enabled: false\n\n },\n plotOptions: {\n spline: {\n stacking: 'normal',\n lineColor: '#E669B9',\n lineWidth: 3,\n color: '#E669B9'\n\n },\n series: {\n fillOpacity: 0.6,\n dataLabels: {\n enabled: false,\n crop: false,\n overflow: 'none',\n\n style: {\n textShadow: 'none',\n fontWeight: 'bold',\n color: '#000000',\n fontFamily: 'Segoe UI',\n fontSize: 9\n\n }\n\n }\n\n }\n\n },\n // end new code\n xAxis: {\n labels: {\n style: {\n fontFamily: 'Segoe UI',\n fontSize: 9\n }\n },\n\n categories: performanceData7.map(function (obj11) {\n var dt11 = new Date(obj11.x);\n var dd11 = dt11. getDate(); \n var mm11 = dt11.toLocaleString('default', { month: 'short' });\n var hr11 = dt11.getHours();\n var min11 = dt11.getMinutes();\n var min12;\n if(min11 < 10){\n min12 = '0' + min11;\n }\n else{\n min12 = min11;\n }\n fdate11 = dd11+' '+mm11+' '+hr11+':'+min12;\n return fdate11;\n }),\n\n\n tickmarkPlacement: 'on',\n title: {\n enabled: false\n }\n }\n });\n\n } // if close\n\n chart3.redraw();\n }\n\n var w1 = window.innerWidth;\n var h1 = window.innerHeight;\n var s1 = document.getElementById('chartContainer3');\n s1.style.left = w1 * (24.5 / 100);\n s1.style.top = h1 * (73.63 / 100);\n chart3.setSize(\n w1 * (73.5 / 100), h1 * (21.1 / 100), false\n );\n chart3.render();\n $(window).resize(function () {\n\n var w = window.innerWidth;\n var h = window.innerHeight;\n var s2 = document.getElementById('chartContainer3');\n s2.style.left = w * (24.5 / 100);\n s2.style.top = h * (73.63 / 100);\n // setsize will trigger the graph redraw\n chart3.setSize(\n w * (73.5 / 100), h * (21.1 / 100), false\n );\n })\n\n\n\n return chart3;\n }\n\n\n $(document).ready(function () {\n $('select[multiple].active.3col').multiselect({\n columns: 1,\n placeholder: 'All',\n search: false,\n classes: \"myClass\",\n searchOptions: {\n 'default': 'All'\n },\n selectAll: false\n\n });\n var w = window.innerWidth;\n var h = window.innerHeight;\n $('#row').css('width', w);\n $('#row').css('height', h);\n \n })\n\n\n\n </script>\n\n <div role=\"main\" id=\"row\">\n <div>\n <div id=\"wait1\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:20.55%;left:61.25%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait2\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:41.76%;left:61.25%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait3\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:62.97%;left:61.25%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait4\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:84.18%;left:61.25%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait5\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:18.473%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait6\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:35.419%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait7\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:52.365%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait8\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:69.311%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait9\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:86.257%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n \n <div id=\"wait10\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:20.55%;left:61.25%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait11\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:41.76%;left:61.25%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait12\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:62.97%;left:61.25%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait13\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:84.18%;left:61.25%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait14\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:18.473%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait15\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:35.419%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait16\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:52.365%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait17\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:69.311%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait18\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:86.257%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n <div id=\"wait19\" style=\"display:none;z-index:20;width:69px;height:89px;border:0px solid black;position:absolute;top:18.473%;left:11.64%;padding:2px;\"><img alt=\"Loading...\" style=\"height:40px;width:40px\" src='/OperationsManager/images/miscellaneous/spinney.gif' width=\"64\" height=\"64\" /></div>\n \n <div class=\"Location1\">\n <label for=\"location\">Location Name</label>\n <div class=\"dropdown\">\n <select class=\"Location\" id=\"selectlocation\" aria-label=\"Close\"></select>\n </div>\n </div>\n \n\n\n <div class=\"machine1\">\n <label for=\"location\">Watcher Node</label>\n <div class=\"dropdown\">\n <select class=\"machine\" id=\"selectmachine\" aria-label=\"Close\"></select>\n </div>\n </div>\n\n\n\n <div class=\"TimePeriod1\">\n <label for=\"days\">Time Period</label>\n <div class=\"dropdown\">\n <select name=\"days\" class=\"TimePeriod\" id=\"select\" aria-label=\"Close\">\n <option value=\"24Hrs\">Last 24 Hours</option>\n <option value=\"7Days\" selected>Last 7 Days</option>\n <option value=\"30Days\">Last 30 Days</option>\n </select>\n </div>\n </div>\n\n\n\n <label class=\"Workload2\" for=\"load\">Transaction</label>\n <div class=\"Workload1\">\n\n <select name=\"basic[]\" multiple=\"multiple\" class=\"3col active\" aria-label=\"Close\" id=\"example-getting-started\">\n <option value=\"RoundTripLatency\">&nbsp;&nbsp;Round Trip Latency</option>\n <option value=\"AverageJitter\">&nbsp;&nbsp;Average Jitter</option>\n <option value=\"PacketLossRate\">&nbsp;&nbsp;Packet Loss Rate</option>\n <option value=\"PacketReorderRatio\">&nbsp;&nbsp;Packet Reorder Ratio</option>\n </select>\n </div>\n\n <div id=\"chartContainer\" class=\"fixed\" role=\"status\" aria-live=\"assertive\" tabindex=\"0\">\n </div>\n\n <div id=\"chartContainer1\" class=\"fixed1\" role=\"status\" aria-live=\"assertive\" tabindex=\"0\">\n </div>\n\n <div id=\"chartContainer2\" class=\"fixed2\" role=\"status\" aria-live=\"assertive\" tabindex=\"0\">\n </div>\n\n <div id=\"chartContainer3\" class=\"fixed3\" role=\"status\" aria-live=\"assertive\" tabindex=\"0\">\n </div>\n\n\n <div id=\"container7\" class='teams' tabindex=\"0\">\n <label>Teams Network Assessment</label>\n </div>\n\n <div id=\"container6\" class='timestamp' tabindex=\"0\">\n </div>\n\n <div id=\"container\" class='card1' tabindex=\"0\">\n <p class=\"card-title\">Teams Network Status</p>\n </div>\n\n <div id=\"container1\" class='card2' tabindex=\"0\">\n <p class=\"card-title\">Round Trip Latency <br> (Target < 100ms)</p>\n </div>\n\n <div id=\"container2\" class='card3' tabindex=\"0\">\n <p class=\"card-title\">Average Jitter <br> (Target < 30 ms)</p>\n </div>\n\n <div id=\"container3\" class='card4' tabindex=\"0\">\n <p class=\"card-title\">Packet Loss Rate <br> (Target < 1)</p>\n </div>\n\n <div id=\"container4\" class='card5' tabindex=\"0\">\n <p class=\"card-title\">Packet Reorder Ratio <br> (Target < 0.05%)</p>\n </div>\n\n\n </div>\n </div>\n\n</body>\n</html>\n"
},
"widgetRefreshInterval": 20
}
</Configuration>
<Type>HtmlCustomWidget</Type>
</WidgetConfiguration>
</View>