Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.26k stars 526 forks source link

charts extension - chart page dosent load #102

Closed v2kiran closed 5 years ago

v2kiran commented 5 years ago

Hi I am using the hosted blazor template with .net core 3 preview 5.

I installed the charts extension and have the following code on the charts.razor page but it seems this line prevents the page from loading:

<Chart ref="pieChart" Type="ChartType.Pie" TItem="double" />

Note: i had to remove the following line:

<SimpleButton Clicked="@(async () => await HandleRedraw( pieChart, GetChartDataset ))">Redraw</SimpleButton>

because of this error:

cannot convert lambda expression to type 'object' because it is not a delegate type 

here is the whole page:

@page "/charts"

<div class="card" style="width: 18rem;">
    <div class="card-body">
       <Chart ref="pieChart" Type="ChartType.Pie" TItem="double" />
    </div>
</div>

@functions {
    Chart<double> pieChart;

    string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
    List<string> backgroundColors = new List<string> { 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 List<string> { 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;

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

            await Task.WhenAll(

                HandleRedraw(pieChart, GetChartDataset)
            );
        }
    }

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

        chart.AddLabel(Labels);

        chart.AddDataSet(getDataSet());

        await chart.Update();
    }

    ChartDataset<double> GetChartDataset()
    {
        return new ChartDataset<double>
        {
            Label = "# of randoms",
            Data = RandomizeData(),
            BackgroundColor = backgroundColors,
            BorderColor = borderColors,
        };
    }

    PieChartDataset<double> GetPieChartDataset()
    {
        return new PieChartDataset<double>

        {
            Label = "# of randoms",
            Data = RandomizeData(),
            BackgroundColor = backgroundColors,
            BorderColor = borderColors,
        };
    }

    List<double> RandomizeData()
    {
        var r = new Random(DateTime.Now.Millisecond);

        return new List<double> { r.Next(3, 50) * r.NextDouble(), r.Next(3, 50) * r.NextDouble(), r.Next(3, 50) * r.NextDouble(), r.Next(3, 50) * r.NextDouble(), r.Next(3, 50) * r.NextDouble(), r.Next(3, 50) * r.NextDouble() };
    }
}
v2kiran commented 5 years ago

nevermind, i didnt know i had to install blazorise first...thought i could only do with the charts extension

stsrki commented 5 years ago

If you want to use only Chart without any CSS provider you can register an empty provider. An example can be found in the usage docs

v2kiran commented 5 years ago

great, thanks for the additional info!