TypeError: this.t(…) is null

I’m integrating the compositeChart to me project and I get this error “TypeError: this.t(…) is null”

I tried a few more examples and all charts are doing this but the pie. Looks like something in the construction of the chart is missing. All of my includes are in place the best I can tell. There is no way I can troubleshoot this with out knowing what t is.] Seem its in the infragistics.dv.core.js: line 14

ie gives more info.

SCRIPT5007: Unable to get value of the property 'hide': object is null or undefined

At a guess I'd imagine you are missing some references. The last error there would indicate you are probably missing jQuery/jQueryUI references.

Well I'm certainly not missing them but are then the wrong versions?

<script src="/Scripts/jquery-1.7.1.js"></script>

<script src="/Scripts/jquery-ui-1.8.20.js"></script>

<script src="/Scripts/modernizr-2.5.3.js"></script>

From what I read I only need to include jquery-ui also seems that way in the examples. So what could be missing here?

I trie4d matching up the versions better

<script src="/Scripts/jquery-1.8.3.m1n.js"></script>

<script src="/Scripts/jquery-ui-1.8.20.m1n.js"></script>

Hi,

Is it possible you could provide a sample that reproduces that error? Its hard to comment on if I can't see your javascript references.

-Graham

The project is rather large. But here is the class that tries to make the class.

first I call this

_iUI.createChart( document.body, inWidth, inHeight, 500, 500, newData, header, rowHeader )

then

createChart = function ( content, inX, inY, inWidth, inHeight, r, c, data )
    {

        var id = this.windows.length;
        var newDiv = document.createElement( 'div' );
        newDiv.setAttribute( 'id', 'chartDisplay' );
        content.appendChild( newDiv );

        return new chart( $( newDiv ), inX, inY, inWidth, inHeight,r,c, data );
       

    };

and here is the class

 var chart = ( function() {
 
 
    // A constructor.
    /*
     \param IUDiv: referace to the UI div for igniteui engine
     \param inX: window position and size.
     \param inY: ""
     \param inWidth: ""
     \param inHeight: ""
     \param col: lable for column
     \param row:  lable for row
     \param inData: Data to be displayed

      creates a tree view
    */
     function chart( inIUDiv, inX, inY, inWidth, inHeight, row, col, inData )
     {
         this.UIDiv = inIUDiv.find( 'chartDummy' );

         $( "#chartDisplay" ).hide( true );

         //set up
         var inData = [
                { "Year": "2000", "Coal": 450, "Oil": 100, "Nuclear": 175 },
                { "Year": "2010", "Coal": 480, "Oil": 120, "Nuclear": 225 },
                { "Year": "2020", "Coal": 550, "Oil": 180, "Nuclear": 275 }
         ];

         //for ( var i = 0; i < inData.length; i++ ) { inData[i][row] = Number(inData[i][row]) }//fix text numbers to numbers
         
         //init code.
         $.ig.loader( function ()
         {
             var currData, currDataSource, doGeneration;

             doGeneration = function ()
             {
                 var num = 10, data = [], curr = 10;
                 for ( var i = 0; i < num; i++ )
                 {
                     if ( Math.random() > .5 )
                     {
                         curr += Math.random() * 2.0;
                     } else
                     {
                         curr -= Math.random() * 2.0;
                     }
                     var val1 = Math.round( curr * 1000.0 ) / 1000.0;
                     data[i] = { Label: i.toString(), Value1: val1 };
                 }
                 currData = data;
                 currDataSource = new $.ig.DataSource( { dataSource: currData } );
             }

             doGeneration();

             $( "#chartDisplay" ).igDataChart( {
                 width: "700px",
                 height: "400px",
                 dataSource: currDataSource,
                 axes: [{
                     name: "xAxis",
                     type: "categoryX",
                     label: "Label"
                 }, {
                     name: "yAxis",
                     type: "numericY"
                 }],
                 series: [{
                     name: "series1",
                     title: "Test Series",
                     type: "line",
                     xAxis: "xAxis",
                     yAxis: "yAxis",
                     valueMemberPath: "Value1",
                     showTooltip: true,
                     tooltipTemplate: "tooltipTemplate"
                 }],
                 horizontalZoomable: true,
                 verticalZoomable: true,
                 windowResponse: "immediate"
             } );
         } );
     }
    
    /*
    * getter for UI div
     \return instance to UI div
    */
     chart.prototype.getUIDiv = function () { return this.UIDiv; };

     return chart;
})();

What I was interested to see, rather than the code, was all the, in order javascript references you were making for the page in question.

this is a web api page so here are the bundles.

min files are renamed to m1n

                        "~/Scripts/jquery-1.8.2.m1n.js",
                        "~/Scripts/jquery-ui-1.8.20.m1n.js",
                        "~/Scripts/modernizr-*",
                        "~/SCT/plug-ins/jquery.event.drag-1.5.js",
                        "~/SCT/igniteui/Demos/scripts/jquery.mobile.custom.js",
                        "~/SCT/igniteui/Demos/scripts/demos.js",
                        "~/SCT/igniteui/js/infragistics.loader.js" ,

