jQuery UI Widgets Forums Chart Object doesn't support property or method 'jqxChart'

This topic contains 11 replies, has 2 voices, and was last updated by  Dimitar 10 years, 2 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author

  • antonborraz
    Participant

    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.


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    antonborraz
    Participant

    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


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    antonborraz
    Participant

    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.


    Dimitar
    Participant

    Hi antonborraz,

    One of your references to third-party components is invalid.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    antonborraz
    Participant

    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


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    antonborraz
    Participant

    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.


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    antonborraz
    Participant

    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.


    Dimitar
    Participant

    Hi Antón,

    All available ASP.NET examples can be found in the Documentation, under ASP .NET Integration.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.