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 1 year ago

RobinCollie commented 1 year 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>