shopdb/charts/kbchart.asp

<%
' Get KB article counts by application/topic (top 8 + Others)
strSQL_KB = "SELECT a.appname, COUNT(k.linkid) as article_count " & _
           "FROM applications a " & _
           "LEFT JOIN knowledgebase k ON a.appid = k.appid AND k.isactive = 1 " & _
           "WHERE a.isactive = 1 " & _
           "GROUP BY a.appid, a.appname " & _
           "HAVING article_count > 0 " & _
           "ORDER BY article_count DESC " & _
           "LIMIT 8"

Set rsKB = objconn.Execute(strSQL_KB)

' Get total count
strSQL_Total = "SELECT COUNT(*) as total FROM knowledgebase WHERE isactive = 1"
Set rsTotal = objconn.Execute(strSQL_Total)
totalArticles = CLng(rsTotal("total"))
rsTotal.Close
Set rsTotal = Nothing

' Build arrays for chart data
Dim appNames(), appCounts()
ReDim appNames(7)
ReDim appCounts(7)
Dim i, topCount
i = 0
topCount = 0

Do While Not rsKB.EOF And i < 8
    appNames(i) = rsKB("appname")
    appCounts(i) = CLng(rsKB("article_count"))
    topCount = topCount + appCounts(i)
    i = i + 1
    rsKB.MoveNext
Loop

rsKB.Close
Set rsKB = Nothing

' Calculate "Others" category
Dim actualCount
actualCount = i
Dim othersCount
othersCount = totalArticles - topCount

' Build labels and data strings for JavaScript
Dim labels, dataValues, colors
labels = ""
dataValues = ""
colors = ""

For i = 0 To actualCount - 1
    If labels <> "" Then
        labels = labels & ", "
        dataValues = dataValues & ", "
        colors = colors & ", "
    End If
    labels = labels & """" & Replace(appNames(i), """", "\""") & """"
    dataValues = dataValues & appCounts(i)

    ' Generate color with opacity based on position
    Dim opacity
    If i = 0 Then
        colors = colors & """#ffffff"""
    Else
        opacity = FormatNumber(1 - (i * 0.1), 2)
        colors = colors & """rgba(255, 255, 255, " & opacity & ")"""
    End If
Next

' Add "Others" if there are more categories
If othersCount > 0 Then
    If labels <> "" Then
        labels = labels & ", "
        dataValues = dataValues & ", "
        colors = colors & ", "
    End If
    labels = labels & """Others"""
    dataValues = dataValues & othersCount
    colors = colors & """rgba(255, 255, 255, 0.20)"""
End If
%>
<script>
$(function() {
    // Plugin to display text in center of donut
    Chart.pluginService.register({
        beforeDraw: function(chart) {
            if (chart.config.options.elements.center) {
                var ctx = chart.chart.ctx;
                var centerConfig = chart.config.options.elements.center;
                var fontStyle = centerConfig.fontStyle || 'Arial';
                var txt = centerConfig.text;
                var color = centerConfig.color || '#000';
                var sidePadding = centerConfig.sidePadding || 20;
                var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2);

                // Draw the number
                ctx.font = "bold 42px " + fontStyle;
                var stringWidth = ctx.measureText(txt).width;
                var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
                var widthRatio = elementWidth / stringWidth;
                var newFontSize = Math.floor(30 * widthRatio);
                var elementHeight = (chart.innerRadius * 2);
                var fontSizeToUse = Math.min(newFontSize, elementHeight);

                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
                var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
                ctx.font = "bold " + fontSizeToUse + "px " + fontStyle;
                ctx.fillStyle = color;
                ctx.fillText(txt, centerX, centerY - 10);

                // Draw the label below the number
                ctx.font = "normal 14px " + fontStyle;
                ctx.fillStyle = color;
                ctx.fillText("Total Articles", centerX, centerY + 20);
            }
        }
    });

    var ctx = document.getElementById("kbChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: [<%=labels%>],
            datasets: [{
                backgroundColor: [<%=colors%>],
                data: [<%=dataValues%>],
                borderWidth: [1, 1, 1, 1, 1, 1, 1, 1, 1]
            }]
        },
        options: {
            maintainAspectRatio: false,
            legend: {
                position: "bottom",
                display: false,
                labels: {
                    fontColor: '#ddd',
                    boxWidth: 15
                }
            },
            tooltips: {
                displayColors: false
            },
            elements: {
                center: {
                    text: '<%=totalArticles%>',
                    color: '#fff',
                    fontStyle: 'Arial',
                    sidePadding: 20
                }
            }
        }
    });
});
</script>

<div class="col-lg-4">
        <div class="card">
           <div class="card-header">Knowledge Base Articles
             <div class="card-action">
              </div>
           </div>
           <div class="card-body">
		     <div class="chart-container-1">
              			<canvas id="kbChart"></canvas>
			</div>
           </div>
           <div class="table-responsive">
             <table class="table align-items-center">
               <tbody>
<%
' Display table rows for each category
Dim rowIndex, rowCount, rowPct
For rowIndex = 0 To actualCount - 1
    rowCount = appCounts(rowIndex)
    rowPct = FormatNumber(CDbl(rowCount)/CDbl(totalArticles)*100, 1)
    Dim opacityClass
    If rowIndex = 0 Then
        opacityClass = "text-white"
    Else
        opacityClass = "text-light-" & rowIndex
    End If
%>
                 <tr>
                   <td><i class="fa fa-circle <%=opacityClass%> mr-2"></i><%=Server.HTMLEncode(appNames(rowIndex))%></td>
                   <td><%=rowCount%></td>
                   <td><%=rowPct%>%</td>
                 </tr>
<%
Next

If othersCount > 0 Then
    Dim othersPct
    othersPct = FormatNumber(CDbl(othersCount)/CDbl(totalArticles)*100, 1)
%>
                 <tr>
                   <td><i class="fa fa-circle text-light-4 mr-2"></i>Others</td>
                   <td><%=othersCount%></td>
                   <td><%=othersPct%>%</td>
                 </tr>
<% End If %>
               </tbody>
             </table>
           </div>
        </div>
	</div>