No chart rendered on server-hosted project

NeilMacMullen commented 5 years ago

Alas, not having any luck with a brand-new server-hosted Blazor project. I have added the nuget package to both client and server projects and followed the instructions in GitHub and on the wiki to add the example PieChart.

A couple of observations which might provide clues...

env.WebRootPath is actually null when I run my server project. I've tried using this code...

if (string.IsNullOrWhiteSpace(env.WebRootPath))
        {
            env.WebRootPath = System.IO.Path.Combine(Directory.GetCurrentDirectory(), "wwwroot");
        }
        ChartJsBlazor.AddStaticResourcesToWebRootPath(env.WebRootPath);

but the chart is still not displayed.

I can't find any way to get PieChartAnimation so have just commented out the "Animation=" assignment in the example code.

I've also tried the linker.xml fix suggested in #20 but this makes no difference.

I notice that the startup code in program.cs is quite different between the sample code in GitHub (which does work!) and my actual server project. Mine looks like...


 public class Program
    {
        public static void Main(string[] args)
        {
            BuildWebHost(args).Run();
        }

        public static IWebHost BuildWebHost(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseConfiguration(new ConfigurationBuilder()
                    .AddCommandLine(args)
                    .Build())
                .UseStartup<Startup>()
                .Build();
    }

Maybe this is a framework version problem?

larshg commented 5 years ago

So. From what I can find out you are using client side blazor - and with the web api core server project (standard solution created with the client, server and shared project).

You don't need to add anything to the server project.

But follow only the guidelines for the client side blazor version.

if you can share your project with me or maybe create a temporary one, I can try help you set it up.

NeilMacMullen commented 5 years ago

norender.zip

Thanks so much Lars. Yes. you are correct that I'm using the client/server/shared hosting model. I've attached the simplest possible project with the chart added to Index.razor. Note that I am using the latest 'Preview' version of Blazor rather than the previous experimental versions along with VS2019 preview2.

There are two solution folders inside the archive. JsChartTest_oob is the "out of the box" solution as created from the VS template. JsChartTest is the one with the the CharJs.Blazor components added. I've provided them this way in case you just want to diff the two to see what I changed (not a lot!).

I followed the instructions at https://github.com/mariusmuntean/ChartJs.Blazor and https://github.com/mariusmuntean/ChartJs.Blazor/wiki/Getting-Started with some minor differences:

Removed the "updateChart" button since no code was provided for this (I'm assuming the chart should render just from the config).
I did not use the "addTagHelper" lines since the latest version of Blazor seems to treat these as errors rather than warnings and insists that you use using statements instead. I added the usings to index.razor.
I also didn't use the "linker.xml" workaround referenced above - I seemed to get a fatal build error when trying this.

Thanks again for your help on this - looks like a great library and I'm very keen to use it! :-)

chucker commented 5 years ago

I've gotten it to work.

First, the usual:

make sure you're on Visual Studio 2019 16.1 Preview 2.0. The current non-Preview version of 2019 will not fully work with Blazor.
make sure you have .NET Core 3.0 Preview 4.

Now, for the project in particular:

index.html

    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">

(I'm not sure the latter is needed.)

You do not need to reference ChartJsInterop.js here. The Blazor toolchain will do that for you.

MyChartDemo.razor (or whichever)

@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.ChartJS.PieChart

<ChartJsPieChart ref="pieChartJs" Config="@pieChartConfig" Width="600" Height="300" />

@functions{
    protected PieChartConfig pieChartConfig { get; set; }
    ChartJsPieChart pieChartJs;

    protected override void OnInit()
    {
        pieChartConfig = pieChartConfig ?? new PieChartConfig
        {
            CanvasId = "myFirstPieChart",
            Options = new PieChartOptions
            {
                Text = "Sample chart from Blazor",
                Display = true,
                Responsive = true//,
                                 ///                Animation = new PieChartAnimation { AnimateRotate = true, AnimateScale = true }
            },
            Data = new PieChartData
            {
                Labels = new List<string> { "A", "B", "C", "D" },
                Datasets = new List<PieChartDataset>
                {
                    new PieChartDataset
                    {
                        BackgroundColor = new[] {"#ff6384", "#55ee84", "#4463ff", "#efefef"},
                        Data = new List<int> {4, 5, 6, 7},
                        Label = "Light Red",
                        BorderWidth = 0,
                        HoverBackgroundColor = new[] {"#f06384"},
                        HoverBorderColor = new[] {"#f06384"},
                        HoverBorderWidth = new[] {1}, BorderColor = "#ffffff",
                    }
                }
            }
        };
    }

    protected override void OnAfterRender()
    {
        pieChartJs.Update();

        base.OnAfterRender();
    }
}

I've removed the Animation part because PieChartAnimation doesn't even seem to exist as a class in the code.

Then I've added an OnAfterRender override to call Update, which is presumably what the button was supposed to do. Without calling Update at least once, nothing happens.

Nakovi49 commented 5 years ago

chucker, are those 2 files the only things you've edited to get this working? I cannot get any charts to load, using either the steps from the ReadMe, the steps from the Wiki, or your suggestions from the post above. I'm using Visual Studio 2019 Preview 2.0, ChartJs.Blazor 0.9.1, and Blazor preview4. I can't get any of it to work in either a client-side project or a hosted project. If I try to run one of the sample projects, I get the error "The project doesn't know how to run the profile IIS Express." Totally lost here.

NeilMacMullen commented 5 years ago

@chucker - thanks for the suggestions! I really thought you might have cracked it with the OnAfterRender suggestion (I've had similar issues with incorrect rendering on earlier versions of Blazor) but even with this method added, I still don't see the chart. I've also modified index.html as you suggested. I'm using Visual Studio 2019 16.1 Preview 2.0 and .NET Core 3.0 Preview 4. Am I right in thinking you modified my sample project? If you could post the "known working" project here it would be interesting to see if I've missed some other subtle difference or else there is an environment/build issue.

larshg commented 5 years ago

@NeilMacMullen sorry for the late reply. Here is what I did to make it work:

In the index.html file remove:

<script src="ChartJsInterop.js" type="text/javascript" language="javascript"></script>

add

`

as per #19

And in the linker.xml

change

<assembly fullname="ChartJs.Blazor.Sample" />

to your own assembly

<assembly fullname="JsChartTest.Client" />

Then it should load.

The pie chart does not render the correct labels though, but it should be somewhat fixed in #18 .

larshg commented 5 years ago

If you want to have no animation, you can add in:

Animation = new DoughnutAnimation { AnimateRotate = false, AnimateScale = false }

Until we get a PieChartAnimation created :)

Nakovi49 commented 5 years ago

Working for me now, thanks Lars!

larshg commented 5 years ago

Great to hear!

NeilMacMullen commented 5 years ago

@larshg Argh - I'm feeling particular stupid for not spotting the sample assembly name in the linker script! Worth adding for anyone else following this that the chart renders fine without the OnAfterRender override. I've never been so happy to see a pie-chart.... thanks! ;-)

larshg commented 5 years ago

Nice to hear you got it working. Lets keep this one open, until the documentation is updated appropriately.

oleksiizapara commented 5 years ago

I created sample pie project for blazorserverside dotnet 3.0.100-preview5-011568 https://github.com/oleksiizapara/ChartJsBlazorSample

SeppPenner commented 5 years ago

If I was you, I would take a look at https://github.com/Joelius300/ChartJSBlazor. This project is maintained at least.

Joelius300 commented 4 years ago

I'm assuming this issue can be closed without further actions - is that correct?

Tagging @mariusmuntean

mariusmuntean commented 4 years ago

Yes, the server-side samples work equally well to the client-side samples. I'm closing the issue.

As always don't hesitate to reopen it if you encounter problems.

mariusmuntean / ChartJs.Blazor

No chart rendered on server-hosted project #21