We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

No Chart is being displayed, no errors

Thread ID:

Created:

Updated:

Platform:

Replies:

145707 Jul 4,2019 01:45 PM UTC Jul 9,2019 06:43 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: Charts
Johnny
Asked On July 4, 2019 01:45 PM UTC

I'm new to syncfusion, never added any control to a asp.net core application before.
Step taken so far:
- added nuget package : syncfusion.EJ2.AspNet.Core
- added to _layout.cshtml

<head>
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" />
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
....

    @RenderSection("scripts", required: false)
    <ejs-scripts></ejs-scripts>
</body>

- Generated a license from the syncfusion webpage.
- Added license in startup.cs
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("<mylicensekey>");

- The controller that will generate the view with the chart
            ViewBag.NoShowAge = viewModel.ByAges.ToList();
The relevant columns in the model are : 
PatientAge
Amount

I checked and there is actual data in it before passing the viewmodel on to the view

- The view rendering the page
<div class="col-md-12 row">
    <div class="col-md-12 btn btn-light-green" style="padding: 5px">
        <div class="row">
            <div class="col-md-1">
                <span class="fas fa-hourglass-half " style="font-size: 50px; padding: 3px;"></span>
            </div>
            <div class="col-md-11">
                <div>
                    <ejs-chart id="byagechart" title="@DisplayName.Age" width="100%">
                        <e-chart-primaryxaxis valueType="Category" labelFormat="y" edgeLabelPlacement="Shift"></e-chart-primaryxaxis>
                        <e-series-collection>
                            <e-series dataSource="ViewBag.NoShowAge" name="PatientAge" xName="PatientAge" width="2" opacity="1" yName="Amount" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
                        </e-series-collection>
                    </ejs-chart>
                </div>

            </div>
        </div>
    </div>
</div>






Baby Palanidurai [Syncfusion]
Replied On July 5, 2019 09:58 AM UTC

  
Hi Johnny, 
  
Greetings from Syncfusion. 
  
We have analysed your query. We have tried to replicate the reported scenario. Unfortunately, we are unable to reproduce the reported problem at our end. From the provided code snippet, we suspect that the issue may occur, if you have missed to refer syncfusion.EJ2 tag helper in _ViewImports.cshtml page. So please ensure that at your end. We have prepared a sample using your code snippet. In that chart is working fine as you expect. Please find below code snippet and sample, 
  
 
Code Snippet: 
[_layout.cshtml]: 
<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" /> 
 
<ejs-scripts></ejs-scripts> 
 
[_ViewImports.cshtml]: 
@addTagHelper *, Syncfusion.EJ2 
 
[index.cshtml]: 
<div class="col-md-12 row"> 
    <div class="col-md-12 btn btn-light-green" style="padding: 5px"> 
        <div class="row"> 
            <div class="col-md-1"> 
                <span class="fas fa-hourglass-half " style="font-size: 50px; padding: 3px;"></span> 
            </div> 
            <div class="col-md-11"> 
                <div> 
                    <ejs-chart id="byagechart" title="AGE - AMOUNT VARIATIONS" width="100%"> 
                        <e-chart-primaryxaxis valueType="Category" labelFormat="y" edgeLabelPlacement="Shift"></e-chart-primaryxaxis> 
                        <e-series-collection> 
                            <e-series dataSource="ViewBag.dataSource" name="PatientAge" xName="PatientAge" width="2" opacity="1" yName="Amount" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series> 
                        </e-series-collection> 
                    </ejs-chart> 
                </div> 
            </div> 
        </div> 
    </div> 
</div> 
 
[HomeController.cs]: 
public IActionResult Index() 
        { 
            List<ColumnChartData> chartData = new List<ColumnChartData> 
            { 
                new ColumnChartData { PatientAge= "30-40", Amount= 4600 }, 
                new ColumnChartData {PatientAge=  "40-50", Amount= 2700 }, 
                new ColumnChartData { PatientAge= "50-60", Amount= 4500 }, 
                new ColumnChartData { PatientAge= "60-70", Amount= 1000 }, 
                new ColumnChartData { PatientAge= "70-80", Amount= 3700 }, 
            }; 
            ViewBag.dataSource = chartData; 
            return View(); 
        } 
        public class ColumnChartData 
        { 
            public string PatientAge; 
            public double Amount; 
        } 
 
Screenshot: 
 
 
 
Kindly check the above sample and revert us, if still you have faced any problem. 
  
Regards, 
Baby. 


Johnny
Replied On July 8, 2019 09:31 AM UTC

Thx for the input. I was able to make it work now.

Baby Palanidurai [Syncfusion]
Replied On July 9, 2019 06:43 AM UTC

  
Hi Johnny, 
  
Most welcome. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.   
  
Thanks,   
Baby. 
  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon