shopdb/charts/topincidentschart.asp

<%
' Top 10 Longest Incidents - by time period (week/month/year)

Dim periodFilterTop, periodLabelTop, sqlDateFilterTop
periodFilterTop = Request.QueryString("period")

' Default to current month if no filter specified
If periodFilterTop = "" Or periodFilterTop = "month" Then
    periodFilterTop = "month"
    periodLabelTop = "This Month"
    sqlDateFilterTop = "n.starttime >= DATE_SUB(NOW(), INTERVAL 30 DAY)"
ElseIf periodFilterTop = "week" Then
    periodLabelTop = "This Week"
    sqlDateFilterTop = "n.starttime >= DATE_SUB(NOW(), INTERVAL 7 DAY)"
ElseIf periodFilterTop = "year" Then
    periodLabelTop = "This Year"
    sqlDateFilterTop = "n.starttime >= DATE_SUB(NOW(), INTERVAL 1 YEAR)"
Else
    ' Default fallback
    periodFilterTop = "month"
    periodLabelTop = "This Month"
    sqlDateFilterTop = "n.starttime >= DATE_SUB(NOW(), INTERVAL 30 DAY)"
End If

' Query to get top 10 longest incidents
strSQL_TopIncidents = "SELECT " & _
                      "n.notificationid, " & _
                      "n.notification, " & _
                      "nt.typename, " & _
                      "n.starttime, " & _
                      "n.endtime, " & _
                      "TIMESTAMPDIFF(MINUTE, n.starttime, n.endtime) as duration_minutes " & _
                      "FROM notifications n " & _
                      "INNER JOIN notificationtypes nt ON n.notificationtypeid = nt.notificationtypeid " & _
                      "WHERE " & sqlDateFilterTop & " " & _
                      "AND n.starttime IS NOT NULL " & _
                      "AND n.endtime IS NOT NULL " & _
                      "AND n.endtime > n.starttime " & _
                      "AND nt.typename <> 'TBD' " & _
                      "ORDER BY duration_minutes DESC " & _
                      "LIMIT 10"

Set rsTopIncidents = objconn.Execute(strSQL_TopIncidents)

' Build arrays for chart data
Dim incidentNames(), incidentDurations()
ReDim incidentNames(9)  ' Top 10
ReDim incidentDurations(9)
Dim topIndex
topIndex = 0

Do While Not rsTopIncidents.EOF And topIndex < 10
    ' Truncate long notification names
    Dim notifText
    notifText = rsTopIncidents("notification") & ""
    If Len(notifText) > 30 Then
        notifText = Left(notifText, 27) & "..."
    End If

    incidentNames(topIndex) = notifText
    incidentDurations(topIndex) = CLng(rsTopIncidents("duration_minutes"))
    topIndex = topIndex + 1
    rsTopIncidents.MoveNext
Loop

rsTopIncidents.Close
Set rsTopIncidents = Nothing

Dim actualTopCount
actualTopCount = topIndex

' Build data strings for chart
Dim chartLabelsTop, chartDataTop, chartColorsTop
chartLabelsTop = ""
chartDataTop = ""
chartColorsTop = ""

Dim j
For j = 0 To actualTopCount - 1
    If chartLabelsTop <> "" Then
        chartLabelsTop = chartLabelsTop & ", "
        chartDataTop = chartDataTop & ", "
        chartColorsTop = chartColorsTop & ", "
    End If
    chartLabelsTop = chartLabelsTop & """" & Replace(incidentNames(j), """", "\""") & """"
    chartDataTop = chartDataTop & incidentDurations(j)

    ' Use white/semi-transparent colors
    Dim topOpacity
    If j = 0 Then
        chartColorsTop = chartColorsTop & """#ffffff"""
    Else
        topOpacity = FormatNumber(1 - (j * 0.1), 2)
        chartColorsTop = chartColorsTop & """rgba(255, 255, 255, " & topOpacity & ")"""
    End If
Next

' Check if we have data
Dim hasTopData
hasTopData = (actualTopCount > 0)
%>

<% If hasTopData Then %>
<script>
$(function() {
    var ctx = document.getElementById("topIncidentsChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: [<%=chartLabelsTop%>],
            datasets: [{
                backgroundColor: [<%=chartColorsTop%>],
                data: [<%=chartDataTop%>],
                borderWidth: 1,
                borderColor: 'rgba(255, 255, 255, 0.2)'
            }]
        },
        options: {
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    ticks: {
                        fontColor: '#ddd',
                        beginAtZero: true,
                        callback: function(value) {
                            return value + 'm';
                        }
                    },
                    gridLines: {
                        color: 'rgba(255, 255, 255, 0.1)',
                        display: true
                    }
                }],
                yAxes: [{
                    ticks: {
                        fontColor: '#ddd'
                    },
                    gridLines: {
                        color: 'rgba(255, 255, 255, 0.1)',
                        display: false
                    }
                }]
            },
            tooltips: {
                displayColors: true,
                callbacks: {
                    label: function(tooltipItem, data) {
                        var minutes = tooltipItem.xLabel;
                        var hours = (minutes / 60).toFixed(1);
                        return minutes + ' minutes (' + hours + 'h)';
                    }
                }
            }
        }
    });
});
</script>
<% End If %>

<div class="col-lg-4">
        <div class="card">
           <div class="card-header">Top 10 Longest Incidents - <%=periodLabelTop%>
             <div class="card-action">
                <div class="dropdown">
                    <a href="javascript:void();" class="dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown">
                        <i class="icon-options"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="?period=week#topincidents">This Week</a>
                        <a class="dropdown-item" href="?period=month#topincidents">This Month</a>
                        <a class="dropdown-item" href="?period=year#topincidents">This Year</a>
                    </div>
                </div>
              </div>
           </div>
           <div class="card-body">
            <% If hasTopData Then %>
		     <div class="chart-container-1">
              			<canvas id="topIncidentsChart"></canvas>
			</div>
            <% Else %>
            <div class="text-center text-muted py-5">
                <i class="zmdi zmdi-info-outline" style="font-size: 48px;"></i>
                <p class="mt-3">No incidents found for <%=periodLabelTop%></p>
            </div>
            <% End If %>
           </div>
        </div>
    </div>