Load event never fires

[Dennis Kroger]

The load event for my chart never fires:

@usingSyncfusion.JavaScript
@usingSyncfusion.MVC.EJ
@usingSyncfusion.JavaScript.DataVisualization
@usingSyncfusion.JavaScript.DataVisualization.Models
 
<div>
@(Html.EJ().Chart("container")
.PrimaryXAxis(pr=>pr.AxisLine(ax=>ax.Visible(false)).MajorGridLines(mr=>mr.Visible(false))
.MajorTickLines(mt=>mt.Visible(false)).Title(tl=>tl.Text("Depth"))
.Range(ra=>ra.Min(8430).Max(8540).Interval(10)))
.PrimaryYAxis(pr=>pr.Title(tl=>tl.Text("Percent")).Range(ra=>ra.Min(0).Max(100).Interval(10)))
.Series(ser=>
{
ser.Type(SeriesType.StackingArea).Add();
ser.Type(SeriesType.StackingArea).Add();
ser.Type(SeriesType.StackingArea).Add();
})
.Load("onchartload")
.IsResponsive(true)
.Title(t=>t.Text("Chart"))
.Size(sz=>sz.Height("400")))
div>
 
<scriptsrc="~/Scripts/jquery-2.2.0.min.js">script>
 
<scripttype="text/javascript">
varchartobj;
 
functiongetData()
{
$.ajax({
type:"POST",
url:'@Url.Action("LithData","Mobile")?jobId='[e-mail],
async:false,
success:function(data)
{
for(vari=0;i)
{
if(i==data[i].Id)
{
chartobj.model.series[i].dataSource=data[i].data;
chartobj.model.series[i].xName="xvalue";
chartobj.model.series[i].yName="yvalue";
}
}
},
error:function()
{
alert("failed");
}
});
}
 
functiononchartload(sender)
{
chartobj=this;
getData();
}
 
script>

onchartload never get called.

What am I missing?

[Saravana Kumar Kanagavel]

Hi Dennis, 

 

Thanks for using Syncfusion products. 

 

We have analyzed the code snippet provided by you and found that there is no space between the keyword "function" and function name "onchartload". 

 

We have prepared a simple sample using the above code and it can be downloaded from the following link 

http://www.syncfusion.com/downloads/support/forum/127889/ze/ClientLoadDemo-104524776  

 

[Chart with load event] 

 

 

Please let us know if you have any concern. 

 

Regrds, 

Anand 

[Dennis Kroger]

The missing space occurred during the copy and paste and my failure to proofread before posting. If you look at the code you will notice that all spaces have been removed.

There is something else wrong in my project.

I will examine your post and return for follow-up.

Thanks.

[Dharanidharan Dharmasivam]

Hi Dennis, 

 

Thanks for your update.We wait to hear from you.  

Please let us know, if you have any concern. 

Thanks, 

Dharani. 

[Dennis Kroger]

I do not understand why my project is behaving so differently from yours. When I run your project the SyncFusion chart renders as foloows:

<script type='text/javascript'>$(function($){$("#container").ejChart({"series":[{"cornerRadius":{"top":0,"bottom":0,"left":0,"right":0},"type":"stackingarea"},{"cornerRadius":{"top":0,"bottom":0,"left":0,"right":0},"type":"stackingarea"},{"cornerRadius":{"top":0,"bottom":0,"left":0,"right":0},"type":"stackingarea"}],"commonSeriesOptions":{"type":"column","cornerRadius":{"top":0,"bottom":0,"left":0,"right":0},"marker":{},"errorBar":{}},"primaryXAxis":{"axisLine":{"visible":false},"majorGridLines":{"visible":false},"majorTickLines":{"visible":false},"orientation":"horizontal","labelIntersectAction":"none","title":{"text":"Depth","font":{}},"scrollbarSettings":{"range":{}},"range":{"min":8430,"max":8540,"interval":10}},"primaryYAxis":{"orientation":"vertical","labelIntersectAction":"none","title":{"text":"Percent","font":{}},"scrollbarSettings":{"range":{}},"range":{"min":0,"max":100,"interval":10}},"size":{"height":"400"},"title":{"text":"Chart","font":{}},"isResponsive":true,"enable3D":false,"legend":{"font":{}},"load":"onchartload"});});</script>

When I run mine it renders as:

<div id="container" data-role="ejchart" data-ej-series='[{"cornerRadius":{"top":0,"bottom":0,"left":0,"right":0},"type":"StepLine"},{"cornerRadius":{"top":0,"bottom":0,"left":0,"right":0},"type":"StepLine"},{"cornerRadius":{"top":0,"bottom":0,"left":0,"right":0},"type":"StepLine"}]' data-ej-commonseriesoptions-type='column' data-ej-commonseriesoptions-cornerradius-top='0' data-ej-commonseriesoptions-cornerradius-bottom='0' data-ej-commonseriesoptions-cornerradius-left='0' data-ej-commonseriesoptions-cornerradius-right='0' data-ej-primaryxaxis-axisline-visible='false' data-ej-primaryxaxis-majorgridlines-visible='false' data-ej-primaryxaxis-majorticklines-visible='false' data-ej-primaryxaxis-orientation='horizontal' data-ej-primaryxaxis-labelintersectaction='none' data-ej-primaryxaxis-title-text='Depth' data-ej-primaryxaxis-range-min='8430' data-ej-primaryxaxis-range-max='8530' data-ej-primaryxaxis-range-interval='10' data-ej-primaryyaxis-orientation='vertical' data-ej-primaryyaxis-labelintersectaction='none' data-ej-primaryyaxis-title-text='Percent' data-ej-primaryyaxis-range-min='0' data-ej-primaryyaxis-range-max='100' data-ej-primaryyaxis-range-interval='10' data-ej-size-height='400' data-ej-title-text='Lithology' data-ej-isresponsive='true' data-ej-enable3d='false' data-ej-load='onchartload' ></div>

I have examined both projects yet I have not determined the difference that is causing this. Why is yours rendering as a script and mine is rendering as a div?

I must be something rather simple that I am missing.

[Dennis Kroger]

The reason for the different rendering is due to this key in the web.config file:

<add key="UnobtrusiveJavaScriptEnabled" value="false"/>

I had it set to true.

[Dharanidharan Dharmasivam]

Hi Dennis, 

Thanks for your update. 

Unobtrusive JavaScript support will create the components with basic level HTML tag-like structure in order to reduce the weightage of the page. If you use unobtrusive support, chart will render tag like structure else chart will render as script. 

For more information on Unobtrusive, kindly follow the below link 

https://help.syncfusion.com/js/unobtrusive-support  

However, if you set UnobtrusiveJavaScriptEnabled to false, chart will not render in unobtrusive mode. 

Thanks, 

Dharani.