an I have this also

        $.ig.loader( { // igniteui init
            scriptPath: "../../SCT/igniteui/js/",
            cssPath: "../../SCT/igniteui/css",
            resources: "igGrid.Selection,igGrid.Updating,igGrid.Sorting,igGrid.Resizing,igTree,igDataChart.Category,igCombo"
        } );

this is how the page sees them as they are loaded.

<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">

<link rel="stylesheet" href="/Content/site.css">

<link rel="stylesheet" href="/SCT/igniteui/Demos/content/style.css">

<script src="/Scripts/jquery-1.8.2.m1n.js">

<script src="/Scripts/jquery-ui-1.8.20.m1n.js">

<script src="/Scripts/modernizr-2.5.3.js">

<script src="/SCT/plug-ins/jquery.event.drag-1.5.js">

<script src="/SCT/igniteui/Demos/scripts/jquery.mobile.custom.js">

<script src="/SCT/igniteui/Demos/scripts/demos.js">

<script src="/SCT/igniteui/js/infragistics.loader.js">

<link type="text/css" rel="stylesheet" href="../../SCT/igniteui/css/themes/infragistics/infragistics.theme.css" media="screen">

<link type="text/css" rel="stylesheet" href="../../SCT/igniteui/css/structure/modules/infragistics.ui.shared.css" media="screen">

<link type="text/css" rel="stylesheet" href="../../SCT/igniteui/css/structure/modules/infragistics.ui.grid.css" media="screen">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.util.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.datasource.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.templating.js">

<link type="text/css" rel="stylesheet" href="../../SCT/igniteui/css/structure/modules/infragistics.ui.editors.css" media="screen">

<link type="text/css" rel="stylesheet" href="../../SCT/igniteui/css/structure/modules/infragistics.ui.validator.css" media="screen">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.shared.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.scroll.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.grid.framework.js">

<link type="text/css" rel="stylesheet" href="../../SCT/igniteui/css/structure/modules/infragistics.ui.tree.css" media="screen">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.tree.js">

<link type="text/css" rel="stylesheet" href="../../SCT/igniteui/css/structure/modules/infragistics.ui.chart.css" media="screen">

<link type="text/css" rel="stylesheet" href="../../SCT/igniteui/css/structure/modules/infragistics.ui.html5.css" media="screen">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.dv.core.js">

<link type="text/css" rel="stylesheet" href="../../SCT/igniteui/css/structure/modules/infragistics.ui.combo.css" media="screen">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.grid.selection.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.editors.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.grid.featurechooser.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.grid.resizing.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.dvcommonwidget.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.validator.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.grid.sorting.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.chartlegend.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.combo.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.grid.updating.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.ui.chart.js">

<script type="text/javascript" src="../../SCT/igniteui/js/modules/infragistics.chart_categorychart.js">

Do you actually have the tooltipTemplate defined anywhere on your page? Do you get the error still if you turn off tooltips for the series?

 

-Graham

yes in the html I do.

      <script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <div class="ui-widget-content ui-corner-all">
            <span id="tooltipValue">Value: ${item.Value1}</span>
        </div>
    </script>

I dont see how to turn off tool tips, unless you mean showTooltip: false, then yes I tried that.

Any other thoughts I just tried the latest release with still no success.

Hi,

Its difficult to know what the error might be without being able to repro this on our side. Would it be possible to send an isolated repro project?

Also, I believe we ship some debug versions of the javascript files with the 13.1 project, if I recall correctly. So it may help to load with those and see if it provides more info about the failure location. I believe the only place we call hide is on a jQuery wrapped object we are trying to hide from view. This would indicate that we weren't able to find what we are trying to hide, which will only ever be the tooltip, or elements of the overview plus detail pane. If you disable both of those, it may indicate which is causing the problem in your case.

I see you are loading jQuery mobile, does the error still occur if you do not?

-Graham

wow nice guess? Yes removing the mobile stops the error, why?

I don’t seem to be able to replicate it locally, but your errors are indicating that jQuery probably isn’t loading correctly. So I was wondering if there was some interference between the jquery and jquery mobile versions you are using together. Are you sure you have two that should work together appropriately? If I use these versions:

<script src=“http://code.jquery.com/jquery-1.10.1.min.js&#8221;></script>

<script src=“http://code.jquery.com/jquery-migrate-1.2.1.min.js&#8221;></script>

<script src=”Scripts/jquery-ui-1.8.9.custom.js” type=”text/javascript”></script>

 

Things are loading for me appropriately with no errors. Also be very cautious with timing. I think the default bundle load in an MVC4 template is at the end of the body, so if you are adding scripts to the head anywhere, they will get loaded before any of the bundle scripts.

We decided after using the charts to try out other software for our charting needs. We require much more then Infragistics has to offer. As a result this issue is no long a concern for us.