Как нарисовать диаграмму из данных в модели MVC?

Question

Для проекта, в котором я хочу создать какую-либо функцию, мне нужно иметь представление с диаграммой на веб-странице.

M y - это MVC ASP.net c #, который работает сEntity Framework. Все части успешно созданы, поэтому здесь нет серьезных ошибок.Я уже пытался использовать C3.js (Эта ссылка: https://www.c -sharpcorner.com / article / asp-net-mvc5-generate-bar-chart-using-javascript-c3-chart-library-and-entity-f / ) и много читал о других возможностях, таких как Google Chart, Charts .js и т. д., но я действительно хочу использовать C3.js.

Я не до конца понимаю всекод, поэтому я попытался адаптировать его, но без диаграммы :( (представление успешно запущено, но ничего)

Для таблицы, которую я хочу отобразить, вот код создания SQL:

USE [garagenew]
GO

/****** Object:  Table [dbo].[Fuel]    Script Date: 17-04-19 13:07:23 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Fuel](
    [RECID] [int] IDENTITY(1,1) NOT NULL,
    [FichePrise] [int] NOT NULL,
    [DatePrise] [datetime] NULL,
    [UserName] [nvarchar](255) NULL,
    [VehicleId] [nvarchar](13) NULL,
    [BadgeNumber] [nvarchar](50) NULL,
    [Kilometer] [float] NULL,
    [Hour] [int] NULL,
    [Volume] [float] NULL,
    [CuveName] [nvarchar](250) NULL,
    [BornName] [nvarchar](250) NULL,
    [ProductName] [nvarchar](250) NULL,
    [Source] [nvarchar](20) NULL,
    [RUNDATE] [date] NULL,
 CONSTRAINT [PK_Fuel] PRIMARY KEY CLUSTERED 
(
    [RECID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Я попробовал этот контроллер:

    using ConsulFru.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    namespace ConsulFru.Controllers
    {
        public class ChartController : Controller
        {
            // GET: Chart  
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult BarChart()
            {
                bdfru entities = new bdfru();
                return Json(entities.Fuel.ToList(), JsonRequestBehavior.AllowGet);
            }
        }
    }

и это представление:

    @{
        ViewBag.Title = "Index";
    }
    <br />
    <div id="Barchart"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "/Chart/BarChart",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    successFunc(response);
                },
            });

            function successFunc(jsondata) {
                var chart = c3.generate({
                    bindto: '#Barchart',
                    data: {
                        json: jsondata,
                        keys: {
                            value: ['BadgeNumber','Kilometer'],
                        },
                        columns: ['BadgeNumber', 'Kilometer'],
                        type: 'bar',
                        groups: [
                            ['BadgeNumber', 'Kilometer'],
                        ]
                    },
                    color: {
                        pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
                    },
                });
            }
        });

    </script>

Я ожидаю сначала нарисовать диаграмму с этой таблицей, а затем адаптировать код, чтобы я могделай все, что захочу.

Может ли кто-нибудь мне помочь?