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

Load event never fires

Thread ID:

Created:

Updated:

Platform:

Replies:

127889 Dec 15,2016 08:04 PM UTC Dec 20,2016 05:47 AM UTC ASP.NET MVC 6
loading
Tags: Chart
Dennis Kroger
Asked On December 15, 2016 08:04 PM UTC

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='+@ViewBag.JobId,
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 [Syncfusion]
Replied On December 16, 2016 12:49 PM UTC

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 
 
[Chart with load event] 
 
 
Please let us know if you have any concern. 
 
Regrds, 
Anand 


Dennis Kroger
Replied On December 16, 2016 03:07 PM UTC

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 [Syncfusion]
Replied On December 19, 2016 12:09 PM UTC

Hi Dennis, 
 
Thanks for your update.We wait to hear from you.  
Please let us know, if you have any concern. 

Dharani. 


Dennis Kroger
Replied On December 19, 2016 03:04 PM UTC

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
Replied On December 19, 2016 08:43 PM UTC

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 [Syncfusion]
Replied On December 20, 2016 05:47 AM UTC

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 

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

Thanks, 
Dharani. 


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.

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

;