Opened

Donought Chart

sumanthcp commented

Hi Can you please send me a sample code for donut chart with just two sectors - A and B.

mladenmacanovic commented

Do you need two data point? Or two datasets?

The example for two data points is as follow:

<Row>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Doughnut</CardTitle>
            </CardHeader>
            <CardBody>
                <Button Color="Color.Primary" Outline="true" Clicked="@(async () => await HandleRedraw( doughnutChart, GetDoughnutChartDataset ))">Redraw</Button>
            </CardBody>
            <CardBody>
                <Chart @ref="doughnutChart" Type="ChartType.Doughnut" TItem="double" />
            </CardBody>
        </Card>
    </Column>
</Row>
@code{
    Chart<double> doughnutChart;

    string[] Labels = { "Red", "Blue" };
    List<string> backgroundColors = new() { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) };
    List<string> borderColors = new() { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) };

    bool isAlreadyInitialised;

    Random random = new( DateTime.Now.Millisecond );

    protected override async Task OnAfterRenderAsync( bool firstRender )
    {
        if ( !isAlreadyInitialised )
        {
            isAlreadyInitialised = true;

            await Task.WhenAll(
                HandleRedraw( doughnutChart, GetDoughnutChartDataset ) );
        }
    }

    async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>( Blazorise.Charts.BaseChart<TDataSet, TItem, TOptions, TModel> chart, Func<TDataSet> getDataSet )
        where TDataSet : ChartDataset<TItem>
        where TOptions : ChartOptions
        where TModel : ChartModel
    {
        await chart.Clear();

        await chart.AddLabelsDatasetsAndUpdate( Labels, getDataSet() );
    }

    DoughnutChartDataset<double> GetDoughnutChartDataset()
    {
        return new()
        {
            Label = "# of randoms",
            Data = RandomizeData(),
            BackgroundColor = backgroundColors,
            BorderColor = borderColors,
            BorderWidth = 1
        };
    }

    List<double> RandomizeData()
    {
        return new()
        {
            random.Next( 3, 50 ) * random.NextDouble(),
            random.Next( 3, 50 ) * random.NextDouble(),
        };
    }
}
Want to comment on this issue? Log in and write your comment.
Asignee
No assignee
Labels
No Labels