How to bind database in Syncfusion Bar Chart on Asp.net mvc - asp.net-mvc

Question

I tried to use the code on its documentation but it's still not running even if it's static data. Here is the code on the link that I've used but it is not connected to the database. Here are the pictures of the codes I've used:
//CS File(I JUST PUT HERE)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Charts;
namespace EJ2MVCSampleBrowser.Controllers.Chart
{
public partial class ChartController : Controller
{
// GET: RoundedColumn
public ActionResult RoundedColumn()
{
List<RoundedColumnChartData> chartData = new List<RoundedColumnChartData>
{
new RoundedColumnChartData { x= "BGD", y= 106, text= "Bangaladesh" },
new RoundedColumnChartData { x= "BTN", y= 103, text= "Bhutn" },
new RoundedColumnChartData { x= "NPL", y= 198, text= "Nepal" },
new RoundedColumnChartData { x= "THA", y= 189, text= "Thiland" },
new RoundedColumnChartData { x= "MYS", y= 250, text= "Malaysia" }
};
ViewBag.dataSource = chartData;
ViewBag.font = new { fontWeight = "600", color = "#ffffff" };
return View();
}
public class RoundedColumnChartData
{
public string x;
public double y;
public string text;
}
}
}
//CSHTML File (I JUST PUT HERE)
<script src="~/Scripts/theme-color.js"></script>
<div class="control-section">
<div style="text-align:center">
#Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("x").YName("y")
.CornerRadius(cr=>cr.BottomLeft(10).BottomRight(10).TopLeft(10).TopRight(10))
.Marker(mr => mr.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Font(ff => ff.FontWeight("600").Color("#ffffff"))))
.DataSource(ViewBag.dataSource).Name("Tiger").Add();
}).PrimaryXAxis(px => px.Interval(1).MajorGridLines(mg=>mg.Width(0))
.LabelStyle(ls=>ls.Color("#ffffff")).TickPosition(Syncfusion.EJ2.Charts.AxisPosition.Inside)
.LabelPosition(Syncfusion.EJ2.Charts.AxisPosition.Inside).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).PrimaryYAxis(py => py.Minimum(0).Maximum(300).Interval(50)
.MajorGridLines(mg => mg.Width(0)).LabelStyle(ls=>ls.Color("transparent"))
.MajorTickLines(mg => mg.Width(0)).LineStyle(mg => mg.Width(0))
).Title("Trade in Food Groups").ChartArea(area => area.Border(br=>br.Color("transparent"))
).Tooltip(tt => tt.Enable(false)).LegendSettings(lg => lg.Visible(false)
).Load("load").PointRender("pointRender").Loaded("loaded").Render()
</div>
<div style="float: right; margin-right: 10px;">
Source:
blogs.scientificamerican.com
</div>
</div>
<script>
var pointRender = function (args) {
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = fabricColors[args.point.index % 10];
}
else if (selectedTheme === 'material') {
args.fill = materialColors[args.point.index % 10];
}
else {
args.fill = bootstrapColors[args.point.index % 10];
}
};
var count = 0;
var loaded = function (args) {
args.chart.loaded = null;
setInterval(
function () {
if (count === 0) {
args.chart.series[0].dataSource = [
{ x: 'Tea', y: 206, text: 'Bangaladesh' },
{ x: 'Misc', y: 123, text: 'Bhutn' },
{ x: 'Fish', y: 48, text: 'Nepal' },
{ x: 'Egg', y: 240, text: 'Thiland' },
{ x: 'Fruits', y: 170, text: 'Malaysia' }
];
args.chart.animate();
count++;
}
else if (count === 1) {
args.chart.series[0].dataSource = [
{ x: 'Tea', y: 86, text: 'Bangaladesh' },
{ x: 'Misc', y: 173, text: 'Bhutn' },
{ x: 'Fish', y: 188, text: 'Nepal' },
{ x: 'Egg', y: 109, text: 'Thiland' },
{ x: 'Fruits', y: 100, text: 'Malaysia' }
];
args.chart.animate();
count++;
}
else if (count === 2) {
args.chart.series[0].dataSource = [
{ x: 'Tea', y: 156, text: 'Bangaladesh' },
{ x: 'Misc', y: 33, text: 'Bhutn' },
{ x: 'Fish', y: 260, text: 'Nepal' },
{ x: 'Egg', y: 200, text: 'Thiland' },
{ x: 'Fruits', y: 30, text: 'Malaysia' }
];
args.chart.animate();
count = 0;
}
}, 2000);
}
</script>
}