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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

$("#chartPromedio").ejChart("instance") is not working

Thread ID:

Created:

Updated:

Platform:

Replies:

119897 Aug 11,2015 02:36 PM UTC Aug 31,2015 10:40 AM UTC ASP.NET MVC 9
loading
Tags: Chart
Manolo
Asked On August 11, 2015 02:36 PM UTC

Hi,

I want create a dynamic chart from grid data source.

In javascript section, when i want the chart instance,

var chart = $("#chartPromedio").ejChart("instance");

I give an error. I don't know why.

View
....
<div class="row">
    <div class="col-md-12">
        @(Html.EJ().Grid<EntitiesInforme.SP.InformeDiarioProcesado>("FlatGrid")
            .Locale("es-ES")
            .Datasource((IEnumerable<object>)ViewBag.DSInforme)
            .SelectionType(SelectionType.Multiple)
            .Mappers(map => map.ExportToExcelAction("Informes/ExcelExport"))
            .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
            {
                items.AddTool(ToolBarItems.ExcelExport);
            }))
            .AllowFiltering()
                //.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
            //.FilterSettings(filter => { filter.ShowFilterBarStatus().FilterBarMode(FilterBarMode.OnEnter); })
            .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

            .SummaryRow(row =>
                {
                    row.Title("Total").SummaryColumns(col =>
                        {
                            col.SummaryType(SummaryType.Sum).DisplayColumn("Rango0").DataMember("Rango0").Add();
                            col.SummaryType(SummaryType.Sum).DisplayColumn("Rango1").DataMember("Rango1").Add();
                            col.SummaryType(SummaryType.Sum).DisplayColumn("Rango2").DataMember("Rango2").Add();
                            col.SummaryType(SummaryType.Sum).DisplayColumn("Rango3").DataMember("Rango3").Add();
                            col.SummaryType(SummaryType.Sum).DisplayColumn("Rango4").DataMember("Rango4").Add();
                            col.SummaryType(SummaryType.Sum).DisplayColumn("Rango5").DataMember("Rango5").Add();
                            col.SummaryType(SummaryType.Sum).DisplayColumn("Rango6").DataMember("Rango6").Add();
                            col.SummaryType(SummaryType.Sum).DisplayColumn("Rango7").DataMember("Rango7").Add();
                            //col.SummaryType(SummaryType.Sum).DisplayColumn("TotalDias").DataMember("TotalDias").Add();
                            col.SummaryType(SummaryType.Sum).DisplayColumn("PromedioDias").DataMember("PromedioDias").Add();
                            col.SummaryType(SummaryType.Sum).DisplayColumn("OperacionesSuperioresLimite").DataMember("OperacionesSuperioresLimite").Add();
                            col.SummaryType(SummaryType.Sum).DisplayColumn("Total").DataMember("Total").Add();
                        }).Add();
                })

            .AllowTextWrap()
            .AllowSorting()
            .AllowPaging()
            .AllowScrolling()
            .AllowGrouping()
            .GroupSettings(group => { group.EnableDropAreaAnimation(true); group.ShowDropArea(true); })
            .Columns(col =>
            {
                col.Field("CodigoOS").HeaderText("Tipo").TextAlign(TextAlign.Center).Add();
                col.Field("CodigoCentro").HeaderText("Centro").Add();
                col.Field("Contrata").HeaderText("Contrata").Width(120).Add();
                col.Field("Rango0").HeaderText("<= 4 días").TextAlign(TextAlign.Center).Add();
                col.Field("Rango1").HeaderText("5-10 días").TextAlign(TextAlign.Center).Add();
                col.Field("Rango2").HeaderText("11-20 días").TextAlign(TextAlign.Center).Add();
                col.Field("Rango3").HeaderText("21-30 días").TextAlign(TextAlign.Center).Add();
                col.Field("Rango4").HeaderText("31-40 días").TextAlign(TextAlign.Center).Add();
                col.Field("Rango5").HeaderText("41-50 días").TextAlign(TextAlign.Center).Add();
                col.Field("Rango6").HeaderText("51-60 días").TextAlign(TextAlign.Center).Add();
                col.Field("Rango7").HeaderText("> 60 días").TextAlign(TextAlign.Center).Add();
                //col.Field("TotalDias").HeaderText("Total días").TextAlign(TextAlign.Center).Add();
                col.Field("PromedioDias").HeaderText("Promedio Dias").TextAlign(TextAlign.Center).Width(90).Add();
                col.Field("OperacionesSuperioresLimite").HeaderText("Op. Sup. Límite").TextAlign(TextAlign.Center).Width(90).Add();
                col.Field("Total").TextAlign(TextAlign.Center).Add();

            })
            .ClientSideEvents(eve =>
            {
                eve.RowSelected("onRowSelected");
                eve.ActionComplete("onActionComplete");
            })

        )
    </div>
