Заполнение диаграммы Javascript данными модели Razor

У меня есть линейная диаграмма http://www.chartjs.org/docs/#line- Введение в диаграмму Я хочу заполнить данными из модели представления в MVC6 / Razor

Мои Viewmodels являются

public class LeaderboardViewModel
{
    public List<LeaderboardViewEntry> LeaderboardViewEntries { get; set; }
    public HistoicPointsViewModel HistoicPoints { get; set; } 
}

public class HistoicPointsViewModel
{
    public HistoicPointsViewModel()
    {
        PlayerHistores = new List<PlayerHistoricViewModel>();
    }

    public DateTime[] YAxisDates { get; set; }
    public List<PlayerHistoricViewModel> PlayerHistores { get; set; } 
}

public class PlayerHistoricViewModel
{
    public PlayerHistoricViewModel()
    {
        Points = new List<int?>();
    }

    public string PlayerName { get; set; }
    public List<int?> Points { get; set; }
}

И мой взгляд это раздел сценария в моем представлении:

@model Foosball9001.ViewModels.Leaderboards.LeaderboardViewModel

<canvas id="myChart" width="800" height="400"></canvas>
@section Scripts{
<script type="text/javascript">
    var data = {
        labels: @Model.HistoicPoints.YAxisDates,
        datasets: [
            {
                @foreach (PlayerHistoricViewModel x in Model.HistoicPoints.PlayerHistores)
                {
                    {
                        label: x.PlayerName,
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: x.Points
                    }
                }

            }
        ]
    };

    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx).Line(data);
</script>
}

Поэтому я хочу использовать мой HistoicPointsViewModel.YAxisDates в качестве координат оси Y, а затем я хочу создать набор данных для каждого игрока в моем PlayerHistores, где он берет данные из PlayerHistoricViewModel.Points в качестве данных для отображения на графике

Моя проблема заключается в написании динамического JavaScript с использованием Razor, так что это выглядит как пример

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
]
};