Vehicle Count Visualization Using ApexCharts in ASP.NET MVC

Introduction

This snippet demonstrates how to create a responsive donut chart in an ASP.NET MVC Razor view using ApexCharts to visualize vehicle category data. It combines static icon indicators with dynamic data retrieved from the server model, providing an interactive and mobile-friendly graphical summary of counts for vehicle types B and C. This approach is useful for dashboards that require clear, real-time visualization of categorized statistics.

This snippet visualizes vehicle category data (types B and C) using a donut chart created with ApexCharts in an ASP.NET MVC Razor view. The code performs the following.

• Displays static icons with initial count placeholders for vehicle types B and C.
• Retrieves dynamic data from the Razor Model using @Html.Raw(Json.Encode(...)).
• Parses the incoming counts safely from the cledetails array in the model.
• Renders an interactive, responsive donut chart using the extracted values.

The chart adapts to screen size, ensuring mobile-friendly behavior. This implementation is helpful for dashboards where a quick, visual summary of categorized counts (like vehicle in/out stats) is needed.

Code

<span class="d-block" style="font-size:12px; font-weight:600;">
    <img src="~/img/b.png" class="img-fluid" width="26px" /> B: 0
</span>
<span class="d-block" style="font-size:12px; font-weight:600;">
    <img src="~/img/c.png" class="img-fluid" width="26px" /> C: 0
</span>

<script>
    var Data = @Html.Raw(Json.Encode(Model));
    debugger;

    var C = 0;
    var BCount = 0;
    var CarCount = 0;
    var BiCount = 0;

    if (Data && Data.cledetails && Data.cledetails.length >= 1) {
        CarCount = parseInt(Data.cledetails[0].cle_in_count, 10) || 0;

        // Check if the second element exists before trying to access it
        BiCount = (Data.cledetails.length > 1)
            ? parseInt(Data.cledetails[1].cle_in_count, 10) || 0
            : 0;
    }

    var options = {
        series: [BiCount, C],
        labels: ["Bi", "C"],
        chart: {
            type: 'donut',
            height: 300
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200,
                    height: 300
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    };

    var chart = new ApexCharts(document.querySelector("#chart_partial"), options);
    chart.render();
</script>

Conclusion

This code snippet integrates ApexCharts into an ASP.NET MVC Razor view to create a dynamic and responsive donut chart that visually summarizes vehicle category data, specifically for types B and C. Initially, it displays static icons alongside placeholder counts for each vehicle type to maintain consistent UI elements. The core of the logic involves retrieving the server-side Model data, encoded as JSON using Razor’s @Html.Raw(Json.Encode(Model)), and parsing the relevant counts safely from the cledetails array within this model. The script checks for the existence of data and extracts the vehicle counts, defaulting to zero if no valid data is found, ensuring robustness against missing or incomplete data. These parsed counts are then used to populate the series data for the ApexCharts donut chart. The chart is configured with labels corresponding to the vehicle types and includes responsive behavior, adjusting the chart’s size and legend position on smaller screens like mobile devices. This setup provides an interactive and visually intuitive summary of categorized vehicle counts, making it ideal for dashboard views where users need quick insight into vehicle inflow statistics or similar categorized metrics.