Integrate syncfusion chart with ASP.NET MVC

Question

I am using syncfusion for my application to display chart and I have used this documentation to create demo page.

Page comes without any error but chart is not displayed on the page.

As I have done inspect there is a code available but not display on page.

I have attached the screen shot please look into that.

Code:

Controller side:

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            //// Create dataSource to chart
            List<ChartData> data = new List<ChartData>();
            data.Add(new ChartData("Jan", 35));
            data.Add(new ChartData("Feb", 28));
            data.Add(new ChartData("Mar", 34));
            data.Add(new ChartData("Apr", 32));
            data.Add(new ChartData("May", 40));
            data.Add(new ChartData("Jun", 32));
            data.Add(new ChartData("Jul", 35));
            data.Add(new ChartData("Aug", 55));
            data.Add(new ChartData("Sep", 38));
            data.Add(new ChartData("Oct", 30));
            data.Add(new ChartData("Nov", 25));
            data.Add(new ChartData("Dec", 32));
            ///...
            ViewBag.ChartData = data;
            return View();
        }
     }          

    public class ChartData {
        public string Month;
        public double Sales;
        public ChartData(string month, double sales)
        {
            this.Month = month;
            this.Sales = sales;
        }
    }

CSHTML:

@using Syncfusion.JavaScript.DataVisualization

<!--  jquery script  -->
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>    

    <!-- Essential JS UI widget -->
    <script src="http://cdn.syncfusion.com/13.1.0.21/js/web/ej.web.all.min.js"></script>

    <!--Add Syncfusion Script Manager -->
    @Html.EJ().ScriptManager()

 <div>

               @(Html.EJ().Chart("chartContainer")
                    .Series(sr =>
                         { 
                            //Change series type
                            sr.Type(SeriesType.Line).Add();                  
                         })
               )
          </div>

Answer 1

We have analyzed the query with the attached screenshot. We suspect that, you have set true to UnobtrusiveJavaScriptEnabled, but haven’t referred ej.unobtrusive.min.js file. So we recommend to refer ej.unobtrusive.min.js file. Kindly find the code snippet below.

<script src="~/Scripts/ej/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/ej/ej.web.all.min.js"></script>
<script src="~/Scripts/ej/ej.unobtrusive.min.js"></script>

For reference we have attached the sample. Kindly find the Sample Link

Unobtrusive JavaScript support will create the components with basic level HTML tag-like structure in order to reduce the weightage of the page. For more information on Unobtrusive, kindly follow the below link

Help document

Thanks, Dharani.