$("#chartPromedio").ejChart("instance") is not working
catching the exception y get this error:
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.?
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.
