My Monitored Streams
Loading monitors
State | Status | Stream | DNS | Server | Stream | CC | Geo-Locations | Added | URL | Actions | |
---|---|---|---|---|---|---|---|---|---|---|---|
To get started,
|
|||||||||||
StreamTest Monitoring tracks the status of your streams. Register to begin monitoring.Start the to see it in action Or See How it Works For more info, contact our sales team or see our pricing |
\u25CF Bitrate: ' + this.y.toFixed(2) + ' Kbps' + '
' + this.points[0].point.z + '
';
}
else {
return '' + Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) + ' \u25CF Bitrate: ' + this.y.toFixed(2) + ' Kbps'; } } }, series: [{ lineWidth: 1, name: "Kbps", data: bitrateHistoryGraphArray.reverse().sort(sortFunction), type: 'areaspline', color: '#5557FE', negativeColor: '#5679c4', fillOpacity: 0.5, turboThreshold: 0, tooltip: { valueDecimals: 2 } }] }, function (chart) { //add this function to the chart definition to get synchronized crosshairs syncronizeCrossHairs(chart); }); var bitrateChart = getChartReferenceByClassName('bitrateChart'); $('#ttpDetailGraph').highcharts('StockChart', { chart: { /* renderTo: 'ttpDetailGraph', */ className: 'ttpChart', type: 'line', zoomType: 'x', //x axis only borderColor: '#003399', //'#022455', borderWidth: 0, isZoomed: false }, title: { text: 'TTP for ' + window.streamDetailGeoCurrentLocation.replace('_', ' ') }, subtitle: { text: 'Time-To-Play history' }, xAxis: { type: 'datetime', tickInterval: 24 * 3600 * 1000, dateTimeLabelFormats: { // don't display the dummy year month: '%e. %b', year: '%b' }, title: { text: 'Date' }, startOnTick: true, endOnTick: true, showLastLabel: true, events: { afterSetExtremes: function () { if (!this.chart.options.chart.isZoomed) { var xMin = this.chart.xAxis[0].min; var xMax = this.chart.xAxis[0].max; var zmRange = computeTickInterval(xMin, xMax); bitrateChart.xAxis[0].options.tickInterval = zmRange; bitrateChart.xAxis[0].isDirty = true; ttpChart.xAxis[0].options.tickInterval = zmRange; ttpChart.xAxis[0].isDirty = true; bitrateChart.options.chart.isZoomed = true; bitrateChart.xAxis[0].setExtremes(xMin, xMax, true); bitrateChart.options.chart.isZoomed = false; } } } }, rangeSelector: { selected: 1, buttons: [{ type: 'minute', count: 60, text: '1h' }, { type: 'day', count: 1, text: '1d' }, { type: 'week', count: 1, text: '1w' }, { type: 'month', count: 1, text: '1m' }, { type: 'year', count: 1, text: '1y' }, { type: 'all', text: 'All' }] }, plotOptions: { series: { connectNulls: false, marker: { enabled: true }, dataGrouping: { enabled: false }, point: { events: { click: function () { if (typeof this.options.v !== 'undefined') { probeIntervalLogModal(probeID, this.options.w, this.options.v); } else { probeIntervalLogModal(probeID, this.options.w); } } } }, cursor: "pointer" } }, tooltip: { formatter: function () { //console.log('Highchart: this '); //console.log(this); if (this.points[0].point.z.length > 0) { return '' + Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) + '
\u25CF TTP: ' + (this.y / 1000).toFixed(2) + ' Seconds' + '
' + this.points[0].point.z + '
';
}
else {
return '' + Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) + ' \u25CF TTP: ' + (this.y / 1000).toFixed(2) + ' Seconds'; } } }, series: [{ lineWidth: 1, name: "TTP", data: ttpHistoryGraphArray.reverse().sort(sortFunction), type: 'areaspline', color: '#3FB33B', negativeColor: '#5679c4', fillOpacity: 0.5, turboThreshold: 0, tooltip: { valueDecimals: 2 } }] }, function (chart) { //add this function to the chart definition to get synchronized crosshairs syncronizeCrossHairs(chart); }); var ttpChart = getChartReferenceByClassName('ttpChart'); }); }); } /* Populate geo servers list */ GetProbeTestNew(probeID, function (data) { /* Check thumbnail refresh state */ var thumbnailImage = data.ThumbnailUrl; if ($("tr[data-probe='" + probeID + "']").attr('data-waiting-for-thumbnail') == 'true') { $(".thumbnailRefresh").fadeIn().addClass("fa-spin"); $(".thumbnailRefreshOverlay").fadeIn('slow'); $("tr[data-probe='" + probeID + "']").attr('data-waiting-for-thumbnail', 'true'); $(".thumbnailRefreshCounter").text(moment(data.DateTimeNextProbe + "Z").fromNow()); window.thumbnailCheckInterval = setInterval(function () { GetProbeTestNew(probeID, function (data) { if (thumbnailImage == data.ThumbnailUrl) { $(".thumbnailRefreshCounter").text(moment(data.DateTimeNextProbe + "Z").fromNow()); } else { $(".thumbnailRefreshOverlay").fadeOut(); $(".thumbnailRefresh").removeClass('fa-spin'); $(".thumbnailCont img").attr('src', data.ThumbnailUrl); $("tr[data-probe='" + probeID + "'] td.streamName img").attr('src', data.ThumbnailUrl); $("tr[data-probe='" + probeID + "']").attr('data-waiting-for-thumbnail', 'false'); clearInterval(window.thumbnailCheckInterval); } }); }, 15000); } else { $(".thumbnailRefreshOverlay").hide(); $(".thumbnailRefresh").removeClass('fa-spin'); $(".thumbnailRefresh").fadeIn(); $(".thumbnailRefresh").attr('data-probe', probeID).tooltip({ title: "Refresh Thumbnail", placement: "bottom", container: 'body' }); } $(".thumbnailRefresh").attr('data-thumbnail-image', thumbnailImage); /* attach refresh handler to refresh link */ $(".thumbnailRefresh").on('click', function () { var probeID = $(this).attr('data-probe'); var thumbnailImage = $(this).attr('data-thumbnail-image'); GetProbeTestNew(probeID, function (data) { RefreshThumbnail(probeID, function () { $(".thumbnailRefresh").unbind("click"); $(".thumbnailRefresh").addClass("fa-spin"); $(".thumbnailRefreshOverlay").fadeIn('slow'); $(".thumbnailRefreshCounter").text(moment(data.DateTimeNextProbe + "Z").fromNow()); $("tr[data-probe='" + probeID + "']").attr('data-waiting-for-thumbnail', 'true'); window.thumbnailCheckInterval = setInterval(function () { GetProbeTestNew(probeID, function (data) { if (thumbnailImage == data.ThumbnailUrl) { $(".thumbnailRefreshCounter").text(moment(data.DateTimeNextProbe + "Z").fromNow()); } else { $(".thumbnailRefreshOverlay").fadeOut(); $(".thumbnailRefresh").removeClass('fa-spin'); $(".thumbnailCont img").attr('src', data.ThumbnailUrl); $("tr[data-probe='" + probeID + "'] td.streamName img").attr('src', data.ThumbnailUrl); $("tr[data-probe='" + probeID + "']").attr('data-waiting-for-thumbnail', 'false'); } }); }, 15000); }); }); }); /* Populate Stream Detail Info section */ $("#streamDetailModal .img-thumbnail").attr('src', (data.ThumbnailUrl != null && data.ThumbnailUrl != "" ? data.ThumbnailUrl : 'content/img/SnapShotError.png')); $(".streamDetailMonitorStage").html(data.Stage); $(".streamDetailDateCreated").html(moment(data.DateTimeCreated).format('MMMM Do YYYY, h:mm:ss a')); $(".streamDetailProbeInterval").html(data.ProbeIntervalInMinutes + ' minutes'); $(".streamDetailCurrentProbeNumber").html(data.CurrentProbeNumber); if (data.NotificationEmail == null) { $(".streamDetailNotificationEmail").html("None"); } else { $(".streamDetailNotificationEmail").html(data.NotificationEmail); } if (data.DateTimeLastNotification == null) { $(".streamDetailLastNotification").html("None"); } else { $(".streamDetailLastNotification").html(moment(data.DateTimeLastNotification).format('MMMM Do YYYY, h:mm:ss a')); } $.each(data.ProbeTestLocations, function (index, value) { var thisLocation = value.LocationId; var geoBitrateGraphArray = []; var geoTTPGraphArray = []; //console.log('TTP Array after: '); //console.log(geoTTPGraphArray); GetProbeTestRecentIntervals(data.ProbeTestId, 75, function (data) { if (data[0].STREAM_ONLINE) { $(".geo-server-list").append('
' + thisLocation.replace('_', ' ') + '
' + thisLocation.replace('_', ' ') + '
'); $("#ttpDetailGraph").html('
'); $(".chartDetailProgress").prop('value', '10'); $(".progressDetail").text('Requesting chart data'); drawDetailChartsGeo(probeID, moment($('#streamDetailDateRangeFrom').val()).unix(), moment($('#streamDetailDateRangeTo').val()).unix()); }); }); }); }); /* Update Progress */ $(".chartDetailProgress").prop('value', '10'); $(".progressDetail").text('Requesting chart data'); function drawDetailCharts(probeID, startUnixTimeStamp, endUnixTimeStamp) { GetProbeTestNew(probeID, function (data) { window.streamDetailHistoryGraphProbeQuantity = data.ProbeTestLocations.length; GetProbeTestRecentInvtervalsByDate(data.ProbeTestId, startUnixTimeStamp, endUnixTimeStamp, function (data) { /* ---- Graph Sync ---- */ var bitrateChart; var ttpChart; var controllingChart; var defaultTickInterval = 5; var currentTickInterval = defaultTickInterval; function unzoom() { bitrateChart.options.chart.isZoomed = false; ttpChart.options.chart.isZoomed = false; bitrateChart.xAxis[0].setExtremes(null, null); ttpChart.xAxis[0].setExtremes(null, null); } //catch mousemove event and have all 3 charts' crosshairs move along indicated values on x axis function syncronizeCrossHairs(chart) { var container = $(chart.container), offset = container.offset(), x, y, isInside, report; //console.log("Chart cont: "); //console.log(chart.container); container.mousemove(function (evt) { x = evt.clientX - chart.plotLeft - offset.left; y = evt.clientY - chart.plotTop - offset.top; var xAxis = chart.xAxis[0]; //remove old plot line and draw new plot line (crosshair) for this chart var xAxis1 = bitrateChart.xAxis[0]; xAxis1.removePlotLine("myPlotLineId"); xAxis1.addPlotLine({ value: chart.xAxis[0].translate(x, true), width: 1, color: 'red', //dashStyle: 'dash', id: "myPlotLineId" }); //remove old crosshair and draw new crosshair on chart2 var xAxis2 = ttpChart.xAxis[0]; xAxis2.removePlotLine("myPlotLineId"); xAxis2.addPlotLine({ value: chart.xAxis[0].translate(x, true), width: 1, color: 'red', //dashStyle: 'dash', id: "myPlotLineId" }); }); } //compute a reasonable tick interval given the zoom range - //have to compute this since we set the tickIntervals in order //to get predictable synchronization between 3 charts with //different data. function computeTickInterval(xMin, xMax) { var zoomRange = xMax - xMin; if (zoomRange <= 2) currentTickInterval = 0.5; if (zoomRange < 20) currentTickInterval = 1; else if (zoomRange < 100) currentTickInterval = 5; } //explicitly set the tickInterval for the 3 charts - based on //selected range function setTickInterval(event) { var xMin = event.xAxis[0].min; var xMax = event.xAxis[0].max; computeTickInterval(xMin, xMax); bitrateChart.xAxis[0].options.tickInterval = currentTickInterval; bitrateChart.xAxis[0].isDirty = true; ttpChart.xAxis[0].options.tickInterval = currentTickInterval; ttpChart.xAxis[0].isDirty = true; } //reset the extremes and the tickInterval to default values function unzoom() { bitrateChart.xAxis[0].options.tickInterval = defaultTickInterval; bitrateChart.xAxis[0].isDirty = true; ttpChart.xAxis[0].options.tickInterval = defaultTickInterval; ttpChart.xAxis[0].isDirty = true; bitrateChart.xAxis[0].setExtremes(null, null); ttpChart.xAxis[0].setExtremes(null, null); } /* ---- Graph Sync ---- */ //console.log('probes: ' + window.streamDetailHistoryGraphProbeQuantity); var bitrateHistoryGraphArray = new Array(); var ttpHistoryGraphArray = new Array(); var i; var k = 0 function sortFunction(a, b) { var x = a['x']; var y = b['x']; return ((x < y) ? -1 : ((x > y) ? 1 : 0)); } //console.log('Current test: ' + data[0].PROBE_TEST_ID); // To keep track of each probe set iterated var checkedProbes = new Array(); $.each(data, function (index, value) { if ($.inArray(data[index].PROBE_NUMBER, checkedProbes) == -1) { var currentProbeSet = data[index].PROBE_NUMBER; var currentProbeCount = 0; var totalGeoDataRate = 0; var totalGeoTTP = 0; var probeIntervalID = data[index].PROBE_INTERVAL_TEST_ID; $.each(data, function (index, value) { if (data[index].PROBE_NUMBER == currentProbeSet) { totalGeoDataRate = totalGeoDataRate + data[index].SAMPLED_DATARATE; totalGeoTTP = totalGeoTTP + data[index].TIME_TO_START_MILLISECONDS; currentProbeCount++; return true; } if (currentProbeCount == window.streamDetailHistoryGraphProbeQuantity) { return false; } }); var avgGeoDataRate = (totalGeoDataRate / currentProbeCount).toFixed(2); var avgGeoTTP = (totalGeoTTP / currentProbeCount).toFixed(2); var historyGraphTimeStamp = new Date(data[index].DATETIME_TESTED + 'Z'); if (currentProbeCount < window.streamDetailHistoryGraphProbeQuantity) { // Missing Data var z = "Missing geo data, averaging available geo data"; } else { var z = ""; } var bitrateHistoryGraphCombo = new Object({ w: probeIntervalID, x: historyGraphTimeStamp.getTime(), y: parseFloat(avgGeoDataRate), z: z }); var ttpHistoryGraphCombo = new Object({ w: probeIntervalID, x: historyGraphTimeStamp.getTime(), y: parseFloat(avgGeoTTP), z: z }); if (data[index].FETCH_CLOSED_CAPTIONING) { bitrateHistoryGraphCombo['v'] = data[index].CLOSED_CAPTION_DATA; ttpHistoryGraphCombo['v'] = data[index].CLOSED_CAPTION_DATA; } if (historyGraphTimeStamp !== "Invalid date" && data[index].DATETIME_TESTED !== null) { bitrateHistoryGraphArray.push(bitrateHistoryGraphCombo); ttpHistoryGraphArray.push(ttpHistoryGraphCombo); } checkedProbes.push(currentProbeSet); } }); //$(".chartDetailProgress").prop('value', ~~$(".chartDetailProgress").val() + 10); //$(".progressDetail").text('Drawing charts'); //console.log(bitrateHistoryGraphArray); window.highchartDebug = bitrateHistoryGraphArray; //console.log(ttpHistoryGraphArray); $('#bitrateDetailGraph').highcharts('StockChart', { chart: { /* renderTo: 'bitrateDetailGraph', */ className: 'bitrateChart', type: 'line', zoomType: 'x', //x axis only borderColor: '#003399', //'#022455', borderWidth: 0, isZoomed: false }, title: { text: 'Average Data Rate' }, subtitle: { text: 'Data rate history, averaged by geo locations' }, xAxis: { type: 'datetime', tickInterval: 24 * 3600 * 1000, dateTimeLabelFormats: { // don't display the dummy year month: '%e. %b', year: '%b' }, title: { text: 'Date' }, startOnTick: true, endOnTick: true, showLastLabel: true, events: { afterSetExtremes: function () { if (!this.chart.options.chart.isZoomed) { var xMin = this.chart.xAxis[0].min; var xMax = this.chart.xAxis[0].max; var zmRange = computeTickInterval(xMin, xMax); bitrateChart.xAxis[0].options.tickInterval = zmRange; bitrateChart.xAxis[0].isDirty = true; ttpChart.xAxis[0].options.tickInterval = zmRange; ttpChart.xAxis[0].isDirty = true; ttpChart.options.chart.isZoomed = true; ttpChart.xAxis[0].setExtremes(xMin, xMax, true); ttpChart.options.chart.isZoomed = false; } } } }, rangeSelector: { selected: 1, buttons: [{ type: 'minute', count: 60, text: '1h' }, { type: 'day', count: 1, text: '1d' }, { type: 'week', count: 1, text: '1w' }, { type: 'month', count: 1, text: '1m' }, { type: 'year', count: 1, text: '1y' }, { type: 'all', text: 'All' }] }, plotOptions: { series: { connectNulls: false, marker: { enabled: true }, dataGrouping: { enabled: false }, point: { events: { click: function () { if (typeof this.options.v !== 'undefined') { probeIntervalLogModal(probeID, this.options.w, this.options.v); } else { probeIntervalLogModal(probeID, this.options.w); } } } }, cursor: "pointer" } }, tooltip: { formatter: function () { //console.log('Highchart: this '); //console.log(this); if (this.points[0].point.z.length > 0) { return '' + Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) + '
\u25CF Bitrate: ' + this.y.toFixed(2) + ' Kbps' + '
' + this.points[0].point.z + '
';
}
else {
return '' + Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) + ' \u25CF Bitrate: ' + this.y.toFixed(2) + ' Kbps'; } } }, series: [{ lineWidth: 1, name: "Kbps", data: bitrateHistoryGraphArray.reverse().sort(sortFunction), type: 'areaspline', color: '#5557FE', negativeColor: '#5679c4', fillOpacity: 0.5, turboThreshold: 0, tooltip: { valueDecimals: 2 } }] }, function (chart) { //add this function to the chart definition to get synchronized crosshairs syncronizeCrossHairs(chart); }); var bitrateChart = getChartReferenceByClassName('bitrateChart'); if (window.streamDetailHistoryGraphProbeQuantity < 2) { bitrateChart.setTitle({ text: "Data Rate for " + data[0].LOCATION_ID.replace('_', ' ') }); bitrateChart.setTitle(null, { text: "Data rate history" }); } $('#ttpDetailGraph').highcharts('StockChart', { chart: { /* renderTo: 'ttpDetailGraph', */ className: 'ttpChart', type: 'line', zoomType: 'x', //x axis only borderColor: '#003399', //'#022455', borderWidth: 0, isZoomed: false }, title: { text: 'Average TTP' }, subtitle: { text: 'Time-To-Play history, averaged by geo locations' }, xAxis: { type: 'datetime', tickInterval: 24 * 3600 * 1000, dateTimeLabelFormats: { // don't display the dummy year month: '%e. %b', year: '%b' }, title: { text: 'Date' }, startOnTick: true, endOnTick: true, showLastLabel: true, events: { afterSetExtremes: function () { if (!this.chart.options.chart.isZoomed) { var xMin = this.chart.xAxis[0].min; var xMax = this.chart.xAxis[0].max; var zmRange = computeTickInterval(xMin, xMax); bitrateChart.xAxis[0].options.tickInterval = zmRange; bitrateChart.xAxis[0].isDirty = true; ttpChart.xAxis[0].options.tickInterval = zmRange; ttpChart.xAxis[0].isDirty = true; bitrateChart.options.chart.isZoomed = true; bitrateChart.xAxis[0].setExtremes(xMin, xMax, true); bitrateChart.options.chart.isZoomed = false; } } } }, rangeSelector: { selected: 1, buttons: [{ type: 'minute', count: 60, text: '1h' }, { type: 'day', count: 1, text: '1d' }, { type: 'week', count: 1, text: '1w' }, { type: 'month', count: 1, text: '1m' }, { type: 'year', count: 1, text: '1y' }, { type: 'all', text: 'All' }] }, plotOptions: { series: { connectNulls: false, marker: { enabled: true }, dataGrouping: { enabled: false }, point: { events: { click: function () { if (typeof this.options.v !== 'undefined') { probeIntervalLogModal(probeID, this.options.w, this.options.v); } else { probeIntervalLogModal(probeID, this.options.w); } } } }, cursor: "pointer" } }, tooltip: { formatter: function () { //console.log('Highchart: this '); //console.log(this); if (this.points[0].point.z.length > 0) { return '' + Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) + '
\u25CF TTP: ' + (this.y / 1000).toFixed(2) + ' Seconds' + '
' + this.points[0].point.z + '
';
}
else {
return '' + Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) + ' \u25CF TTP: ' + (this.y / 1000).toFixed(2) + ' Seconds'; } } }, series: [{ lineWidth: 1, name: "TTP", data: ttpHistoryGraphArray.reverse().sort(sortFunction), type: 'areaspline', color: '#3FB33B', negativeColor: '#5679c4', fillOpacity: 0.5, turboThreshold: 0, tooltip: { valueDecimals: 2 } }] }, function (chart) { //add this function to the chart definition to get synchronized crosshairs syncronizeCrossHairs(chart); }); var ttpChart = getChartReferenceByClassName('ttpChart'); if (window.streamDetailHistoryGraphProbeQuantity < 2) { ttpChart.setTitle({ text: "TTP for " + data[0].LOCATION_ID.replace('_', ' ') }); ttpChart.setTitle(null, { text: "Time-To-Play history" }); } }); }); } drawDetailCharts(probeID, moment($('#streamDetailDateRangeFrom').val()).unix(), moment($('#streamDetailDateRangeTo').val()).unix()); console.log($("td.stream span.streamFriendlyName", $(this).parent().parent()).html()); }); $("#streamDetailModal").on('hidden.bs.modal', function (e) { $(".geo-server-list li:not(.geo-server-demo)").unbind("click"); $(".thumbnailRefresh ").unbind("click"); clearInterval(window.thumbnailCheckInterval); $(".thumbnailRefresh").hide(); $(".geo-server-list").html(''); $(".streamDetailGraph").html(''); $("#streamDetailModal .img-thumbnail").attr('src', 'content/img/SnapShotError.png'); /* Reset progress bars */ $("#bitrateDetailGraph").html('
'); $("#ttpDetailGraph").html('
'); }); $(document).on("click", ".demo-stream-detail, #demo-test td:not(.controls)", function (e) { e.preventDefault(); if ($(this).hasClass('demo-stream-detail')) { var probeID = $(this).parent().parent().attr('data-probe'); $("#streamDetailModal .streamDetailThumb").attr('src', $("td.stream img", $(this).parent().parent()).attr('src')); $("#streamDetailModal .modal-title").html($("td.streamName span.streamFriendlyName", $(this).parent().parent()).html() + ' ' + $("td.streamURL", $(this).parent().parent()).text() + ''); } else { var probeID = $(this).parent().attr('data-probe'); $("#streamDetailModal .streamDetailThumb").attr('src', $("td.stream img", $(this).parent()).attr('src')); $("#streamDetailModal .modal-title").html($("td.streamName span.streamFriendlyName", $(this).parent()).html() + ' ' + $("td.streamURL", $(this).parent()).text() + ''); } $(".streamDetailMonitorStage").html('PROBING'); $(".streamDetailDateCreated").html(moment().format('MMMM Do YYYY, h:mm:ss a')); $(".streamDetailProbeInterval").html('2 minutes'); $(".streamDetailCurrentProbeNumber").html('42'); $(".streamDetailNotificationEmail").html("None"); $(".streamDetailLastNotification").html("None"); $("#streamDetailModal .modal-dialog").css('width', '960px'); $('#streamDetailModal').modal('show'); /* Thumbnail Refresh Demo */ $(".thumbnailRefresh").fadeIn('slow'); $(".thumbnailRefresh").on('click', function () { $(".thumbnailRefresh").unbind("click"); $(".thumbnailRefresh").addClass("fa-spin"); $(".thumbnailRefreshOverlay").fadeIn('slow'); $(".thumbnailRefreshCounter").text(moment().add(10, 'seconds').fromNow()); setTimeout(function () { $(".thumbnailRefreshOverlay").fadeOut(); $(".thumbnailRefresh").removeClass('fa-spin'); $(".thumbnailCont img").attr('src', 'content/img/demo-screen-2.png'); $("#demo-test td.streamName img").attr('src', 'content/img/demo-screen-2.png'); }, 10000); }); $(".geo-server-list").append('
WEST US
EAST US
\u25CF Bitrate: ' + this.y.toFixed(2) + ' Kbps'; } }, series: [{ lineWidth: 1, name: "Kbps", data: demoGraphHighchart.reverse(), type: 'areaspline', color: '#5557FE', negativeColor: '#5679c4', fillOpacity: 0.5, turboThreshold: 0, tooltip: { valueDecimals: 2 } }] }, function (chart) { //add this function to the chart definition to get synchronized crosshairs syncronizeCrossHairs(chart); }); var bitrateChart = getChartReferenceByClassName('bitrateChart'); $('#ttpDetailGraph').highcharts('StockChart', { chart: { /* renderTo: 'ttpDetailGraph', */ className: 'ttpChart', type: 'line', zoomType: 'x', //x axis only borderColor: '#003399', //'#022455', borderWidth: 0, isZoomed: false }, title: { text: 'Average TTP' }, subtitle: { text: 'Data Time-To-Play history, averaged by geo locations' }, xAxis: { type: 'datetime', tickInterval: 24 * 3600 * 1000, dateTimeLabelFormats: { // don't display the dummy year month: '%e. %b', year: '%b' }, title: { text: 'Date' }, startOnTick: true, endOnTick: true, showLastLabel: true, events: { afterSetExtremes: function () { if (!this.chart.options.chart.isZoomed) { var xMin = this.chart.xAxis[0].min; var xMax = this.chart.xAxis[0].max; var zmRange = computeTickInterval(xMin, xMax); bitrateChart.xAxis[0].options.tickInterval = zmRange; bitrateChart.xAxis[0].isDirty = true; ttpChart.xAxis[0].options.tickInterval = zmRange; ttpChart.xAxis[0].isDirty = true; bitrateChart.options.chart.isZoomed = true; bitrateChart.xAxis[0].setExtremes(xMin, xMax, true); bitrateChart.options.chart.isZoomed = false; } } } }, rangeSelector: { selected: 1, buttons: [{ type: 'minute', count: 60, text: '1h' }, { type: 'day', count: 1, text: '1d' }, { type: 'week', count: 1, text: '1w' }, { type: 'month', count: 1, text: '1m' }, { type: 'year', count: 1, text: '1y' }, { type: 'all', text: 'All' }] }, plotOptions: { series: { connectNulls: false, marker: { enabled: true }, dataGrouping: { enabled: false } } }, tooltip: { formatter: function () { return '' + Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) + '
\u25CF TTP: ' + (this.y / 1000).toFixed(2) + ' Seconds'; } }, series: [{ lineWidth: 1, name: "TTP", data: demoGraphHighChartTTP.reverse(), type: 'areaspline', color: '#3FB33B', negativeColor: '#5679c4', fillOpacity: 0.5, tooltip: { valueDecimals: 2 } }] }, function (chart) { //add this function to the chart definition to get synchronized crosshairs syncronizeCrossHairs(chart); }); var ttpChart = getChartReferenceByClassName('ttpChart'); }, 800); /* "fake" detail graphs for demo server list */ $(".geo-server-list li.geo-server-demo").on("click", function (e) { window.streamDetailGeoCurrentLocation = $(this).attr('data-geo-location'); var bitrateHistoryGraphArray = new Array([1470641461187, 344.45], [1470640499643, 0], [1470639550237, 76], [1470638581863, 0], [1470637143443, 312.35], [1470636177583, 283.9], [1470635206640, 509.25], [1470634301437, 460.05], [1470633331720, 324.55], [1470632348943, 0], [1470631355553, 229.95], [1470630390347, 325.9], [1470629438723, 390.95], [1470628741913, 0], [1470627509123, 647.85], [1470626573767, 217.15], [1470625608157, 341.75], [1470624634907, 231.5], [1470623716047, 60], [1470622773820, 0], [1470620373817, 328.85], [1470619461227, 181.3], [1470618508640, 278], [1470617625707, 383.35], [1470616722540, 133.45], [1470615824563, 194.7], [1470614873207, 260.3], [1470613933590, 415.25], [1470612947110, 0], [1470611990950, 242.55], [1470611020373, 382.5], [1470610074910, 411], [1470609120940, 33.45], [1470608290923, 446.85], [1470607355747, 555.05], [1470606342317, 337.6], [1470605420890, 308.5], [1470604455770, 326.55], [1470603510567, 181.85], [1470602553160, 376.25], [1470601617767, 0], [1470600836180, 557.4], [1470599840667, 120], [1470598911977, 403.2], [1470597976390, 347.85], [1470597058987, 0], [1470596147373, 609], [1470595263710, 325.05], [1470594275360, 0], [1470593356980, 392], [1470592432043, 386.05], [1470591506677, 0], [1470590595367, 370.25], [1470589705467, 153.1], [1470588776167, 245.2], [1470587853623, 410.25], [1470586944837, 282.3], [1470583513987, 654.7], [1470459872893, 0], [1470458978323, 558.35], [1470458107243, 187.75], [1470457230270, 0], [1470456340197, 137.85], [1470455465620, 72.55], [1470453685883, 558.9], [1470452795910, 0], [1470451895977, 460.7], [1470451020460, 0], [1470450164120, 233.65], [1470449301570, 261.8], [1470448433957, 175.45], [1470447583247, 348.2], [1470446706600, 477.2], [1470445862793, 0], [1470445000200, 244.4], [1470444165653, 230], [1470443313090, 310.95], [1470442467310, 499.2], [1470441620267, 558.7], [1470440837573, 110.75], [1470439952690, 237.85], [1470439108953, 0], [1470438233943, 213.5], [1470437393570, 551.9], [1470436632990, 386.9], [1470435711840, 0], [1470434853650, 497.8], [1470434057397, 0], [1470433175757, 291.65], [1470432350287, 170.65], [1470431527120, 259.6], [1470430704057, 147.75], [1470429884837, 438.6], [1470429093550, 0], [1470428250320, 387.9], [1470427419313, 285.9], [1470426618190, 583.95], [1470425806680, 0], [1470425001207, 386.9], [1470424212167, 0], [1470422592147, 271.4], [1470421974470, 394.4], [1470421159343, 281.4], [1470420161967, 0], [1470419305860, 437], [1470418487477, 0], [1470417657430, 299.2], [1470416827970, 649.6], [1470416053210, 0], [1470415173360, 778.4], [1470414358357, 0], [1470413529570, 446.2], [1470412706570, 0], [1470411875543, 384], [1470411050897, 274.1], [1470410248823, 49.8], [1470408728690, 357.7], [1470407940873, 190.85], [1470407315340, 353], [1470382062417, 0], [1470381223573, 494.1], [1470380486953, 390], [1470379709407, 292.5], [1470378778070, 240.5], [1470377947887, 0], [1470377103963, 293.85], [1470376286247, 599.75], [1470375473033, 229.95], [1470374653583, 140], [1470373944973, 0], [1470373038980, 148.15], [1470372224900, 360.55], [1470371433177, 291.4], [1470370615420, 293], [1470369795920, 711.45], [1470369025310, 162.25], [1470368407153, 383.9], [1470367411060, 475.55], [1470366767507, 389.7], [1470366090600, 0], [1470348113883, 221.75], [1470347352640, 833.5], [1470346576370, 0], [1470345830907, 76.9], [1470345077930, 458.7], [1470344325060, 891.5], [1470343582797, 0], [1470342834223, 898.75], [1470342125920, 307.6], [1470341408870, 275.55], [1470340570803, 274.35], [1470339815750, 145.8], [1470339050430, 0], [1470338376173, 707.4], [1470337743437, 250.75], [1470337350910, 0], [1470335788447, 631.3], [1470335145427, 0], [1470333394847, 194.6], [1470295677653, 181.9], [1470294945447, 250.9], [1470294217800, 305.55], [1470293497790, 261.4], [1470292790580, 193.35], [1470292091523, 0], [1470291320003, 517.65], [1470290739867, 0], [1470289859923, 290.95], [1470289095057, 624.95], [1470288347440, 303.4], [1470287611793, 0], [1470286900023, 510.2], [1470286180040, 0], [1470285448043, 52.9], [1470284727540, 420.7], [1470284048697, 0], [1470283289677, 349.7], [1470282571043, 289.95], [1470281835917, 0], [1470281096010, 168.3], [1470280361983, 361.9], [1470279598473, 50.85], [1470278868613, 462.35], [1470278122903, 102.85], [1470277396910, 48.1], [1470276642207, 0], [1470275897767, 160.85], [1470275152950, 204.7], [1470274504887, 455.35], [1470273671753, 0], [1470272941380, 349.35], [1470272195943, 567.25], [1470271504130, 204.65], [1470270746357, 185.1], [1470270054077, 0], [1470269289740, 64.75], [1470268646763, 212.35], [1470267854017, 186.1], [1470267162627, 433.5], [1470266447343, 683.1], [1470265780737, 206.95], [1470265038560, 351.6], [1470264270030, 325.1], [1470263511037, 0], [1470262751497, 623.4], [1470262007887, 0], [1470261273507, 178], [1470260519433, 272.65], [1470259788797, 293.5], [1470259063170, 288.05], [1470258310193, 365.7], [1470257557117, 0], [1470256809693, 295.55], [1470256038183, 658.85], [1470255282133, 0], [1470254516200, 489.7], [1470253751037, 0], [1470253000153, 315], [1470252258920, 0], [1470251508980, 103.05], [1470250782797, 739.75], [1470250039287, 190.4], [1470249494667, 0], [1470248552567, 500.5], [1470247811510, 0], [1470247062143, 433.85], [1470246296990, 0], [1469723523127, 114.85], [1469723188847, 111.4], [1469722855230, 22.2], [1469722528473, 226.05], [1469722192577, 0], [1469721859613, 212.55], [1469721533867, 109.1], [1469721196513, 111.5], [1469720869470, 111.25], [1469720536603, 102.65], [1469720202440, 109.1], [1469719873370, 114.85], [1469719540417, 115.35], [1469719209517, 0], [1469718883610, 109.05], [1469718551773, 109.2], [1469718228370, 220.9], [1469717905657, 111.85], [1469717572587, 112.45], [1469717243823, 114.3], [1469716921167, 115.05], [1469716595687, 111.35], [1469716271490, 115.15], [1469715944257, 109.55], [1469715614947, 0], [1469715138483, 111.45], [1469714807493, 133.05], [1469714482740, 108.75], [1469714159093, 109.5], [1469713832053, 0], [1469713517000, 149.25], [1469713185307, 114.4], [1469712856287, 0], [1469712537967, 223.8], [1469712210493, 0], [1469711877977, 111.05], [1469711558663, 110.85], [1469710894200, 227.1], [1469710575773, 0], [1469710242850, 213.45], [1469709916783, 111.35], [1469709588500, 114], [1469709262000, 114.65], [1469708943763, 114.05], [1469708613523, 0], [1469708280497, 114.95], [1469707960467, 114.55], [1469707631997, 223.55], [1469707306030, 0], [1469706975990, 225.7], [1469704836530, 100.35], [1469704504720, 100.65], [1469703822157, 0], [1469658267653, 141], [1469657966910, 100.75], [1469657315107, 0], [1469651866300, 206], [1469651570447, 39.25], [1469651277167, 0], [1469650976297, 100], [1469650675983, 100.2], [1469650234750, 100.25], [1469649929847, 200.8], [1469649487303, 103.8], [1469649176547, 0], [1469648874320, 100.5], [1469648574430, 100.15], [1469648262003, 201.05], [1469647958677, 100.2], [1469647658780, 218.8], [1469647358143, 0], [1469604367817, 398.3], [1469603450103, 195.05]); var ttpHistoryGraphArray = new Array([1470641461187, 8520.5], [1470640499643, 0], [1470639550237, 8091], [1470638581863, 0], [1470637143443, 4388.5], [1470636177583, 2641], [1470635206640, 5071], [1470634301437, 2413], [1470633331720, 1640.5], [1470632348943, 0], [1470631355553, 4115], [1470630390347, 2413.5], [1470629438723, 5278.5], [1470628741913, 0], [1470627509123, 6951], [1470626573767, 2304], [1470625608157, 3118.5], [1470624634907, 2206], [1470623716047, 5473.5], [1470622773820, 0], [1470620373817, 5789.5], [1470619461227, 3921], [1470618508640, 2220.5], [1470617625707, 2243.5], [1470616722540, 2333], [1470615824563, 1936.5], [1470614873207, 3867.5], [1470613933590, 2031], [1470612947110, 0], [1470611990950, 2074], [1470611020373, 1883], [1470610074910, 1048], [1470609120940, 1394], [1470608290923, 540], [1470607355747, 7183.5], [1470606342317, 3137], [1470605420890, 3079], [1470604455770, 2632], [1470603510567, 2653.5], [1470602553160, 2828], [1470601617767, 0], [1470600836180, 7200.5], [1470599840667, 8679], [1470598911977, 3188], [1470597976390, 2576.5], [1470597058987, 0], [1470596147373, 13085.5], [1470595263710, 5792.5], [1470594275360, 0], [1470593356980, 3221], [1470592432043, 7102], [1470591506677, 0], [1470590595367, 3242.5], [1470589705467, 1680], [1470588776167, 3189], [1470587853623, 3485.5], [1470586944837, 3724], [1470583513987, 6128], [1470459872893, 0], [1470458978323, 3294], [1470458107243, 1468], [1470457230270, 0], [1470456340197, 1661], [1470455465620, 1257.5], [1470453685883, 3517], [1470452795910, 0], [1470451895977, 3903.5], [1470451020460, 0], [1470450164120, 1798.5], [1470449301570, 1336], [1470448433957, 2065], [1470447583247, 1593.5], [1470446706600, 3570.5], [1470445862793, 0], [1470445000200, 1549], [1470444165653, 1338], [1470443313090, 985.5], [1470442467310, 651], [1470441620267, 1625.5], [1470440837573, 1247], [1470439952690, 1525.5], [1470439108953, 0], [1470438233943, 1943.5], [1470437393570, 4702.5], [1470436632990, 1727], [1470435711840, 0], [1470434853650, 3152.5], [1470434057397, 0], [1470433175757, 2101.5], [1470432350287, 2609.5], [1470431527120, 2455.5], [1470430704057, 2093], [1470429884837, 4820], [1470429093550, 0], [1470428250320, 2969], [1470427419313, 2173.5], [1470426618190, 4942.5], [1470425806680, 0], [1470425001207, 5629], [1470424212167, 0], [1470422592147, 5409], [1470421974470, 2268.5], [1470421159343, 1998.5], [1470420161967, 0], [1470419305860, 4739], [1470418487477, 0], [1470417657430, 2748.5], [1470416827970, 5711], [1470416053210, 0], [1470415173360, 4959.5], [1470414358357, 0], [1470413529570, 7718.5], [1470412706570, 0], [1470411875543, 3124], [1470411050897, 2704], [1470410248823, 3031], [1470408728690, 3913], [1470407940873, 5455.5], [1470407315340, 5298.5], [1470382062417, 0], [1470381223573, 4622.5], [1470380486953, 2277], [1470379709407, 2008.5], [1470378778070, 2968.5], [1470377947887, 0], [1470377103963, 1902.5], [1470376286247, 4570.5], [1470375473033, 1856], [1470374653583, 1731], [1470373944973, 0], [1470373038980, 2096.5], [1470372224900, 1363.5], [1470371433177, 1213], [1470370615420, 1658.5], [1470369795920, 2748], [1470369025310, 1527], [1470368407153, 1076], [1470367411060, 961.5], [1470366767507, 1796], [1470366090600, 0], [1470348113883, 2551.5], [1470347352640, 4238.5], [1470346576370, 0], [1470345830907, 1687], [1470345077930, 2227.5], [1470344325060, 3658], [1470343582797, 0], [1470342834223, 3014], [1470342125920, 2628], [1470341408870, 2428], [1470340570803, 2417], [1470339815750, 2673.5], [1470339050430, 0], [1470338376173, 3898.5], [1470337743437, 2846.5], [1470337350910, 0], [1470335788447, 4447.5], [1470335145427, 0], [1470333394847, 3105.5], [1470295677653, 2219], [1470294945447, 3087.5], [1470294217800, 1191], [1470293497790, 1112], [1470292790580, 788.5], [1470292091523, 0], [1470291320003, 4255.5], [1470290739867, 0], [1470289859923, 2828], [1470289095057, 6044.5], [1470288347440, 2063], [1470287611793, 0], [1470286900023, 3750], [1470286180040, 0], [1470285448043, 1482], [1470284727540, 4254], [1470284048697, 0], [1470283289677, 3510.5], [1470282571043, 2337.5], [1470281835917, 0], [1470281096010, 2610], [1470280361983, 4023], [1470279598473, 1312.5], [1470278868613, 4850], [1470278122903, 2919.5], [1470277396910, 3004.5], [1470276642207, 0], [1470275897767, 2661], [1470275152950, 2445.5], [1470274504887, 4523], [1470273671753, 0], [1470272941380, 2377.5], [1470272195943, 5897], [1470271504130, 2321.5], [1470270746357, 2527], [1470270054077, 0], [1470269289740, 2057.5], [1470268646763, 2732.5], [1470267854017, 1730], [1470267162627, 2756.5], [1470266447343, 4146], [1470265780737, 2707.5], [1470265038560, 2586.5], [1470264270030, 4075.5], [1470263511037, 0], [1470262751497, 4179.5], [1470262007887, 0], [1470261273507, 1850], [1470260519433, 1266], [1470259788797, 4081], [1470259063170, 1509], [1470258310193, 2075.5], [1470257557117, 0], [1470256809693, 1640], [1470256038183, 6914], [1470255282133, 0], [1470254516200, 4453], [1470253751037, 0], [1470253000153, 4736], [1470252258920, 0], [1470251508980, 2725.5], [1470250782797, 5369], [1470250039287, 2551.5], [1470249494667, 0], [1470248552567, 6510], [1470247811510, 0], [1470247062143, 4667.5], [1470246296990, 0], [1469723523127, 0], [1469723188847, 0], [1469722855230, 0], [1469722528473, 0], [1469722192577, 0], [1469721859613, 0], [1469721533867, 0], [1469721196513, 0], [1469720869470, 0], [1469720536603, 0], [1469720202440, 0], [1469719873370, 0], [1469719540417, 0], [1469719209517, 0], [1469718883610, 0], [1469718551773, 0], [1469718228370, 0], [1469717905657, 0], [1469717572587, 0], [1469717243823, 0], [1469716921167, 0], [1469716595687, 0], [1469716271490, 0], [1469715944257, 0], [1469715614947, 0], [1469715138483, 0], [1469714807493, 0], [1469714482740, 0], [1469714159093, 0], [1469713832053, 0], [1469713517000, 0], [1469713185307, 0], [1469712856287, 0], [1469712537967, 0], [1469712210493, 0], [1469711877977, 0], [1469711558663, 0], [1469710894200, 0], [1469710575773, 0], [1469710242850, 0], [1469709916783, 0], [1469709588500, 0], [1469709262000, 0], [1469708943763, 0], [1469708613523, 0], [1469708280497, 0], [1469707960467, 0], [1469707631997, 0], [1469707306030, 0], [1469706975990, 0], [1469704836530, 0], [1469704504720, 0], [1469703822157, 0], [1469658267653, 0], [1469657966910, 0], [1469657315107, 0], [1469651866300, 0], [1469651570447, 0], [1469651277167, 0], [1469650976297, 0], [1469650675983, 0], [1469650234750, 0], [1469649929847, 0], [1469649487303, 0], [1469649176547, 0], [1469648874320, 0], [1469648574430, 0], [1469648262003, 0], [1469647958677, 0], [1469647658780, 0], [1469647358143, 0], [1469604367817, 0], [1469603450103, 0]); /* ---- Graph Sync ---- */ var bitrateChart; var ttpChart; var controllingChart; var defaultTickInterval = 5; var currentTickInterval = defaultTickInterval; function unzoom() { bitrateChart.options.chart.isZoomed = false; ttpChart.options.chart.isZoomed = false; bitrateChart.xAxis[0].setExtremes(null, null); ttpChart.xAxis[0].setExtremes(null, null); } //catch mousemove event and have all 3 charts' crosshairs move along indicated values on x axis function syncronizeCrossHairs(chart) { var container = $(chart.container), offset = container.offset(), x, y, isInside, report; //console.log("Chart cont: "); //console.log(chart.container); container.mousemove(function (evt) { x = evt.clientX - chart.plotLeft - offset.left; y = evt.clientY - chart.plotTop - offset.top; var xAxis = chart.xAxis[0]; //remove old plot line and draw new plot line (crosshair) for this chart var xAxis1 = bitrateChart.xAxis[0]; xAxis1.removePlotLine("myPlotLineId"); xAxis1.addPlotLine({ value: chart.xAxis[0].translate(x, true), width: 1, color: 'red', //dashStyle: 'dash', id: "myPlotLineId" }); //remove old crosshair and draw new crosshair on chart2 var xAxis2 = ttpChart.xAxis[0]; xAxis2.removePlotLine("myPlotLineId"); xAxis2.addPlotLine({ value: chart.xAxis[0].translate(x, true), width: 1, color: 'red', //dashStyle: 'dash', id: "myPlotLineId" }); }); } //compute a reasonable tick interval given the zoom range - //have to compute this since we set the tickIntervals in order //to get predictable synchronization between 3 charts with //different data. function computeTickInterval(xMin, xMax) { var zoomRange = xMax - xMin; if (zoomRange <= 2) currentTickInterval = 0.5; if (zoomRange < 20) currentTickInterval = 1; else if (zoomRange < 100) currentTickInterval = 5; } //explicitly set the tickInterval for the 3 charts - based on //selected range function setTickInterval(event) { var xMin = event.xAxis[0].min; var xMax = event.xAxis[0].max; computeTickInterval(xMin, xMax); bitrateChart.xAxis[0].options.tickInterval = currentTickInterval; bitrateChart.xAxis[0].isDirty = true; ttpChart.xAxis[0].options.tickInterval = currentTickInterval; ttpChart.xAxis[0].isDirty = true; } //reset the extremes and the tickInterval to default values function unzoom() { bitrateChart.xAxis[0].options.tickInterval = defaultTickInterval; bitrateChart.xAxis[0].isDirty = true; ttpChart.xAxis[0].options.tickInterval = defaultTickInterval; ttpChart.xAxis[0].isDirty = true; bitrateChart.xAxis[0].setExtremes(null, null); ttpChart.xAxis[0].setExtremes(null, null); } /* ---- Graph Sync ---- */ var bitrateHistoryGraphArray; var ttpHistoryGraphArray; $('#bitrateDetailGraph').highcharts('StockChart', { chart: { /* renderTo: 'bitrateDetailGraph', */ className: 'bitrateChart', type: 'line', zoomType: 'x', //x axis only borderColor: '#003399', //'#022455', borderWidth: 0, isZoomed: false }, title: { text: 'Data Rate for ' + window.streamDetailGeoCurrentLocation.replace('_', ' ') }, subtitle: { text: 'Data rate history' }, xAxis: { type: 'datetime', tickInterval: 24 * 3600 * 1000, dateTimeLabelFormats: { // don't display the dummy year month: '%e. %b', year: '%b' }, title: { text: 'Date' }, startOnTick: true, endOnTick: true, showLastLabel: true, events: { afterSetExtremes: function () { if (!this.chart.options.chart.isZoomed) { var xMin = this.chart.xAxis[0].min; var xMax = this.chart.xAxis[0].max; var zmRange = computeTickInterval(xMin, xMax); bitrateChart.xAxis[0].options.tickInterval = zmRange; bitrateChart.xAxis[0].isDirty = true; ttpChart.xAxis[0].options.tickInterval = zmRange; ttpChart.xAxis[0].isDirty = true; ttpChart.options.chart.isZoomed = true; ttpChart.xAxis[0].setExtremes(xMin, xMax, true); ttpChart.options.chart.isZoomed = false; } } } }, rangeSelector: { selected: 1, buttons: [{ type: 'minute', count: 60, text: '1h' }, { type: 'day', count: 1, text: '1d' }, { type: 'week', count: 1, text: '1w' }, { type: 'month', count: 1, text: '1m' }, { type: 'year', count: 1, text: '1y' }, { type: 'all', text: 'All' }] }, plotOptions: { series: { connectNulls: false, marker: { enabled: true }, dataGrouping: { enabled: false } } }, tooltip: { formatter: function () { return '' + Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) + '
\u25CF Bitrate: ' + this.y.toFixed(2) + ' Kbps'; } }, series: [{ lineWidth: 1, name: "Kbps", data: bitrateHistoryGraphArray.reverse(), type: 'areaspline', color: '#5557FE', negativeColor: '#5679c4', fillOpacity: 0.5, tooltip: { valueDecimals: 2 } }] }, function (chart) { //add this function to the chart definition to get synchronized crosshairs syncronizeCrossHairs(chart); }); var bitrateChart = getChartReferenceByClassName('bitrateChart'); $('#ttpDetailGraph').highcharts('StockChart', { chart: { /* renderTo: 'ttpDetailGraph', */ className: 'ttpChart', type: 'line', zoomType: 'x', //x axis only borderColor: '#003399', //'#022455', borderWidth: 0, isZoomed: false }, title: { text: 'TTP for ' + window.streamDetailGeoCurrentLocation.replace('_', ' ') }, subtitle: { text: 'Time-To-Play history' }, xAxis: { type: 'datetime', tickInterval: 24 * 3600 * 1000, dateTimeLabelFormats: { // don't display the dummy year month: '%e. %b', year: '%b' }, title: { text: 'Date' }, startOnTick: true, endOnTick: true, showLastLabel: true, events: { afterSetExtremes: function () { if (!this.chart.options.chart.isZoomed) { var xMin = this.chart.xAxis[0].min; var xMax = this.chart.xAxis[0].max; var zmRange = computeTickInterval(xMin, xMax); bitrateChart.xAxis[0].options.tickInterval = zmRange; bitrateChart.xAxis[0].isDirty = true; ttpChart.xAxis[0].options.tickInterval = zmRange; ttpChart.xAxis[0].isDirty = true; bitrateChart.options.chart.isZoomed = true; bitrateChart.xAxis[0].setExtremes(xMin, xMax, true); bitrateChart.options.chart.isZoomed = false; } } } }, rangeSelector: { selected: 1, buttons: [{ type: 'minute', count: 60, text: '1h' }, { type: 'day', count: 1, text: '1d' }, { type: 'week', count: 1, text: '1w' }, { type: 'month', count: 1, text: '1m' }, { type: 'year', count: 1, text: '1y' }, { type: 'all', text: 'All' }] }, plotOptions: { series: { connectNulls: false, marker: { enabled: true }, dataGrouping: { enabled: false } } }, tooltip: { formatter: function () { return '' + Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) + '
\u25CF TTP: ' + (this.y / 1000).toFixed(2) + ' Seconds'; } }, series: [{ lineWidth: 1, name: "TTP", data: ttpHistoryGraphArray.reverse(), type: 'areaspline', color: '#3FB33B', negativeColor: '#5679c4', fillOpacity: 0.5, tooltip: { valueDecimals: 2 } }] }, function (chart) { //add this function to the chart definition to get synchronized crosshairs syncronizeCrossHairs(chart); }); var ttpChart = getChartReferenceByClassName('ttpChart'); }); }); $('#filterSearch').on('keyup keypress blur change', function (e) { // e.type is the type of event fired if ($("#filterSearch").val().length > 0) { $("#monitoredStreams tbody tr[data-probe]:not([data-status='DELETED'], [data-probe-number='0'])").each(function (index) { if ($(this).text().toLowerCase().indexOf($("#filterSearch").val().toLowerCase()) == -1) { $(this).hide(); } else { $(this).show(); ga('send', 'event', 'Monitoring', 'Monitor Search', $("#filterSearch").val()); } }); } else { $("#monitoredStreams tbody tr[data-probe]:not([data-status='DELETED'], [data-probe-number='0'])").show(); } }); $(function () { $('.list-group.checked-list-box .list-group-item').each(function () { // Settings var $widget = $(this), $checkbox = $(''), color = ($widget.data('color') ? $widget.data('color') : "primary"), style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"), settings = { on: { icon: 'glyphicon glyphicon-check' }, off: { icon: 'glyphicon glyphicon-unchecked' } }; $widget.css('cursor', 'pointer') $widget.append($checkbox); // Event Handlers $widget.on('click', function () { $checkbox.prop('checked', !$checkbox.is(':checked')); $checkbox.triggerHandler('change'); updateDisplay(); }); $checkbox.on('change', function () { updateDisplay(); }); // Actions function updateDisplay() { var isChecked = $checkbox.is(':checked'); // Set the button's state $widget.data('state', (isChecked) ? "on" : "off"); // Set the button's icon $widget.find('.state-icon') .removeClass() .addClass('state-icon ' + settings[$widget.data('state')].icon); // Update the button's color if (isChecked) { $widget.addClass(style + color + ' active'); } else { $widget.removeClass(style + color + ' active'); } } // Initialization function init() { if ($widget.data('checked') == true) { $checkbox.prop('checked', !$checkbox.is(':checked')); } updateDisplay(); // Inject the icon if applicable if ($widget.find('.state-icon').length == 0) { $widget.prepend(''); } } init(); }); $('#get-checked-data').on('click', function (event) { event.preventDefault(); var checkedItems = {}, counter = 0; $("#check-list-box li.active").each(function (idx, li) { checkedItems[counter] = $(li).text(); counter++; }); $('#display-json').html(JSON.stringify(checkedItems, null, '\t')); }); $('.modal').on('hidden.bs.modal', function (e) { if ($('.modal.in').is(':visible')) { setTimeout(function () { $('body').addClass('modal-open'); }, 250); } }); $('#intervalLogModal').on('hidden.bs.modal', function (e) { $(".intervalLogExplaination").empty(); }); var clipboard = new Clipboard('.btn-copy'); /*clipboard.on('success', function(e) { var originalTarget = $(this); var originalText = $(this).text(); originalTarget.text("Text copied!"); setTimeout(function(){ originalTarget.text(originalText); }, 3000); });*/ clipboard.on('success', function (e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); }); clipboard.on('error', function (e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); }); }); });