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. Image for the cookie policy date
close icon

Chart is not displayed on screen

Hi,

I am trying to render a sample chart and when the controller calls the View, the chart is not showing on the screen.

below code snippets from the site(sample) are used

In cshtml file:

@using Syncfusion.JavaScript.DataVisualization
@section SampleHeading{<span class="sampleName">Chart / Pie Chart </span>}
@section ControlsSection{
    <div>
        @(Html.EJ().Chart("container")
          .Series(sr =>
                    {
                        sr.Points(pt =>
                                       {
                                           pt.X("Other Personal").Y(94658).Text("Other Personal, 88.47%").Add();
                                           pt.X("Medical care").Y(9090).Text("Medical care, 8.49%").Add();
                                           pt.X("Housing").Y(2577).Text("Housing, 2.40%").Add();
                                           pt.X("Transportation").Y(473).Text("Transportation, 0.44%").Add();
                                           pt.X("Education").Y(120).Text("Education, 0.11%").Add();
                                           pt.X("Electronics").Y(70).Text("Electronics, 0.06%").Add();
                                       }).LabelPosition(ChartLabelPosition.OutsideExtended).Border(bo => bo.Width(2).Color("white"))
                                          .EnableSmartLabels(true).StartAngle(145)
                                          .Marker(mr =>
                                          {
                                              mr.DataLabel(db =>
                                              {
                                                  db.Visible(true).ConnectorLine(cl => cl.Color("black")
                                                      .Height(60).Type(ConnectorType.Bezier)).Shape(ChartShape.None)
                                                      .Font(fn => { fn.Size("14px"); });
                                              });
                                          }).Name("Expenses").Type(SeriesType.Pie).Add();
                    })
            .CommonSeriesOptions(cr => cr.EnableAnimation(true))
            .Load("loadTheme")
            .Title(title => title.Text("Expenditures"))
            .CanResize(true)
            .SeriesRendering("seriesRender")
            .Size(sz => sz.Height("600"))
            .Legend(lg => { lg.Visible(false); })
        )
        <script>
            function seriesRender(sender) {
                if (sender.model.theme == "flatdark" || sender.model.theme == "gradientdark")
                    sender.data.series.marker.dataLabel.connectorLine.color = "white";
                else
                    sender.data.series.marker.dataLabel.connectorLine.color = "black";
            }
            $("#controlarea").css("visibility", "visible");
        </script>
    </div>
}


In Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication2.Controllers
{
    public class PieController : Controller
    {
        //
        // GET: /Pie/

       
        public ActionResult Pie()
        {
            return View();
        }

    }
}



3 Replies

DP Deepaa Pragaasam Syncfusion Team September 14, 2015 10:11 AM UTC

Hi Faizal,
Thanks for contacting Syncfusion Support.
We have analysed your query. The chart is not rendered because the LOAD event has been called and not defined.
We have used the load event in our dashboard sample for changing the themes by the customers.
When the load event is removed the chart will render
Please remove the below highlighted code

  .CommonSeriesOptions(cr => cr.EnableAnimation(true))

            .Load("loadTheme")

            .Title(title => title.Text("Expenditures"))

            .CanResize(true)

            .SeriesRendering("seriesRender")

            .Size(sz => sz.Height("600"))

            .Legend(lg => { lg.Visible(false); })


I have attached the sample for your reference
 WebApplication
Regards,
Deepaa Pragaasam.



AN anil July 22, 2018 07:06 AM UTC

i have read the code and checked totally so, iam also trying to execute but some errors are coming


BP Baby Palanidurai Syncfusion Team July 23, 2018 11:45 AM UTC

Hi Faizal, 

   We have checked your link which you have shared in the previous update, but it is getting directed to some website link but not to the screenshot of the error. So kindly revert us with screenshot for error or modify our sample provided in our last update, which will be helpful in further more analysis and provide you the solution sooner. 

Kindly revert us, if you have any concern. 

Thanks, 
Baby. 


Loader.
Live Chat Icon For mobile
Up arrow icon