jQuery UI Widgets › Forums › Chart › Object doesn't support property or method 'jqxChart'
Tagged: asp.net, chart, div, dynamic, dynamically, html, initialize, jQuery, jqxChart, load
This topic contains 11 replies, has 2 voices, and was last updated by Dimitar 10 years, 2 months ago.
-
Author
-
Hello:
I’m trying to use jqwidgets on a web platform but I’m unable to invoke jqxChart on a dynamic div.
The Example is shown below:
$(document).ready(function () { var dataNetApplications = [ { Browser: 'Chrome', Share: 16.4 }, { Browser: 'IE', Share: 55.2 }, { Browser: 'Firefox', Share: 18.0 }, { Browser: 'Safari', Share: 5.8 }, { Browser: 'Opera', Share: 1.3 }, { Browser: 'Other', Share: 3.4 } ]; var chartSettings = { source: dataNetApplications, title: '', description: 'Net Applications', enableAnimations: false, showLegend: true, showBorderLine: true, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, colorScheme: 'scheme03', seriesGroups: [ { type: 'pie', showLegend: true, enableSeriesToggle: true, series: [ { dataField: 'Share', displayText: 'Browser', showLabels: true, labelRadius: 160, labelLinesEnabled: true, labelLinesAngles: true, labelsAutoRotate: false, initialAngle: 0, radius: 125, minAngle: 0, maxAngle: 180, centerOffset: 0, offsetY: 170, formatFunction: function (value, itemIdx, serieIndex, groupIndex) { if (isNaN(value)) return value; return value + '%'; } } ] } ] }; $("#ctl00_btnShowEscenario").on('click', function () { $.Dialog({ overlay: true, shadow: false, flat: true, icon: '<span class="icon-info"></span>', onShow: function (_dialog) { var content = '<div class="grid" style="width:785px">'+ '<div class="row">'+ '<div class="span5" style="padding-left:15px">' + '<div class="panel">'+ '<div class="panel-header bg-lightBlue fg-white">Productos</div>'+ '<div class="panel-content">'+ 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'+ '</div>'+ '</div>'+ '</div>'+ '<div class="span5" style="padding-right:15px">' + '<div class="panel">'+ '<div class="panel-header bg-lightBlue fg-white">Solicitud</div>'+ '<div class="panel-content">'+ 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '<div class="row">'+ '<div class="span5" style="padding-left:15px">' + '<div class="panel">'+ '<div class="panel-header bg-lightBlue fg-white">Resumen Ejecución</div>'+ '<div class="panel-content">'+ 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'+ '</div>'+ '</div>'+ '</div>' + '<div class="span5" style="padding-right:15px">' + '<div class="panel">'+ '<div class="panel-header bg-lightBlue fg-white">Gráfica detalle</div>'+ '<div class="panel-content">'+ '<div id="chartContainer1"></div>' + '</div>' + '</div>' + '</div>' + '</div>' + '<div class="row">'+ '<div class="span10" style="padding-left:15px;padding-right:15px">' + '<div class="panel">'+ '<div class="panel-header bg-lightBlue fg-white">Resultados</div>'+ '<div class="panel-content">'+ 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'; $.Dialog.title("Estado Ejecución Escenario"); $.Dialog.content(content); } }) // select container and apply settings $("#chartContainer1").jqxChart(chartSettings); return false; });
this code is located on a master page, and at the head I refer to css and JS like this.
<script src=”javascripts/jquery/jquery-1.10.2.min.js” type=”text/javascript”></script>
<script src=”jqwidgets/jqxcore.js” type=”text/javascript” ></script>
<script src=”jqwidgets/jqxchart.core.js” type=”text/javascript”></script>
<script src=”jqwidgets/jqxdraw.js” type=”text/javascript” ></script>
<script src=”jqwidgets/jqxdata.js” type=”text/javascript” ></script>Any idea?
Thanks in advance for your support.
Hello antonborraz,
We are not sure what causes your issue and neither are we familiar with the dialog you are trying to initialize a jqxChart in. Could you, please, post a JSFiddle example reproducing the error which we may test to determine the source of the issue?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thank you for your reply.
I’m not very familiar with fiddle but I’ve shared the example http://jsfiddle.net/8zgdkpjz/1/
Is this correct??? As you can see I’m very newby with these technologies, sorry for the inconvenience and thanks again for your knidly support.
Regards
Hi antonborraz,
You should also add references to the libraries you are using (jQWidgets, etc.) in the field External Resources. Please check out this fiddle as an example: http://jsfiddle.net/jqwidgets/UX2c6/.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi,
I’ve checked your example, and here is mine: http://jsfiddle.net/8zgdkpjz/15/
Although I click the button nothint appears, is there any way to debug?
Thanks again.
Kind regards.
Hi antonborraz,
One of your references to third-party components is invalid.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
I´ve debugged the code with chrome, http://jsfiddle.net/8zgdkpjz/21/.
There is an error of type “undefined is not a function”, but I don’t know why.
Any suggestion???
Thanks again.
Best regards.
Antón
Hi Antón,
There was a conflict between the version of jQuery used by the fiddle (defined in Frameworks & Extensions) and the one you added as a reference. Remove the link to the latter and add a width and height to the chartContainer1 div, and the chart should display fine:
<div id="chartContainer1" style="width:300px; height:200px;"></div>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi dimitar, I’ve tested your suggestions with fiddle and it works, but In my project it’s still appearing the same issue.
I’ve noticed that I’ve several jquery dependencies, and I don’t know the loading order of your js
Which jquery version do you recommend?Thanks in advance.
Kind Regards.
Hi Antón,
Please check the Documenatation section jQuery dependency and compatibility and make sure you load only one jQuery script to avoid conflicts.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/It’s running!!!!!
Thanks for your kindly support.
Another question?? Where I can find an ASP.Net example which loads data dynamically.
Thank you very much again.
Kind Regards.
Hi Antón,
All available ASP.NET examples can be found in the Documentation, under ASP .NET Integration.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.