</div>

<div class="row">
    <div class="col-md-12">

        @(Html.EJ().Chart("chartSelected")
            .Legend( x => x.Visible(false))
        )
    </div>
    <div class="col-md-12">
        @(Html.EJ().Chart("chartPromedio")
            .Legend(x => x.Visible(false))
        )
    </div>

</div>

@section scripts
{

<script type="text/javascript">
    var data;
    var len = 0;
    var selectedData = [];
    var SeriesDataSources = [];
  
    onActionComplete = function (sender) {
        var data = sender.model.currentViewData;

        var chart = $("#chartPromedio").ejChart("instance");
        alert("1");
................

alert("1") is not show

Thank you



Manolo
Replied On August 12, 2015 06:58 AM UTC

this is my _layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Control de Operaciones y Gestión de Campaña</title>

    <link rel='nofollow' href="~/Content/ej/web/default-theme/ej.widgets.all.min.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.easing.1.3.min.js"></script>
    <script src="~/Scripts/jsrender.min.js"></script>
    <script src="~/Scripts/jquery.globalize.min.js"></script>
    <script src="~/Scripts/globalize/cultures/globalize.culture.es-ES.js"></script>
    <script src="~/Scripts/ej/ej.web.all.min.js"></script>
    <script src="~/Scripts/ej/ej.unobtrusive.min.js"></script>


   
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container" id="banner">
            <div class="container">
                <h1 id="Title">Control de Operaciones y Gestión de Campaña</h1>
            </div>
        </div>
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
                    <li>@*@Html.ActionLink("Informes Diarios", "Index", "InformeDiario", new { Area = "Informes" }, null)*@</li>
                    <li class="dropdown">
                        <a rel='nofollow' href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Informes <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>@Html.ActionLink("Informes Diarios", "Index", "InformeDiario", new { Area = "Informes" }, null)</li>
                            <li>@Html.ActionLink("Informes Semanal", "Index", "InformeSemanal", new { Area = "Informes" }, null)</li>                           
                        </ul>
                    </li>                   
                </ul>
            </div>
        </div>
    </div>
    <br />
    <br />
    <div class="container body-content">
        @RenderBody()
       
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Control de Operaciones y Gestión de Campaña</p>
        </footer>
    </div>
    @Html.EJ().ScriptManager()
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>


Manolo
Replied On August 12, 2015 07:44 AM UTC

Hi again,

catching the exception y get this error:



Sanjith Kesavan [Syncfusion]
Replied On August 12, 2015 04:57 PM UTC

Hi Manola,
We have analyzed your query and replicated the scenario in our sample. In the View page of the sample chart instance is created before the chart plugin has been created. So only following error message has been created.

To overcome this we have to add the chart before the grid plugin has been created. Please find the below code snippet.

<div>

    @(Html.EJ().Chart("container").Size(sz => sz.Height("400").Width("1000"))

    .Legend(lgn => lgn.Visible(false))

    )

</div>

 

<div style="width:1000px;height:400px">

    <br /><br />

    @(Html.EJ().Grid<WebApplication1.Controllers.CountriesSalesData>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowFiltering()

        .AllowPaging()

        .EnableHeaderHover()

        .ClientSideEvents(c => c.ActionComplete("completeAction"))

        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

        .Columns(col =>

        {

            col.Field("TransactionID").HeaderText("TransactionID").Width(100).Add();

            col.Field("CategoryName").HeaderText("CategoryName").Width(120).Add();

            col.Field("SalesAmount").HeaderText("SalesAmount").Width(140).Format("{0:C2}").Add();

            col.Field("ShipDate").HeaderText("ShipDate").Width(140).Add();          

        })

    )
</div>

<script type="text/javascript">

    var data;

    completeAction = function (sender) {       

        var data = sender.model.currentViewData;

        var chart = $("#container").ejChart("instance");

        alert("1");

        chart.model.series[0].dataSource = data;

        chart.model.series[0].xName = "CategoryName",

     chart.model.series[0].yName = "SalesAmount",

     chart.redraw();

 

    }
</script>
In the above code grid has been created after the chart plugin is added.
Please find the below screenshot

Please let us know if you have any queries.
 

Regards,

Sanjith K.​


Manolo
Replied On August 12, 2015 05:24 PM UTC

Hi,

I set the chart before the grid, and I get the same error.

I attach a simplified project. You need run Areas/Informes/InformeSemanal/Index

Anyway, I need set the chart after the grid, so, How I can resolve this error?

Thanks



Attachment: Web_ControlOperaciones_42558ab5.zip

Sanjith Kesavan [Syncfusion]
Replied On August 14, 2015 04:49 AM UTC

Hi Manolo,
Sorry for the inconvenience caused. We have analyzed your query and created the sample by placing the chart before the grid. Sample is working fine without any issue.
Please find the sample below.
Sample link: http://www.syncfusion.com/downloads/support/forum/119897/ze/WebApplication1531921422
If you are still facing any issue, please revert us back by modifying the attached sample as per your scenario along with the replication procedure.

Regards,

Sanjith K.​


Manolo
Replied On August 14, 2015 11:51 AM UTC

I need set the chart after the grid, so, How I can resolve this error?

Sanjith Kesavan [Syncfusion]
Replied On August 17, 2015 01:20 PM UTC

Hi Manolo,
We have analyzed your query and created the sample as per your requirement.
In the sample we have added the grid before the chart. The problem with your requirement is that you are trying to access the chart element before it was created, so we can achieve this using a work around by using ChartLoad event. We have created a variable to find whether the chart is loaded in the page so that the data from the grid can be loaded after creating chart. In sample we have initially declared ischartLoad is false. ischartLoad is set as true once the chart is rendered and then we can get the instance of the chart as usually in the onActionComplete. Please find the below code snippet.

var ischartLoad = false;       
function chartLoad(sender) {
    ischartLoad = true;
    sender.model.series[0].dataSource = grid.model.currentViewData;
    sender.model.series[0].xName = "categoryName";
    sender.model.series[0].yName = "salesAmount";
}       
onActionComplete = function (sender) {           
    var data = sender.model.currentViewData;
    if (ischartLoad) {
          var chart = $("#chartPromedio").ejChart("instance");
          chart.model.series[0].dataSource = sender.model.currentViewData;                 
          chart.redraw();
   }
   else {               
        grid = sender;                
    }      
}
In the above code for the render the chart we have used the data in the currentVIewData. Using this we can get the number of columns equal to the number of data in the grid’s page.
Screenshot before filtering

Screenshot after filtering


Please find the sample from the below location
Sample link: http://www.syncfusion.com/downloads/support/forum/119931/ze/WebApplication1826640165

Regards,

Sanjith K.​


Manolo
Replied On August 31, 2015 07:39 AM UTC

Hi,

I've been out.

Thanks for your update


Vinothkumar Arumugam [Syncfusion]
Replied On August 31, 2015 10:40 AM UTC

Hi Manolo,
Please let us know if you need further assistance.
Thanks,
Vinothkumar Arumugam.

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

or the page will be automatically redirected to 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

;