Failing to render CanvasJS chart using ASP.NET MVC and Entity Framework

Question

I am a beginner when it comes to the following technologies: - ASP.NET MVC - Entity Framework - JavaScript (in this instance, CanvasJS)

I am trying to render a chart based on a Data Model that I have created in my solution. I am following the tutorial here (adapted to my own purposes) https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/how-to/asp-net-mvc-charts-data-entity-database/ and I have completed the following.

Created a Model of my data via EF
Passed that data from my Controller to my View
Attempted to render the chart in the View CSHTML

However, the chart does not render. When I use Chrome Debugging, the Javascript shows that the 'result' is my strongly typed model, but this must be incorrect as the error is Uncaught SyntaxError: Unexpected end of input

The rendered Javascript is as follows:

<h2>StoreView - Testing this for store group P777S001</h2>
<hr />
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="text-info">Here are some examples of sales data via Entity Framework</div>

        </div>
        <div class="col-md-6">
            <div id="chartContainer"></div> 
        </div>
    </div>
</div>
<script type="text/javascript">
    var result = System.Collections.Generic.List`1[InSiteDashboard.Models.InSiteStoreSalesSummaryTable];
    var datapoints = [];
    for (var i = 0; i < result.length; i++) {
        datapoints.push({ label: result[i].x, y: result[i].y });
    }

    $(function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2",
            zoomEnabled: true,
            animationEnabled: true,
            title: { text: "Line chart" },
            data: [{
                type: "line",
                dataPoints: dataPoints,
            }]
        });
        chart.render();
    });
</script>

I am passing this to the View using the following code (it's prototyping so the code is messy apologies)

Controller:

    string _servername = $"P{store}S001";
    var sales = insite.InSiteStoreSalesSummaryTables.Where(s => s.ServerName == _servername && s.daily_sales_figure > 0);
    //var storeEntries = db.StoreSystemInformations.Where(s => s.StoreNumber == store);

    if (sales == null)
    {
        return HttpNotFound();
    }
    ViewBag.TestValue = $"Testing this for store group {_servername}";
    return View(sales.ToList());

Can anyone see something I'm obviously doing wrong here?

Tetsuya Yamamoto · Accepted Answer · 2019-03-04 05:05:46Z

From first glance, I assumed your problem seem occurred because of this line:

var result = System.Collections.Generic.List`1[InSiteDashboard.Models.InSiteStoreSalesSummaryTable];

I think you're passing list directly to a JS definition intended to create JS array, but Razor returns fully-qualified name of the List<InSiteDashboard.Models.InSiteStoreSalesSummaryTable> collection because Razor implicitly called ToString() in the view instead of iterating it.

Since List``1[InSiteDashboard.Models.InSiteStoreSalesSummaryTable] is not recognized as a JS identifier or property, then "Unexpected end of input" message was thrown because of invalid syntax.

You could use model serialization to pass List<T> collection as JS array, as in example below (assumed you have model directive with @model IEnumerable<InSiteStoreSalesSummaryTable> or @model List<InSiteStoreSalesSummaryTable> as implied by return View(sales.ToList())):

// standard way
var result = JSON.parse('@Html.Raw(Json.Encode(Model))');

// using Newtonsoft.Json library
var result = JSON.parse('@Html.Raw(JsonConvert.SerializeObject(Model))');

Here is an example implementation of the script:

@model IEnumerable<InSiteStoreSalesSummaryTable>

<!-- other HTML elements, skipped for brevity -->

<script>
    var result = JSON.parse('@Html.Raw(Json.Encode(Model))');
    var datapoints = [];
    for (var i = 0; i < result.length; i++) {
        datapoints.push({ label: result[i].x, y: result[i].y });
    }

    $(function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2",
            zoomEnabled: true,
            animationEnabled: true,
            title: { text: "Line chart" },
            data: [{
                type: "line",
                dataPoints: dataPoints,
            }]
        });
        chart.render();
    });
</script>

Collectives™ on Stack Overflow

Failing to render CanvasJS chart using ASP.NET MVC and Entity Framework

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related