mattosaurus / ChartJSCore

Implementation of Chart.js for use with .NET Core.
GNU General Public License v3.0
116 stars 34 forks source link

Date formats on the x-axis don't show #101

Open RobinCollie opened 10 months ago

RobinCollie commented 10 months ago

Hi there,

I'm probably doing something wrong but using the latest package versions, I'm not getting any data on the chart and the x axis just shows the time for today.

            `
            // Generate the chart
            Chart chart = new Chart();
            chart.Type = Enums.ChartType.Line;

            // Generate the data
            var dataSetData = new List<LineScatterData>();
            foreach (var item in returnList)
            {
                dataSetData.Add(new LineScatterData()
                { 
                     X = item.StartedAt.ToString("dd-MM-yyyy"),
                     Y = item.TimeTakenInSeconds.ToString()
                });
            }

            // Add the data
            Data data = new Data();
            data.Datasets = new List<Dataset>();
            data.Datasets.Add(new LineScatterDataset()
            {
                Label = "Time Taken In Seconds",
                Data = dataSetData
            });
            chart.Data = data;

            // Create the axis
            CartesianLinearScale xAxis = new CartesianLinearScale()
            {
                Type = "time",
                Title = new Title() { Text = new List<string>() { "Created Date" } }
            };
            CartesianLinearScale yAxis = new CartesianLinearScale()
            {
                Type = "linear",
                Title = new Title() { Text = new List<string>() { "Time Taken" } }
            };

            // Add the axis
            chart.Options = new ChartJSCore.Models.Options();
            chart.Options.Scales = new Dictionary<string, Scale>();
            chart.Options.Scales.Add("x", xAxis);
            chart.Options.Scales.Add("y", yAxis);
            chart.Options.Layout = new Layout();
            chart.Options.Layout.Padding = new Padding() { PaddingInt = 0 };

            // Return
            return chart;`

Scripts:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js" integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>