mariusmuntean / ChartJs.Blazor

Brings Chart.js charts to Blazor
https://www.iheartblazor.com/
MIT License
676 stars 151 forks source link

LineChart with TimeAxis don't work after update to 2.0.0 ('Fork' repo) #162

Closed digitalMUTANTsoft closed 3 years ago

digitalMUTANTsoft commented 3 years ago

Describe the bug

LineChart with TimeAxis(TimePoint) stopped working after ChartJs.Blazor update from 2.0.0.preview to 2.0.0 ('Fork' repo). It throws the following runtime error: 'Microsoft.JSInterop.JSException: This method is not implemented: either no adapter can be found or an incomplete integration was provided.'

Which Blazor project type is your bug related to?

Which charts does this bug apply to?

To Reproduce

Steps to reproduce the behavior:

  1. Using this version of ChartJSBlazor : 2.0.0 from 'Fork' repo
  2. Updated everything as described at README.md
  3. Wrote 3 samples: 1 LineChart(TimeAxis), 1 PieChart and 1 BarChart.
  4. Code compiles and run sucessfully.
  5. Only the LineChart with TimeAxis won't work.

Expected behavior

It should generate LineCharts with TimeAxis and TimePoint, like the previous versions did : without any problem.

Additional context / logging

Error: Microsoft.JSInterop.JSException: This method is not implemented: either no adapter can be found or an incomplete integration was provided.
Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided.
    at an.nn (http://localhost:5009/js/Chart.js/2.9.4/Chart.min.js:7:112166)
    at n.update (http://localhost:5009/js/Chart.js/2.9.4/Chart.min.js:7:146969)
    at ce (http://localhost:5009/js/Chart.js/2.9.4/Chart.min.js:7:80458)
    at Object.update (http://localhost:5009/js/Chart.js/2.9.4/Chart.min.js:7:82417)
    at tn.updateLayout (http://localhost:5009/js/Chart.js/2.9.4/Chart.min.js:7:106313)
    at tn.update (http://localhost:5009/js/Chart.js/2.9.4/Chart.min.js:7:105922)
    at tn.construct (http://localhost:5009/js/Chart.js/2.9.4/Chart.min.js:7:102923)
    at new tn (http://localhost:5009/js/Chart.js/2.9.4/Chart.min.js:7:102287)
    at ChartJsInterop.setupChart (http://localhost:5009/_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js:9:25)
    at http://localhost:5009/_framework/blazor.server.js:1:70043
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at ChartJs.Blazor.Chart.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Code example

private void InitLineChart()
{
    /* TimeDisplayFormats.DE_CH is missing from ChartJs.Blazor.Common.Time */
    Dictionary<TimeMeasurement, string> DE_CH = new Dictionary<TimeMeasurement, string>
    {
        { TimeMeasurement.Millisecond, "HH:mm:ss.SSS" },
        { TimeMeasurement.Second, "HH:mm:ss" },
        { TimeMeasurement.Minute, "HH:mm" },
        { TimeMeasurement.Hour, "HH:00" }
    };

    lineChartConfig = new LineConfig
    {
        Options = new LineOptions
        {
            Responsive = true,
            Title = new OptionsTitle
            {
                Display = true,
                Text = "Teste"
            },
            Legend = new Legend
            {
                Position = Position.Right,                        
            },
            Tooltips = new Tooltips
            {
                Mode = InteractionMode.Nearest,
                Intersect = false
            },
            Scales = new Scales
            {
                XAxes = new List<CartesianAxis>
                {
                    new TimeAxis
                    {
                        Distribution = TimeDistribution.Linear,
                        Ticks = new TimeTicks
                        {
                            Source = TickSource.Data                        
                        },
                        Time = new TimeOptions
                        {
                            Unit = TimeMeasurement.Day,             
                            TooltipFormat = "DD/MM/YYYY"
                        },          
                        GridLines = new GridLines
                        {
                            Display = false
                        }
                    }
                },
                YAxes = new List<CartesianAxis>
                {
                    new LinearCartesianAxis
                    {
                        ScaleLabel = new ScaleLabel
                        {
                            LabelString = "Y"
                        },
                        Ticks = new LinearCartesianTicks
                        {
                            SuggestedMin = 0
                        }
                    }
                }
            }
        }
    };

    var lineDataSet01 = new LineDataset<TimePoint>
    {
        BackgroundColor = "#419ce3bc",
        Label = "Data 01",
        Fill = true,
        BorderWidth = 1,
        PointRadius = 3,
        PointBorderWidth = 1,
        SteppedLine = SteppedLine.False,
    };   

    var dataList = new List<TimePoint>
    {
        new TimePoint(new DateTime(2020, 01, 01), new Random().Next(50)),
        new TimePoint(new DateTime(2020, 01, 02), new Random().Next(50)),
        new TimePoint(new DateTime(2020, 01, 03), new Random().Next(50)),
        new TimePoint(new DateTime(2020, 01, 04), new Random().Next(50)),
        new TimePoint(new DateTime(2020, 01, 05), new Random().Next(50)),
        new TimePoint(new DateTime(2020, 01, 06), new Random().Next(50))
    };

    lineDataSet01.AddRange(
       dataList
    );

    lineChartConfig.Data.Datasets.Add(lineDataSet01);
}
<Chart @ref="lineChart" Config="@lineChartConfig" Width="200" Height="60"/>
Joelius300 commented 3 years ago

Thanks for the issue.

I don't have time to test it for myself right now but have you referenced the moment.js script in your index.html / _Host.cshtml?
I'm suspecting that might be the issue (see https://github.com/chartjs/Chart.js/issues/6335).

Ps. V2.0 removed a lot of unrelated stuff from the library e.g. moment.js interop and things like TimeDisplayFormats.DE_CH.

Joelius300 commented 3 years ago

Oh and before I forget, you need to include moment.js before Chart.js (see here). Might be good to highlight in the readme (?)

digitalMUTANTsoft commented 3 years ago

Oh and before I forget, you need to include moment.js before Chart.js (see here). Might be good to highlight in the readme (?)

Ow... sorry, my bad.. I had previously set moment.js before, but i mislead while following the new README.md

Thank you for your help. Its solved!

Cheers!

Joelius300 commented 3 years ago

No worries, it wasn't specified in the readme. Fixed now (bfa6b62).