KPI in Syncfusion Blazor

[syed ibadurrab]

Hi Everyone,

I need to develop KPI on my Blazor Dashboard my requirement is to create Scoreboard KPI on dashboard.

Regards,

Syed Ibadurrab

Attachment: Capture_efe7e354.rar

[Revanth Krishnan]

Hi Syed, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “I need to develop KPI on my Blazor dashboard my requirement is to create Scoreboard KPI on the dashboard”. 

 

We have analyzed the shared attached, you can use the Syncfusion Card components to display the KPI in you application’s dashboard. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<SfCard ID="kpi"> 

    <CardHeader Title="KPI" /> 

    <CardContent EnableSeperator="true" Content="@cardContent" /> 

</SfCard> 

<br /> 

<br /> 

<button class="btn" @onclick="IncrementCount">Change Card Content</button> 

<style> 

    #kpi { 

        width: 300px; 

        background: lightsalmon; 

    } 

</style> 

 

@code { 

    public string cardContent { get; set; } = "10%"; 

    public int currentCount = 10; 

    private void IncrementCount() 

    { 

        this.currentCount = this.currentCount + 10; 

        this.cardContent = this.currentCount.ToString() + "%"; 

    } 

} 

Note: The card content can dynamically be changed. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/163981/ze/Card_Application632246162 

 

Demo Samples: https://blazor.syncfusion.com/demos/card/basic-card?theme=bootstrap4 

 

Documentation: https://blazor.syncfusion.com/documentation/card/getting-started/ 

 

Please check the samples and the documentation and let us know if it comes close to your requirement. 

 

Regards, 

Revanth